[SOLVED] CSS Selector and/or Replacement for Pages.

[pgwalsh]

I would like to see the ability to add a stylesheet to a specific page that would be put below all your existing stylesheets or perhaps change the style sheet for that page altogether. Perhaps there's a way to do this, but I cannot seem to find it.

Right now I have 4 templates that are essentially the same, but each one has a unique stylesheet. So if I make a template change, I have to do it to 4 templates. If I want to create a new look for a specific page, I don't want to have to create a new template, I just want to change or add a stylesheet depending on the changes.

For example my sites standard view is green, but each of my products is a unique color and the product page reflects that color. I have a cocktail page that's green, but I want to change it to black to reflect nightlife. In order for me to do this I have to create a new template and then add the stylesheet.

[jmcgin51]

IF the page alias == green
  use the green stylesheet
IF the page alias == blue
  use the blue stylesheet

etc

[pgwalsh]

IF the page alias == green
  use the green stylesheet
IF the page alias == blue
  use the blue stylesheet

etc

Thanks for the thought, but aliases are supposed to be unique and if I want to used the blue stylesheet 2 times and the green one 3 times, I'll run into issues. I also have auto_alias_content set to true.

However would it be possible to use the Extra Page Attributes for this or is this processed after the header? I'm assuming this: $config['process_whole_template'] = false, would need to be true, which would affect performance? 

[Dr.CSS]

I use one template to make all the color changes I want...

 

This give a one line text box to add the color I want with a label of...

Choose a colour (orange, purple, yellow, green, blue) defaults to orange:

Try the top menu items to see changes...

http://www.cornworthy.com/cms/

http://dezertdesign.com/five/

[jmcgin51]

IF the page alias == green
  use the green stylesheet
IF the page alias == blue
  use the blue stylesheet

etc

Thanks for the thought, but aliases are supposed to be unique and if I want to used the blue stylesheet 2 times and the green one 3 times, I'll run into issues. I also have auto_alias_content set to true.

No...

IF the page alias == dark green OR the page alias == light green
  use the green stylesheet
IF the page alias == light blue OR the page alias == dark blue OR the page alias == medium blue
  use the blue stylesheet

[pgwalsh]

IF the page alias == green
  use the green stylesheet
IF the page alias == blue
  use the blue stylesheet

etc

Thanks for the thought, but aliases are supposed to be unique and if I want to used the blue stylesheet 2 times and the green one 3 times, I'll run into issues. I also have auto_alias_content set to true.

No...

IF the page alias == dark green OR the page alias == light green
  use the green stylesheet
IF the page alias == light blue OR the page alias == dark blue OR the page alias == medium blue
  use the blue stylesheet

Okay.. not following to be honest. I let the system name my aliases, but never thought of using them as triggers to name style sheets. I think it might be better for me to just write an addon with a selector like the templates. I'll  probably first do it with UDT or something.

[maranc]

IF the page alias == green
  use the green stylesheet
IF the page alias == blue
  use the blue stylesheet

etc

Thanks for the thought, but aliases are supposed to be unique and if I want to used the blue stylesheet 2 times and the green one 3 times, I'll run into issues. I also have auto_alias_content set to true.

However would it be possible to use the Extra Page Attributes for this or is this processed after the header? I'm assuming this: $config['process_whole_template'] = false, would need to be true, which would affect performance? 

Yeah, you can use extra page atributtes for this. In head section you have to do somthing like this:

{page_attr key='extra1' assign='extra1'}
{if $extra1 == 'css1'} /*css1 is value inserted in page atrib extra1 for each page where you want load example stylesheet*/

{/if}

Marek A

[RonnyK]

If all that is changing is colors, then I would use logic similar to what DrCSS is telling... Use a class to differentiate, and keep all logic/styling in the same template/stylesheets, where the class will be the differentiator of the looks...

Ronny

[pgwalsh]

If all that is changing is colors, then I would use logic similar to what DrCSS is telling... Use a class to differentiate, and keep all logic/styling in the same template/stylesheets, where the class will be the differentiator of the looks...

Ronny

DrCSS is very close to what I want, but obviously I don't want it user definable. maranc suggestion is more inline with the way I'd like to implement it, but I'm thinking a combination of the the two. Have the class selector in the page wrapper, but accessing the extra page attributes for the trigger. Am I over complicating the issue?

I implemented DrCSS script and that's exactly what I needed. I think it was a bit over my head when first looking at it. I didn't realize it was going to add a field to my Content->Page. Thank you all for your help, this is great. 

[pgwalsh]

I haven't done much with smarty stuff, but I'm gathering I use the following to add the class to different elements?

class='{page_attr key="colors"}'

[Dr.CSS]

I add the class to the first outside div then in css, depending what you want to change, note first set is default orange...

#content {
background: url(/cms/uploads/corn/rtorgbtm.png) no-repeat right bottom;
}
#contenttop {
background: url(/cms/uploads/corn/rtorgtop.png) no-repeat right top;
}
#sidebarbtm {
background: url(/cms/uploads/corn/orgbtm.png) no-repeat right bottom;
}
#sidebartop {
background: url(/cms/uploads/corn/orgtop.png) no-repeat right top;
}
.yellow #content {
background: url(/cms/uploads/corn/rtylobtm.png) no-repeat right bottom;
}
.yellow #contenttop {
background: url(/cms/uploads/corn/rtylotop.png) no-repeat right top;
}
.yellow #sidebarbtm {
background: url(/cms/uploads/corn/ylobtm.png) no-repeat right bottom;
}
.yellow #sidebartop {
background: url(/cms/uploads/corn/ylotop.png) no-repeat right top;
}
etc. etc....

This also works with all calls, be they colors, images, h1, h2, menu items etc. I also use it to remove some of the containers which have warnings on them...

         
            {content block='rightside' label='Right Side (content not shown in purple or green)'}
         

#main {
float: left;
margin-left: 16px;
padding: 10px 0px 0px;
width: 368px;
}
.purple #main .green #main {
width: 650px;
margin-left: 40px;
margin-right: 20px;
padding: 30px 0px 0px;
}
.right {
float: right;
width: 261px;
display: inline;
margin-right: 16px;
padding: 10px 0px 0px;
}
.purple .right .green .right {
display: none;
}

[pgwalsh]

Very clever DRCSS.

I had just started editing my main css. However I was doing it slightly differently, but I may run into issues with IE6.

My selectors are:

#header.red
#head_left.red

etc etc

You suggest putting the class before the div and it'll work just as well or better and eliminates the need for class='{page_attr key="colors"}'?

[pgwalsh]

Dr.CSS

Is there a reason why you don't put the class in the body tag?

[Dr.CSS]

I do if I need to change the body background with the rest of it, meh, otherwise I just do first containing div...

[pgwalsh]

I do if I need to change the body background with the rest of it, meh, otherwise I just do first containing div...

Well it's a great solution. Thank very much for all your help, it's going to make things quite a bit easier.