Docs

[John]

Hi guys,

So I have a question about “The Grid” plug in. Its on the following page:

Lansing Website Design

Near the bottom of the page you will see that I’m using the grid to list some of my project (work in progress) and when you mouse over an box element you will see that a small read more link pops up. While this is kind of nice and I would like to keep this effect; I would rather have the whole box be a hot link that access additional details about a project; take a look:

http://prntscr.com/bqxfqy

So is this something you can help me fix? And seeing as its an outside plugin; if you don’t provide support can you point me in the right direction to having someone over at the grid give me a hand?

Thanks!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.tg-item-content-inner {
    height: 100%;
}
a.tg-link-button {
    width: 100%;
    height: 100%;
}

Hope that helps.

[John]

Awesome; it did help! thank you.

I just have two follow questions:

1) The CSS has moved the “read more” text to the top of the box and I would prefer it to be in its original location at the sort of close to the bottom in the center; is there a way to keep the whole box linking capability and put the text back where it was?

2) Is there a way to change the message from “Read more” to say “Read more about this project”

Thank you so much for all the help!

[Rupok]

Hi there,

Thanks for updating.

#1. You can add this under Custom > CSS in the Customizer.

.tg-item-content-inner .tg-link-button {
  padding-top: 145px !important;
}

Let’s change the value to adjust positioning.

#2. You can add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($) {
    $('.tg-item-content-inner a.tg-link-button ').html('<i class="tg-icon-add"></i> Read more about this project');
});

Hope this helps.

Cheers!

[John]

First off thank you for the prompt response; the CSS worked like a charm, so thank you for that.

But I’m unable to get the JS working up to this point I added as per the instructions above take a look and plz make sure I’m doing it right. The following Screen cap is from the sites JS customizer window:
http://prntscr.com/brj1ve

I put in the code per the letter via copy and pastes so I’m not sure what the problem is:

jQuery(document).ready(function($) {
    $('.tg-item-content-inner a.tg-link-button ').html('<i class="tg-icon-add"></i> Read more about this project');
});

Could we please take another look and this?

Thanks for the continued support.

John

[Rupok]

Hi John,

I have tested the suggested code and it should work fine. However what you have added just below this is causing the issue. Kindly remove them since it won’t work there like this. You can only use plain script there NOT link to other scripts.

If you need to add external script then you can add the following code to your Child Theme‘s functions.php :

add_action( 'wp_footer', 'typekit_scripts' );
function typekit_scripts(){
  wp_enqueue_script( 'typekit-script', 'https://use.typekit.net/uuk8sof.js', array('jquery') );
}

You can use the following code block as plain script (without script tag) there :

try{Typekit.load({ async: true });}catch(e){}

Hope this makes sense.

[John]

I want to be able to follow these direction but I’m not sure how to, can you walk me though what I need to do please?

I was having a hard time getting the adobe type kits working so there was some “advanced code” provided by adobe after I applied that all of the typekit fonts are now working but as we covered the new message for the grid hover is not.

Sorry if this is redundant but I though it would be helpful to post the most recent code that are in the JS editor.

/*- Change message on The Grid Hover -*/
jQuery(document).ready(function($) {
    $('.tg-item-content-inner a.tg-link-button ').html('<i class="tg-icon-add"></i> Read more about this project');
});
/*- Adobe Typekit linking -*/
(function(d) {
    var config = {
      kitId: 'uuk8sof',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);

Thanks for the help!

[John]

You know what it appears to be working! Disregard the above request for additional help; and thank you once again for the assist!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts