Docs

[Lobsterass]

Hi!

I’ve been running usability testig on my portfolio and unfortunately users don’t like Honaria or Oslo due to the covering overlay on hover. (They don’t like not being able to see the image when scrolling down on phone or IPad.)

Is it possible to remove the link button and make the whole .tg-item clickable instead, when using LIMA?

And is it possible to center .tg-item-title and .tg-cats-holder? The hidden .to-post-like in the right corner puts them off center slightly.

<3

[Rad]

Hi there,

Thanks for writing in.

I don’t see any overlay that covers on my end. There is no hover effect either other than the link icon. Is it’s fixed now? Or should it be another issue?

Thanks!

[Lobsterass]

Hi Rad!

Sorry for being unclear. Is it possible to remove the link button and make the whole .tg-item clickable instead, when using the current skin, LIMA? I’m planning on adding a border around the thumb for hover effect.

And is it possible to center .tg-item-title and .tg-cats-holder? The hidden .to-post-like in the right corner puts them off center slightly.

<3

[Thai]

Hey There,

#1] Please add the following CSS under Customizer > Custom > Global CSS:

.tg-item-media-holder {
    cursor: pointer;
}

#2] Please add the following code under Customizer > Custom > Global Javascript:

(function($){
	$(".tg-item-media-holder").on('click', function(event) {
		event.preventDefault();
		$(this).find('.tg-link-button').trigger('click');
	});
})(jQuery);

Hope it helps 🙂

[Lobsterass]

Hi!

Thanx. It almost works. 🙂
For some reason, the .tg-title ist the only clickable part now. I would like the thumbnail image to be clickable too.

<3

[Nabeel A]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.tg-item-title a').each(function(){
		var link = $(this).attr('href');
		$(this).parents('.tg-item-inner').find('img').wrap('<a href="' + link + '"></a>')
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Lobsterass]

Awesome! That worked perfectly. Thank you! 🙂

My last little problem with this, is how to center the title (after having removed .to-post-like in right corner). Could you please tell me why this css doesn’t work?

.lima .tg-item-title {
padding: 0 !important;
}

You’re the best! <3

[Thai]

Hi There,

Please try with this CSS instead:

.lima .tg-item-content-holder .tg-item-title {padding-right: 0 !important;}

Hope it helps 🙂

[Lobsterass]

Hi!

Crap, the clicking on the image stopped working when I changed something. Cache cleared. I know I’m a pain inte the butt. Could you please help me fix the following on http://dev.monroedesign.se/portfolio/ so that hovering either image or title looks like attached image?

1. .lima .tg-item-content-holder
Make clickable.

2. .lima .tg-item-title a
Make it #59c3c4 when hovering THE IMAGE .lima .tg-item-content-holder also. It would be awesome if it was possible.

3. .lima .tg-item-media-holder:hover {
border: 2px solid #59c3c4 !important;
}
Put the border on the INSIDE of the image – to prevent title and cats to jump around on hover.

4. I have turned off automatic ajax load of new thumbs on scroll but they still move around when seen on iPad. It does not happen when a different skin is selected. Weird!

I’m sorry I’ve asked so many questions about this. My user test group have had usability issues with my design choices. Not your fault – mine. I really appreciate your help.

<3

[Lely]

Hi There,

1.) Did you add the script suggested here:https://community.theme.co/forums/topic/the-grid-lima-remove-link-button-and-make-the-whole-tg-a/#post-1210536
I can’t find it on your custom javascript.

2.) Use this custom CSS:

.lima .tg-item-media-holder:hover+div .tg-item-title a {
    color: #59c3c4 !important;
}

3.)Please also add this:

.lima .tg-item-media-holder{
    border: 2px solid transparent!important;
}

4.) Can you give us video screencast of the issue?

Hope this helps.

[Lobsterass]

Hola!

1. I had the old code but put in the new again. It still doesn’t make the image clickable though. I added this in JAVASCRIPT:

jQuery(document).ready(function($){
	$('.tg-item-title a').each(function(){
		var link = $(this).attr('href');
		$(this).parents('.tg-item-inner').find('img').wrap('<a href="' + link + '"></a>')
	});
});

and this in CSS:

.tg-item-media-holder {
cursor: pointer !important;
}

2. YES! Awesome! Thanx!

3. I tried that transparent border but it makes the edges of the thumb look blurry. Please see images. I googled and found out that people seem to do it with a minus before the 2px:

.lima .tg-item-media-holder{
border: -2px solid transparent!important;
}
.lima .tg-item-media-holder:hover {
border: -2px solid #59c3c4 !important;
}

I couldn’t get that to work. On Stack Overflow somebody used a border display: inline-block https://stackoverflow.com/questions/19159977/inner-border-over-images-with-css. Would that work here? I don’t get how to implement it.

4. It doesn’t happen now for some great reason. Don’t get why but I’m trying not to break it again. 🙂

<3

[Rad]

Hi there,

1. It has over and it prevents your from clicking the image directly. Please add this CSS as well,

#grid-27506 .tg-item-overlay {
    pointer-events: none;
}

3. There is a simpler way, please change it to this

.lima .tg-item-media-holder{
border: 0px !important;
padding: 2px;
}
.lima .tg-item-media-holder:hover {
-webkit-box-shadow:inset 0 0 0 2px #59c3c4;
box-shadow:inset 0 0 0 2px #59c3c4;
}

4. Sure, please let us know when you get same issue 🙂

Thanks!

[Lobsterass]

Hola!

1. Thanx. It only works for the items initially loaded though. The second group of loaded items are still not clickable.

2. Aaaalmost! The title stopped jumping around with that css. Great! But the thumb edges still appear blurry. Please see image.

Also, in my “wanna-be-unicorn-designer-world”, I want no visible padding around the image. Is there some other creative way to solve this problem?

The closest I got to solving the blurry edges was to use this:
.lima .tg-item-media-holder {
-webkit-box-shadow:inset 0 0 0 2px #fff;
box-shadow:inset 0 0 0 2px #fff;
}

It still has the visible unwanted padding though.

B

[Rad]

Hi there,

1. Ah, because this code only runs once, and upon load.

jQuery(document).ready(function($){
	$('.tg-item-title a').each(function(){
		var link = $(this).attr('href');
		$(this).parents('.tg-item-inner').find('img').wrap('<a href="' + link + '"></a>')
	});
});

Loading item is like adding the new one which isn’t yet processed by that code. Unfortunately, there is no available documentation from The Grid that can hook up the loading items for processing. How about creating or modifying your grid skin (Skin Builder) and link the entire item. That way, you don’t need that javascript anymore. Skin Builder’s Layout Settings has Layer Action section, and that’s you can enable linking of each item.

2. Please try this one

  .lima .tg-item-media-holder{
border: 0px !important;
padding:0px;
position: relative;
}
.lima .tg-item-media-holder:after {
 position: absolute;
  width: 100%;
  content:"";
  display:block;
  left:0;
  top:0;
  right:0;
  bottom:0;
  pointer-events:none;
  z-index:999999;
}
  
.lima .tg-item-media-holder:hover:after {
-webkit-box-shadow:inset 0 0 0 2px #59c3c4;
box-shadow:inset 0 0 0 2px #59c3c4;
}

Hope this helps.

[Lobsterass]

Hi!

1. OK! I’ll create a new skin. I’ve read the documentation here and on The Grid’s site. Don’t take me wrong (I LOVE you guys) but since your documentation makes it sound like I already have the skin builder installed with the latest X, I spent like 45 min trying to figure out where the skin builder was located. I need that skin builder 2.0 to go live.

“Access to the Skin Builder is an exclusive deal only for X Customers. Usually access is reversed for people that purchase the Grid directly, but we’ve secured you our valued customers access to the Skin Builder all with your purchase of X.”

2. That works perfectly!….unfortunatly I need the clicking action (1.) to function in order to use it. Is there a way you could post The Grid 2.0 in a zip here, so that this issue can be solved before I go live next week?

I asked The Grid on Envato about this, as the pain in the butt I am ;). They say it’s up to you guys.

<3

[Author]

Posts