Is there an Easy way to change colors?


I have a template that I successfully converted from static html to a working concrete5 site (woohoo!).

The template comes with 10 basic colors for the site, and right now it's set to "red". I have a color.css file that pulls the appropriate color from the directory and applies to site, i.e.

/*@import url('default/default.css');*/
/*@import url('brown/brown.css');*/
/*@import url('black/black.css');*/
/*@import url('blue/blue.css');*/
/*@import url('darkgreen/darkgreen.css');*/
/*@import url('green/green.css');*/
/*@import url('orange/orange.css');*/
/*@import url('pink/pink.css');*/
/*@import url('purple/purple.css');*/
@import url('red/red.css');

So I have to manually go to the "color.css" and uncomment the color of choice, then re-upload to FTP, unless I edit it right on the server itself.

Was wondering if anyone out there know how I could make this simple and painless using concrete5.

Thanks for reading my post.

View Replies:
citytech2 replied on at Permalink Reply
I don't know what kind of style is written there in your css file. But if you want to make it simple, you can go to the Dashboards themes & choose your themes "customize" button. Then edit your themes color settings.
Note: If there are already colors defined in your css, the above process won't work. You should comment the css which defines the color.

grfirst replied on at Permalink Reply
I tried that and I get this msg: "This theme contains no styles that can be customized."

As far as the css goes, it's being called within the header element:

<link href="/themes/advanced-html/styles/main.css" rel="stylesheet" type="text/css" />
<link href="/themes/advanced-html/styles/inner.css" rel="stylesheet" type="text/css" />
<link href="/themes/advanced-html/styles/color.css" rel="stylesheet" type="text/css" />

The color.css file contains the links to the different directories that contain all the images and other stuff associated with each particular color.

So I'm thinking there may be some sort of addon, block, or code I could use within the dashboard, or even the site itself to alter the choices between the colors.
adajad replied on at Permalink Reply
To be able to have the simple "Customize Theme" option for your theme, you will need to add some extra c5 specific comments to your stylesheet.

You can find all information here:

Edit: Ok, that was a premature post (since I didn't read your question in full).

I would go for a page attribute to set the colors, or create several different themes and use the "Theme Switcher" from the marketplace:
grfirst replied on at Permalink Reply
Thanks for this info "You can find all information here: as it will be very helpful when creating future templates.

As far as creating addtl themes, there are 10 dif color directories, and creating 10 dif themes, with 10 sets of page types seems kind of overwhelming and more room for error.

Checking out the marketplace for that item you suggested.
JohntheFish replied on at Permalink Reply
If you want to add page styles and override style sheet styles from within a block, Style Quickie enables that and much more:

However, it is overkill if all you want to do is change a colour and you would still need to write css rules rather than just pick a colour off a widget. Style Quickie is not a beginner level tool.
grfirst replied on at Permalink Reply
Just read the documentation, and you're correct that this isn't for beginners.

Now I'm wondering if this newly created block will have a global effect (which is what I want).

This may be the tool I need if I could figure out how to get it to select the dif values from my color.css on the fly.
JohntheFish replied on at Permalink Reply
With Style Quickie it depends on where you add the block. Add it to a Global Area (eg header) and it will apply the css rules in the block to the whole site.
grfirst replied on at Permalink Reply
Thanks for confirming, as I was hoping that is the case.

Well that's 1 issue down and 1 to go :).