Page 1 of 1
[Solved] Different CSS for page
Posted: Thu Apr 12, 2012 2:39 pm
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.
Re: Different CSS for page
Posted: Thu Apr 12, 2012 3:09 pm
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)....
Re: Different CSS for page
Posted: Thu Apr 12, 2012 3:10 pm
by mcDavid
use the <style> element in your template's head to put that css rule in
Re: Different CSS for page
Posted: Thu Apr 12, 2012 3:49 pm
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
. 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}
Re: Different CSS for page
Posted: Thu Apr 12, 2012 4:31 pm
by Jo Morg
mcDavid wrote:use the <style> element in your template's head to put that css rule in
lol... Simplest possible solution...
Re: Different CSS for page
Posted: Thu Apr 12, 2012 4:36 pm
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
. 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>
Re: [Solved] Different CSS for page
Posted: Thu Apr 12, 2012 7:22 pm
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...
Re: [Solved] Different CSS for page
Posted: Fri Apr 13, 2012 12:23 pm
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.