Link Column

Support
#1

I am trying to add a link to my margin-less columns on my home page and I’m using Cornerstone.

Also, I can’t find the Advance Control setting.

Thanks for your help!

2 Likes
#2

Hello There,

Thanks for writing in!

All the contents of the advance control settings is now integrated in the element settings.

To make an entire column to become a link, please do the follow these:
1] Please set up your section, row and columns.
2] Be sure to insert a custom ID for each of your column. For example: my-column, my-other-column as column IDs.
3] Go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){
 $(document).ready(function($) {
  $("#my-column").append('<a href="#link-of-the-column"></a>'); 
  $("#my-other-column").append('<a href="#link-of-the-other-column"></a>'); 
 });
})(jQuery);

4] And then insert the following custom css in the settings tab, Settings > Custom CSS

#my-column,
#my-other-column{
    position: relative;
}

#my-column > a,
#my-other-column > a{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

5] Saved all these changes and preview the page.

Please let us know how it goes.

#3

This did not work for me for some reason. It did not make the column a link with that JS code. Has anything changed in X that would require an update to this solution?

#4

Hi @SwimNC,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#6

Hi there,

Please add this code to your global custom javascript

jQuery(document).on('click', '.page-id-7650 #x-section-3 .x-column', function() {

window.location = jQuery(this).find('.x-btn').attr('href');

} );

and this to your global custom CSS

.page-id-7650 #x-section-3 .x-column {
    cursor: pointer;
    cursor: hand;
}

These are just snippet that may not work in the future, we can’t cover and support in any custom code so please use it with caution.

Thanks!

1 Like
#7

That worked! Thanks so much!

#8

You’re most welcome!

#9

I’ve tried @RueNel’s recommendation and it doesn’t seem to be working for me either. I’d also like to add color to the column so when you hover it, it changes and alerts users to a link. Please advise. Thanks!

Separately, it would great to have this functionality in future versions of Cornerstone. Is that do-able?

#10

Hi @Hobbesknox,

Thanks for writing around! Did you add the column ID? if not then do that first. Make sure to follow all the steps in @RueNel’s post. Also I noticed you’re using a cache plugin. Please purge it’s cache as this could be preventing the changes to take place.

Also you’re using an old version of X & Cornerstone, please update it to the latest version to avoid potential conflicts. You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

#11

Thanks for the quick response, Nabeel. Appreciate it. That worked! Awesome!

Question 2 - How do I add the background color when the cursor hovers over the column? I tried the following from an old post without any luck:

.linked-column:hover:before {
background-color: rgba(255,255,255,0.5);
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
.linked-column:hover a {
color: red !important;
}

#12

Hey there,

Glad it worked. For the hover background color, replace your code with this:

.linked-column {
	position: relative;
}

.linked-column:hover:before {
background-color: rgba(13, 197, 204, 0.5);
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.linked-column:hover a {
color: red !important;
}

Make sure linked-column is a class you’ve added. If it’s a ID then use it like #linked-column in the above code.

Let us know how this goes!

#13

Hi Nabeel -

Thanks for the direction. Very much appreciated. It works for the 2nd column, but when I hover over the 4th column, it highlights all four columns.

Separately,

The code I’m using:

#linked-column-2 {
	position: relative;
}

#linked-column-2:hover:before {
background-color: rgba(13, 197, 204, 0.5);
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#linked-column-2:hover a {
color: red !important;
}

#linked-column-2 {
	position: relative;
}

#linked-column-4:hover:before {
background-color: rgba(13, 197, 204, 0.5);
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#linked-column-4:hover a {
color: red !important;
}

Rob

#14

Hi there,

May I know which page has these columns? I see 4 columns in home page but the above changes are not applied.

Thanks!

#15

Hi Rad -

Here’s the page - http://www.publicistforhire.com/homepage-10-5-17/. Second column has a hover color. When I hover over the fourth column, it highlights all of the columns.

Best,

Rob

#16

Hi there,

Thanks, you forgot this to add

#linked-column-4 {
	position: relative;
}

That should do it :wink: Cheers!

#17

Ahhhhh! Thanks, Rad. Appreciate the quick response.

#18

Glad we could help.

Cheers!

#19

Not sure what’s happening here. I have the hover colors working, but the hyperlinking isn’t - http://www.publicistforhire.com/homepage-10-8-17/.

#20

Hi again,

Please add the following CSS code in your Customize to fix the issue:

div[id^="linked-column-"] {
    position: relative;
}

div[id^="linked-column-"] > a{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

Hope this helps!

#21

Worked! Thanks!