Changing Links and Button Colors

My question about the Simplicity theme is how can I change the CSS for the color of the links (along with the active link and hover css). I also want to change the colors of the buttons (can this be set by shortcodes, I don't see any options for using custom colors?). I want to change the Yellow button on the bottom of the Simplicity Frontpage and the color it changes too when the user hovers over it.

Thanks,
Kyle

Hello,

In the Simplicity theme, there are 3 predefined color styles, if you want to change colors to your own, you'll have to override CSS, I'll help you with that, but will be easier for me when I'll see your website.

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar)

Thanks Piotr, the website is http://www.unifiedstream.com.

Add the following code into the theme’s css/override.css file (make sure to enable the “Use the override.css file” option in Template options > Advanced in the WordPress backend)

Yellow button at the bottom:

Code: Select all

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

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


You want to change color of the link in the menu? in the content? Generally, please open e.g. Simplicity/css/style1.css file and check color values there. You can copy these css (change only color or background values) into mentioned override.css file and that's all.

Thank you,

I would also like to change the opt-in button in the header so it doesn't turn yellow when you mouse over. I'd like to use another color for that and also change the top navigation menu links from yellow to something else.

Cheers,
Kyle

Use this code for the button on hover:

Code: Select all

.imageBg #gk-header-mod input[type="submit"]:active,
.imageBg #gk-header-mod input[type="submit"]:focus,
.imageBg #gk-header-mod input[type="submit"]:hover {
   background: #fec54c;
}


and this for the top menu color:

Code: Select all

#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: #fec54c;
}