Change Theme Color

Hey there LF96,

How are you doing today?

I’ve checked the theme to see if there are any color options and aside from the background color available in Appearance -> Customize -> Colors I couldn’t find any so I’m assuming you’ll have to do this with some custom CSS.

Would you mind posting link to your site and let me know which parts you’d like to replace so I can help 🙂

Cheers,
Bojan

Hey Lukas,

Thanks for the link 🙂

To change the background color of the read more button please try adding the following to Appearance -> Theme Options -> Design Options -> Custom CSS:

a.readmore {
    background-color: #63C6AE;
}

Replace the color hex value to display different color. You can use sites similar to this one to get hex value for the color of your choice: http://www.color-hex.com/.

To change menu link hover and current menu link color please try adding the following:

#access a:hover, #access ul li.current-menu-item a, #access ul li.current_page_ancestor a, #access ul li.current-menu-ancestor a, #access ul li.current_page_item a, #access ul li:hover > a {
    color: #63C6AE;
}

Also replace the color hex value, same applies for the following code as well.

And for page header color please add the following:

.page-title-wrap {
    background-color: #63C6AE;
}

Hope this helps 🙂

Cheers,
Bojan

Hey Paul,

If you could post link to your site and let me know what colors you’d want to change I’d be more then happy to take a look 🙂

Cheers,
Bojan

The ability to change link hover colors would be great as well.

Thanks, the “slogan-wrap” color change worked well.

However, I was looking to change the actual icons in the info bar and not the background color. Would I have to replace the icon files?

Hey VidVerve,

Icons being used there are added in the after element for each of those 3 info li-s, you can find other available icons here http://genericons.com/. You can simply replace code in the content to show different icon http://screencast.com/t/gLliiil1l.

In case you want to show custom images there it can also be done with CSS by adding the following:

.info-bar .info ul li.phone-number:before {
    content: "";
    background-image: url(Insert_Image_URL);
    background-size: contain;
}

.info-bar .info ul li.email:before {
    content: "";
    background-image: url(Insert_Image_URL);
    background-size: contain;
}

.info-bar .info ul li.address:before {
    content: "";
    background-image: url(Insert_Image_URL);
    background-size: contain;
}

Replace dummy URLs with the actual URLs to your images.

As for changing links in the testimonial section the only link I can see there is this one http://screencast.com/t/jRBC9sak8cjv, you can change it’s color by adding the following:

.widget_testimonial .testimonial-meta a {
    color: #63c6ae;
}

Replace the color hex value to display another color.

If you have additional questions unrelated to what you asked above please open a new thread in the forum.

Hope this helps 🙂

Cheers,
Bojan