[Solved] Different CSS for page

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
chillifish
Forum Members
Forum Members
Posts: 92
Joined: Wed Jul 27, 2011 9:26 am

[Solved] Different CSS for page

Post by chillifish »

My client has requested a different background image for each page. I currently have the css to link to an image with:

Code: Select all

#wrapper {
    background: #ffffff url('[[root_url]]/uploads/images/dorset-porkers/bg-[[$page_alias]].jpg') no-repeat;
    margin: 0 auto;
    width: 900px;
    min-height: 695px;
}
Unfortunately, due to the caching of the css, the image remains the same when a new page is viewed. Is there anyway of forcing the css to regenerate for each page, ie disable caching?

Alternatively, is there a way to specify a different css for each page. At the moment, the only way around it I can see is to have a different template for each page, but this seems cumbersome.
Last edited by chillifish on Thu Apr 12, 2012 4:11 pm, edited 1 time in total.
Top
User avatar
Jo Morg
Dev Team Member
Dev Team Member
Posts: 1968
Joined: Mon Jan 29, 2007 4:47 pm

Re: Different CSS for page

Post by Jo Morg »

Not sure if it will work, but you may have different wrapper classes on the same css, and just change the wrapper div class with some smarty logic (some variable that can be set on page creation)....
"There are 10 types of people in this world, those who understand binary... and those who don't."
* by the way: English is NOT my native language (sorry for any mistakes...).
Code of Condut | CMSMS Docs | Help Support CMSMS
My developer Page on the Forge
GeekMoot 2015 in Ghent, Belgium: I was there!
GeekMoot 2016 in Leicester, UK: I was there!
DevMoot 2023 in Cynwyd, Wales: I was there!
Top
mcDavid
Power Poster
Power Poster
Posts: 377
Joined: Tue Mar 31, 2009 8:45 pm

Re: Different CSS for page

Post by mcDavid »

use the <style> element in your template's head to put that css rule in ;)
Top
chillifish
Forum Members
Forum Members
Posts: 92
Joined: Wed Jul 27, 2011 9:26 am

Re: Different CSS for page

Post by chillifish »

mcDavid wrote:use the <style> element in your template's head to put that css rule in ;)
Fantastic, thanks. Didn't think of that as I never use style sheets in the head.

To anyone coming up against the problem in the future, don't forget to include

Code: Select all

{literal}{/literal}
. My solution below:

Code: Select all

{literal}<style type="text/css">#wrapper { background: #ffffff url('{/literal}{root_url}{literal}/uploads/images/dorset-porkers/bg-{/literal}{$page_alias}{literal}.jpg') no-repeat; }</style>{/literal}
Top
User avatar
Jo Morg
Dev Team Member
Dev Team Member
Posts: 1968
Joined: Mon Jan 29, 2007 4:47 pm

Re: Different CSS for page

Post by Jo Morg »

mcDavid wrote:use the <style> element in your template's head to put that css rule in ;)
lol... Simplest possible solution... :D
"There are 10 types of people in this world, those who understand binary... and those who don't."
* by the way: English is NOT my native language (sorry for any mistakes...).
Code of Condut | CMSMS Docs | Help Support CMSMS
My developer Page on the Forge
GeekMoot 2015 in Ghent, Belgium: I was there!
GeekMoot 2016 in Leicester, UK: I was there!
DevMoot 2023 in Cynwyd, Wales: I was there!
Top
mcDavid
Power Poster
Power Poster
Posts: 377
Joined: Tue Mar 31, 2009 8:45 pm

Re: Different CSS for page

Post by mcDavid »

chillifish wrote:
mcDavid wrote:use the <style> element in your template's head to put that css rule in ;)
Fantastic, thanks. Didn't think of that as I never use style sheets in the head.

To anyone coming up against the problem in the future, don't forget to include

Code: Select all

{literal}{/literal}
. My solution below:

Code: Select all

{literal}<style type="text/css">#wrapper { background: #ffffff url('{/literal}{root_url}{literal}/uploads/images/dorset-porkers/bg-{/literal}{$page_alias}{literal}.jpg') no-repeat; }</style>{/literal}
I think using {ldelim} and {rdelim} would be easyer in this case:

Code: Select all

<style type="text/css">
#wrapper {ldelim} background: #ffffff url('{root_url}/uploads/images/dorset-porkers/bg-{$page_alias}.jpg') no-repeat; {rdelim}
</style>
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: [Solved] Different CSS for page

Post by Dr.CSS »

Have you tried...

<div id='wrapper' style='background: #FFF url(uploads/images/dorset-porkers/bg-{$page_alias}.jpg') no-repeat;);'>

No need for the {root_url} stuff as you should have the <base href= > in the <head> even if you still use your method...
Top
chillifish
Forum Members
Forum Members
Posts: 92
Joined: Wed Jul 27, 2011 9:26 am

Re: [Solved] Different CSS for page

Post by chillifish »

Thanks for the suggestions. Didn't know about {ldelim} and {rdelim} as I know very little about Smarty.

I've kept it as it is as it works, but the two suggestions above would certainly be neater.
Top
Post Reply

Return to “Layout and Design (CSS & HTML)”