How do I change the color?

Hi there – I’ll answer your questions separately.

I am using the illustratr theme and I would like to change the color of the menu. The active page in the menu now changes from black to orange.

The current menu item has the class current-menu-item. The current CSS for it is quite specific, so you’ll need to override it with this:

.main-navigation ul .current_page_item > a, .main-navigation ul .current-menu-item > a {
    color: #bb00bb;
}

Change the colour code to anything you like.

Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

I would also like to change the color of the layer that appears when you roll-over the images that are on you home page (the portfolio images). This layer is also orange now.

As I did with the previous style, I found the CSS to target using a browser inspector. This should do it:

.portfolio-thumbnail a:before {
    background: none repeat scroll 0 0 padding-box content-box #bb00bb;
}

Browser inspectors – like Firebug, or the inspectors built into Chrome and Firefox – are incredibly handy for figuring out which elements to target. Here are some resources on how to use them that you might find helpful for making other CSS tweaks:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

Thank you! It works perfecty.

Great, glad to hear it!

I`m also using the same theme, but I dont like that the main text is in grey color, it is possible to change it to black, because it is hard to read the text?

You can use a browser inspector like the ones built into Chrome or Firefox to right-click and see which elements you can to target with CSS. This custom CSS should change both post and page content to black, for example:

.page-content, .entry-content {
     color: #000000;
}

Have a look at the resources above to learn more about customizing your site with CSS, and be sure to use either a child theme or custom CSS plugin, as I mentioned above as well.

If you have any other questions, please start a new thread – this one is old and already marked as resolved. Thanks!

Nice. Now all I am missing is the code to change ‘hover’ of the links in menu and links on pages. With both the CSS tweaks above the text turns to the default red and not the green I decided on for selected items and mouse over thumbnails.

dissinglink – this old thread is already marked as resolved. Please start a new thread as I advised above and provide a link to your site. Thanks!