Applying colours through a theme setting or in a CSS file?

Hey, I am looking at developing a starter theme for myself, which I'll use as a basic starting point for a number of websites. At the moment I am just trying to get my head around one of the core concepts of the theme and I just wondered if I could bounce the idea off some other members of the community for any opinions or input.

At a basic level I want to make an admin panel with a set of options, let's take the page background colour, for example. As I see it I have two options:

1. Create a starter css file, which I can then tweak on each individual site to set the desired background colour. This css file could have all the colour rules, allowing me to easily affect all the colours on a per project basis, while all of the main layout css could be inherited by a master css file.

2. Have an admin panel in my theme that allows me to enter a hex value that sets the background colour on the relevant element (like body).

My problem is that using the admin panel option, although preferable from an editors point of view, would likely result in lots of inline styles all over the place. Is there a more graceful solution that would let me set the options in an admin panel in the Wordpress backend, but output one collated CSS file with all those values?

Any advice or general thoughts on the topic would be greatly appreciated.

thanks!

  • Kasia Swiderska

    Hi ks-webdesigner,

    Did you give thought for using WordPress Customizaton panel instead of using additional Admin panel with options for theme?
    There is a great presentation about that here https://www.youtube.com/watch?v=iE2TEh10HlY - I personally use it for developing my themes from moment I've seen that I could use it.
    It is kind powerful and users of theme don't have to learn new options settings for your theme.

    kind regards,
    Kasia

  • Kasia Swiderska

    Hello again ks-webdesigner :slight_smile:

    I realize, that my previous post was missing some informations. So - by proposing Customization panel for your themes I would like to suggest changing the colors in the CSS as it is done in default WordPress themes.

    My problem is that using the admin panel option, although preferable from an editors point of view, would likely result in lots of inline styles all over the place.

    Inline styles yes - but no in that way:
    <span style="color: #00f">My text</span>
    and many, many more inline styles.
    This way, still in <head> section of the site:

    <style id='twentyfifteen-style-inline-css' type='text/css'>
    	/* Color Scheme */
    	span {
    	color: #00f; /* you change that in Customization */
    	}
    /* more selectors */
    </style>

    This can be added after the main styles - and allows for full colour customization.

    I hope this helps.

    Kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.