Color changing CSS

57 Posts

GregR Reply #1, 14 years, 9 months ago

Hello All,

I have a CSS file with links to 10 different color.css files, each representing a different color. I've created a resource in MODx Rev, with this particular CSS file containing the links as follows:

/* Advanced - CSS File 

USE THIS STYLE SHEET 

FOR COLOR STYLE */ 

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




As you may notice, to change the color of my template, I have to remove the "/*" from whatever color I want to use.



My question, is there a way to make this process easier where I can perhaps create a resource, with radio buttons or something?



Appreciate any and all feedback, please.

This question has been answered by ironchip. See the first response.

1,572 Posts

Paulp Reply #2, 14 years, 9 months ago

you can create a TV, for example call it css, select "checkbox" and put the input values to

default==[[$default]]||brown==[[$brown]]

Then continue that for every css file you have and assign it to every template you have.

Then create a chunk for each, so for example the chunk for default would be called default and contain:

default/default.css

Then in your head call the following:

@import url('assets/templates/advanced/styles/[[*css]]');

When you then create a resource/page just tick the css file to use, that should work but I'm going from memory.

☆ A M B ☆
756 Posts

CharlesMx Reply #3, 14 years, 9 months ago

You could create a template varible (TV) Listbox (single select) that holds the value of the style sheet options in the Input Option Values (of course complete your list)

Brown==brown/brown.css||Black==black/black.css||Blue==blue/blue.css

then in the default value put

default/default.css

Then in your template add the CSS link with the corresponding TV.

<link href="assets/template/advanced/styles/[[*cssSelector]]" rel="stylesheet" type="text/css" />

Assuming you named your TV "cssSelector".

Make sure that you give all templates access that need to use this TV by selecting them in the TV "Template Access" tab.

Cheers

Evo Revo // Ubuntu, CentOS, Win // Apache 2x, Lighttp (Lighty)
Visit CharlesMx.com for latest news and status updates.

1,572 Posts

Paulp Reply #4, 14 years, 9 months ago

LOL Theres 2 choices

☆ A M B ☆
756 Posts

CharlesMx Reply #5, 14 years, 9 months ago

hey, you almost took my thoughts

Evo Revo // Ubuntu, CentOS, Win // Apache 2x, Lighttp (Lighty)
Visit CharlesMx.com for latest news and status updates.

57 Posts

GregR Reply #6, 14 years, 9 months ago

Thanks Paulp, I will try that now.

24,544 Posts

BobRay Reply #7, 14 years, 9 months ago

IIRC, in my book I list about 9 different ways to do this (not counting the JS solutions). wink

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

57 Posts

GregR Reply #8, 14 years, 9 months ago

Really Bob?

Guess I haven't gotten that far in the book yet

. Gotta keep reading.

57 Posts

GregR Reply #9, 14 years, 9 months ago

Quote from: charless at Jan 05, 2012, 04:46 PM

You could create a template varible (TV) Listbox (single select) that holds the value of the style sheet options in the Input Option Values (of course complete your list)
Brown==brown/brown.css||Black==black/black.css||Blue==blue/blue.css
then in the default value put
default/default.css
Then in your template add the CSS link with the corresponding TV.
<link href="assets/template/advanced/styles/[[*cssSelector]]" rel="stylesheet" type="text/css" />
Assuming you named your TV "cssSelector".

Make sure that you give all templates access that need to use this TV by selecting them in the TV "Template Access" tab.

Cheers

57 Posts

GregR Reply #10, 14 years, 9 months ago

Ok guys, I must be doing something wrong here, now I have no colors at all

.

Here's what I did in order listed:

1.  created a TV named:  cssSelector
2.  in the Input Option Value of that TV I put:  Brown==brown/brown.css||Black==black/black.css||Blue==blue/blue.css||Darkgreen==darkgreen/darkgreen.css||Green==green/green.css||Orange==orange/orange.css||Pink==pink/pink.css||Purple==purple/purple.css||Red==red/red.css
3.  in the Default Value of that TV I put:  default/default.css
4.  assigned the TV to all templates (only have 2)
5.  in my header chunk (which is where I reference all of my css and js files): 
<link href="assets/template/advanced/styles/[[*cssSelector]]" rel="stylesheet" type="text/css" />
Now when I go to the old resource I created called Color, the TV is there with the options to select different colors from dropdown list, but selecting them does nothing.

Can someone help pinpoint what I'm doing or not doing correctly, please?

[ed. note: ironchip last edited this post 14 years, 9 months ago.]

Answered Color changing CSS