gk-video-link:hover - Styling

Hello,

First of all, well done on a brilliant collection of templates. Brilliant work!

I am writing to you today after spending a good amount of time scouting through the CSS of the Simplicity theme.
I am trying to change the colour from the video link (thickbox) in the homepage header.

The code in the widget is as following:

<a class="gk-video-link thickbox" href="http://player.vimeo.com/video/22126094?title=0&amp;TB_iframe=true&amp;width=600&amp;height=256">Watch the video.</a>

I have identified the class as 'gk-video-link' as the class impacting the style of the link.

Nonetheless, when adding the following code in my override.css, the hover of the link remains yellow and not black as I am stating in the code (I use style3.css).

.gk-video-link:hover {
color: #000;
}

Any reason why that is? I have tried all type of css alterations, looked into the knowledgebase (found something about '!important' that could be at the root of my issues) but, alas, without any luck.

I look forward to hearing from you,

Theodore K.

Hello,

Great to hear that you like our themes

Regarding your problem - this link is specified in the CSS with more details, please add this code in your override.css file:

Code: Select all

.imageBg #gk-header-mod .gk-video-link:hover {
color: #000;
}

Hello Piotr,

Thanks for the prompt reply.

I added the css code that you just mentioned but unfortunately, nothing changes. It is not a cache issue either, as I have cleared cache.

My override file looks like this:

Code: Select all

/**
 *
 * -------------------------------------------
 * Override
 * -------------------------------------------
 *
 **/

/*
 *
 * 16. Override
 *
 *
------------------------------------ */

/* 16.1. Overrided elements
==================================== */


.imageBg #gk-header-mod .gk-video-link:hover {
color: #000;
}


.gk-button-area a:active,
.gk-button-area a:focus,
.gk-button-area a:hover {
   background: #43bbde;
}

.gk-button-area a {
   background: #de5643;
}


.gk-mobile:hover {
   background-color: #de5643;
}

#main-menu > li > a:hover,
#main-menu > li.current-menu-item,
#main-menu > li.current_page_item,
#main-menu > li:hover,
#main-menu > li.active > a,
#main-menu > li.current-menu-item > a,
#main-menu > li.current_page_item > a,
#main-menu > li.current-menu-ancestor > a,
#main-menu > li.current-menu-parent > a  {
   color: #de5643;
}

#main-menu .sub-menu li:hover {
   background: #de5643;
}

#main-menu .sub-menu li:hover > a {
   border-top-color: #de5643;
}

#gk-menu-wrap #main-menu a:hover,
#gk-menu-wrap #main-menu a:active,
#gk-menu-wrap #main-menu a:focus,
#gk-menu-wrap #main-menu li.active > a,
#gk-menu-wrap #main-menu > ul > li.active > a {
   color: #de5643;
}



Am I having two opposing statements? i can't see any...

Any reason my css code for that particular class wouldn't be taken into account?


My brain is melting.


Thanks

Hi,

Could you provide an URL to your website? Here or via PM, then I'll be able to check this issue exactly.

Try with this code:

Code: Select all

.imageBg #gk-header-mod .gk-video-link:hover {
color: #000!important;
}


Still no luck... It is bizarre! :/

Annnnnnd, my bad, it works now!

Thanks a mil Piotr!

Keep up the good work!


Theo