Change page background for individual pages

[simon.romin]

Hi guys,

This is what I want to achieve:

Each individual page will have its own unique background image. For example, the 'Jewelry Sales' page will have a different background image from 'Jewelry Repairs'.

I would like to be able to select a background image from the Content Page editor.

The closest smarty tag I can find is

Code: Select all

{content_image}

but I do not know how to change an individual page background with this tag.

Hope someone can help me. Let me know if you need anything else clearing up!

Cheers,

Simon

[Nullig]

Just name your images after the page aliases, then use:



in your template.

Nullig

[handcoded]

Hi

I would never have thought of that. What a simple way of accomplishing such a cool effect.
I'll definitely be using this in the future. Would be great if useful code snippets like this were posted somewhere.

Thanks

[simon.romin]

Just name your images after the page aliases, then use:



in your template.

Nullig

Thanks for the fast reply Nullig, this makes sense to me.

But how about this...

What if I want to change the HEADER BACKGROUND image for individual pages?

This my header code at the moment:

Code: Select all

#headerWrapper {
	width: 				100%;
	margin: 				auto;
	height: 				225px;
	background: 			url("uploads/images/headerWrapper_bg_home.jpg") no-repeat center;
}

So how can I change the HEADER BACKGROUND for individual pages?

Thanks!

[Dr.CSS]

Use the {$page_alias} as a class on the header then use CSS to call the image you want...

[simon.romin]

Thanks for your help! I'll give that a try now...

While we're on the topic, please can you point me to a document that explains a bit more about {$page_alias}?

Thank you.

Simon

[Dr.CSS]

CMS Made Simple uses a smarty engine to render the template stuff and part of it is able to retrieve the page alias with that tag, there is no real documentation on it, it just is what it is...

You can look in Extensions » Tags to see other tags that can be used in cmsms...

[simon.romin]

Thanks for the extra information on smartytags.

I have tried using the {$page_alias} tag but it does not seem to work for me.

This is the HTML for my header:

Code: Select all

<div id="headerWrapper" class="background">
	SOME CONTENT HERE
</div>

And this is CSS for my header:

Code: Select all

#headerWrapper {
	width: 				100%;
	margin: 				auto;
	height: 				225px;
}

.background {
	background:			url(uploads/images/{$page_alias}.jpg);
}

Using this code, I have uploaded an image to the Images directory and named it the same as the page alias, but nothing appears.

Is there something I am doing wrong?

Or am I making a little mistake?

Looking forward to any help!

Thanks.

[uniqu3]

You should use it in your template:

Then in stylesheet you can target anything with this id:

body#youralias .somestyle {
background:url('yourbackground.gif') #somecolor repeat;}

[simon.romin]

Hi, thanks for your input uniqu3

So, for my individual header background, do you mean my HTML should look like this:

Code: Select all

<headerWrapper id="{$page_alias}">
	SOME CONTENT HERE
</div>

And my CSS should look like this:

Code: Select all

headerWrapper#uniquepagealias {
	width: 				100%;
	margin: 				auto;
	height: 				225px;
	background: 			url("uploads/images/unique_page_background.jpg") no-repeat center;
}

Or am I still doing it wrong?

Thank you for your patience so far.

Simon

[uniqu3]

You still do it wrong  :) there is no html property
So with my explanation above you can simply use this is assigned only once in whole template and the rest is done in css.

For example your headerWrapper

body#uniquepagealias  #headerWrapper{
width: 100%;
margin: auto;
height: 225px;
background: url("uploads/images/unique_page_background.jpg") no-repeat center;

body#otherpagealias  #headerWrapper{
width: 100%;
margin: auto;
height: 225px;
background: url("uploads/images/otherunique_page_background.jpg") no-repeat center;
}

#headerWrapper{
width: 100%;
margin: auto;
height: 225px;
background: url("uploads/images/anyother_page_background.jpg") no-repeat center;

Means in a page will get some id assigned like your alias, if in css you have styled this body#alias #and_some_other_id this or any element with assigner id will look different then the rest.

You could also take the complicated way and do in template like this

and in stylesheet you do it like:

#headerWrapper {
width: 100%;
margin: auto;
height: 225px;
}

#headerWrapper.uniquepagealias {
background:yourbackground;}

Means you would need to give every html element that you want to style differently {$page_alias} in template and then style it like above.
But this solution is in my opinion harder to maintain and you need to edit your template every time you want to style another element differently.

[simon.romin]

Thanks very much for your help uniqu3.

I will try your method later tonight and let you know the results!

Thanks

Simon

[Nullig]

That way is far too complicated. Use the same method as I showed you for the body tag. Name your images like:

header_page_alias.jpg

and use inline styling:



in your template.

Remove the background image line from your stylesheet entry for the #headerWrapper div.

Nullig

[uniqu3]

@nullig

why would a class in body tag be to complicated.
First there is inline style which is not recommended, you need for each that you want to appear different again inline style and repeat the same thing over and over again.

Your method would only make sense if only the header image should change for example:

Using gives you the power to change anything you want directly in the stylesheet, so if i decide to change the heading 2 color on alias exampleall i have to do is following in stylesheet:

h2 { color:#000;}
body.example h2 {color:#f00;}

[JeremyBASS]

I would have to agree with uniqu3 here.. the smarter way IMHO is mostly as he suggested..

I differ a little as this is what I use pretty regularly..



I like to be able to copy and paste for fast edits.. The $Bn and $Bnvd are browsertools plugin that gives me the power to do small fixes in a valid way in the css without hacks.. that body tag would have out putted..



which is very handy for me. 

Just thought I'd confirm a point of view..  cheers -Jeremy