Link Column

Support
#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!

#22

You’re more than welcome, glad we could help.

Cheers!

#24

Hi there,

I deleted the Secure Note you added as the secure note is visible to the original poster of this thread.

We totally understand that this is the same issue you are interested in but please kindly open up a new thread and we will be more than happy to help you out there and there you can add the Secure Note with no issues.

You can certainly link to this thread so that my colleagues will understand which thread you are talking about.

Thank you for your understanding and cooperation.