Public Ticket #28525

Location of CSS colour codes

  • Ruben Bristian
    You're welcome..

    7:04pm on January 28, 2013

  • Colin O'Halloran
    Thanks Ruben

    7:04pm on January 25, 2013

  • Ruben Bristian

    This ticket will learn you how to customize several aspects of a theme yourself, giving you the knowledge to do a lot of CSS tweaking.

    All that's here refers only to style issues (hiding certain elements, changing colors, playing with size, etc..). For in-depth customizations you'll need to know HTML/PHP/JS.

    So, the place for custom CSS code is in the Theme Options > Custom CSS. There you need to add all of your custom code (or within a child theme). Don't ever modify the theme's stylesheet!

    So the basics ... You need a browser with an element inspector(most of them have).. For example, in Chrome or Firefox, if you hit F12 the inspector will come up, and there is a "magnifying glass icon" on which you click and will allow you to select different parts of the website. Just select whatever you wanna change and see where are those styles located..

    Once you figure out how an item is called (it's identifier - either a class or an id), you can use the element inspector to test out various custom CSS codes, then you simply have to copy the modified CSS code into the Theme Options. And after saving and refreshing (and maybe clearing your cache) you will see the new options.

    Here's a video on how to inspect elements: https://www.youtube.com/watch?v=Z4-atsnk69w

    Here's a link for some CSS basics: http://www.cssbasics.com/

    Learning how to leverage the element inspector and some basic CSS functions, you'll be able to easily edit various aspects of the theme and not only!

    Ultimately, if you do not manage to learn the basics but still want to customize the theme, you should hire someone for the custom job.


    7:05pm on January 25, 2013

  • Colin O'Halloran
    Hi ruben. Ive followed other tickets opened by other people but I cant change all the colours on my site. I have edited and replaced the sprite file but there are still some sections that are the original orange. Here is the link for my site http://supercalimedia.com/ You can see that there are buttons that are still orange on the side bar and in blog posts. If i need to change the colour hex codes in the css can you tell me where to find them as I cant read the code properly. I've already tried to scroll through it and change every hex code i found but that didn't work Thank you in advance.

    7:05pm on January 24, 2013