[Jan-Paul GParticipant]

Hi,

We want some of our columns to change their background color on mouse over eg hover, and be able to be clicked through to another page….

However even trying the simplest step of putting in some custom css into the page and calling it from the column to set the column background color does not work…

Custom CSS on page is

.columnbackground {
background-color:#2D06BE;
}

Then in the column I edit and put this in class – .columnbackground

But nada – doesnt change color at all…. However if I pop background-color:#2D06BE; straight into CSS it works perfectly… I have know wasted hours on this 🙁 If anyone could help me out I would be very greatful!

Thanks

[Paul RModerator]

Hi Jan-Paul

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. 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.

[Jan-Paul GParticipant]

Sorry – missed it – here is the page we are working on.

http://cerberon.solutions/home2/

[ZeshanMember]

Hi Jan-Paul,

Thank you for writing in!

Upon checking, it seems you have added the class to your column shortcode with “.” (see: http://prntscr.com/4lruf1). Please note that “.” is only added to target a class in CSS. Please check this: http://www.w3schools.com/css/css_selectors.asp

So basically, you only have to add columnbackground in your column shortcode. To change the color on hover, you can add the following CSS under Custom > CSS in the Customizer:

/* Adding transition, for smooth effects */

.x-column.columnbackground,
.x-column.columnbackground .h-custom-headline {
   -webkit-transition: .25s linear all;
   -o-transition: .25s linear all;
   transition: .25s linear all;
}

/* Changing background color of Column on hover */

.x-column.columnbackground:hover {
   background-color: #2D06BE;
}

/* Changing the color of text on hover */

.x-column.columnbackground:hover .h-custom-headline,
.x-column.columnbackground:hover p {
   color: #fff;
}

Hope this helps. 🙂

Thank you.

[Jan-Paul GParticipant]

Thats amazing thanks so much – any chance you could tell me how to set it to launch another page on click?

[CousettMember]

not sure what you mean you can create a new page with the add new button

[Jan-Paul GParticipant]

When someone moves the mouse over the column and it colour changes – if they click it opens another page on the site…

Thanks so much again 🙂

[ChristopherModerator]

Hi there,

You can set link to any text ,select the text and click on insert link icon and add the link in there just like the screen shot below:
http://prntscr.com/4ltfzk

Hope it helps.

[Jan-Paul GParticipant]

Thanks – I just wondered if there was making it a hyperlink for the whole column 🙂

[CousettMember]

Best practice is to make links, buttons or images linkable but not necessarily the full column.

[Jan-Paul GParticipant]

Is there anyone to make the whole column? As we want the experience of it changing colour when someone mouses over it and being able to click any where…

Thanks indeed for your help! Support is Brilliant!

[ZeshanMember]

Hi Jan,

Thank you for writing in!

You can achieve this by this:

1: Assign a class of clickable to your column shortcode.
2: Inside your column shortcode, add a link to the page you want to redirect the column on click, like:

<a href="http://www.google.com/"></a>

Make sure you have only one link inside your column shortcode.

3: After that, add the following jQuery code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
   (function($){$.fn.hoverclass=function(){return this.each(function(){$(this).bind('mouseover',function(){$(this).addClass('active')}).bind('mouseout',function(){$(this).removeClass('active')}).bind('click',function(){window.location=$('a',this).attr('href')})})}})(jQuery);
  
   $('.clickable').hoverclass();
});

4: Add the following CSS code under Custom > CSS in the Customizer:

.x-column.clickable {
   cursor: pointer;
}

That’s it.

Hope this helps. 🙂

Thank you.

[Helen HParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hi Helen,

Thanks for updating the thread!

When you are editing in Cornerstone, you need to turn on the advance controls and you will have the column ID, class and style field. You can insert an inline css background-color: #fff; in the column style field. You might need to add a padding padding: 20px; so that you will have space around the column and the content inside the column. Hope this helps. Kindly let us know.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[KAtamianParticipant]

This reply has been marked as private.

[Author]

Posts