Link Feature Box without displaying textlink copy

Support
#1

Hello. I tried following the support forum posts for linking feature boxes but I cannot seem to figure out how to link my feature boxes without displaying the textlink below the box.

Whenever I add the click url to the “link text” area of the feature box in Cornerstone, it displays the text beneath the feature box.

can you advise how to accomplish linking the feature box without displaying the text?

#2

Hello There,

Thanks for writing in! Have you already applied the code found here:

Please keep in mind that there is no other way to add the link for the featured boxes. Unless otherwise, you will have to manually supply the link url by modifying the JS code in that thread.

First, you must add a custom ID #my-feature-box for the featured box in the ID field. And then you can make use of this code:

jQuery ( function( $ ) {
  $('#my-feature-box').find('.x-feature-box-graphic').wrap( '<a href="http://example.com/"></a>' );
});

Please let us know if this works out for you.

#3

Hello. I tried pasting the first section of code exactly as it is listed above into the JS area of the Feature box but nothing changed.

Next I tried pasting the first section of code but changed the “x.feature” part to my actual feature box name which is “be.feature” into the JS area of the Feature box in Cornerstone. That didn’t change anything.

Lastly I tried adding the custom id #my-feature-box and adding the original code to JS exactly as listed but nothing changed.

For all instances, I tried inputting http://honeyandfigs.com/category/be in the “HREF field” of the feature box and left the “link text box” and “link title attribute” fields blank.

Here is the page I am trying to link each feature box to their corresponding category pages to (be, go, plan, do) http://honeyandfigs.com/start-here/

Please let me know if you can advise what I might be missing.
thank you!
lisa

#4

Hello There,

Thanks for updating in! I have inspected your page and I could not see that you have added a custom ID for each of the featured boxes.

I can see that you have added the JS code given from this thread. It does not work because the link text is left blank which is why the url is also non existent. You should have at least added an space character so that it will not be blank.

Well, anyway, please give us access to the page so that we can create an example for you and make the JS code work.

Thank you.

#5

Ok. I’ve added the information via a secure note inline.

Please note that I’m trying to make the icons clickable themselves in the feature boxes. I don’t want a url of text displayed below the Title of the Feature box.

thanks so much for the help!
lisa

#6

Hi Lisa,

Just add the text on ID field. Remove #. We just need # when we reference to the ID on JS or CSS.

On the link provided, for it to work, I have adjusted it to:

jQuery ( function( $ ) {

  $('.x-feature-box-text a:last-child').each( function() {
    $( this ).parent().parent().parent().find('.x-feature-box-graphic-inner i').wrap( '<a href="' + $( this ).attr('href') + '"></a>' );
    $( this ).remove();
  } );

} );

On feature box element, under graphic option, there’s image and icon. Since you have chosen Icon, we have to adjust this part '.x-feature-box-graphic-inner img' to this '.x-feature-box-graphic-inner i'. Now, you can see there’s two types of code on your custom JS on that page. The first one is working on the first ICON BE. Then next is working on GO. If you will just add LINK text on next icon, it will work that icon too. Basically, the second code remove the link text and then just grab it’s LINK URL and add it on the ICON. Now, feel free to choose which code you want to use.

Hope this helps.

#7

You fixed it! Thank you so much!

#8

On behalf of my colleague, you’re welcome. Cheers!

#9

Hello again. I am trying to implement this same solution for my Homepage, honeyandfigs.com, but unfortunately the js code solution you provided for the icons on the “Start Page” does not seem to be working to link the icons to the category pages on the homepage.

Can you help me get the links to work?
Be- category/be/
Go- category/go/
Plan category/plan/
Do- category/do/

thanks!
lisa

#10

Hi Lisa,

Thanks for writing back! This is getting beyond the scope of the support we can provide and is straying into more of custom development.

Based on the code you’ve already got, on the new pages/posts. You’ll need to add a unique ID to make it clickable. For example if you have a unique link you need on each of the different pages, you can’t use the same piece of code, as that already has a link.

So you’d use a unique ID, such as feature-box-be-category you then target that in the code with the # symbol, making the target #feature-box-be-category then modify the supplied Javascript to target that new ID. Do this for each page and you’ll end up with multiple JS snippets.

Thanks!