Jump to content
aerta

different background image for each page's content area

Recommended Posts

aerta

I'm trying to transfer this site into a WP site using Pagelines: http://clarecolvin.com/index.html you'll see how I have a non-repeating background image rooted at the bottom of the main white content area. Now, I know how to do this on on a Pagelines site for all the pages, as you've kindly instructed me before, but look at this page: http://clarecolvin.com/short.html you'll see that I have a DIFFERENT non-repeating background image rooted to the bottom of this page. Is there a way that I can do this in Pagelines, i.e. have a DIFFERENT background image in the content area for different pages? Perhaps using CSS and templates? Thanks, John

Share this post


Link to post
Share on other sites
batman

Hi John For example You can add to CSS rules the following code and simply change the page id to match the page in which you wish to have this color. The simply copy the code and again change the id to represent the id of a different page.

.page-id-42 #content .content { background: red; }
If you can change the color for a background image you can use
.page-id-42  #content .content { background: url("../images/contact.jpg" ) no-repeat scroll; }


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
aerta

Thanks, Batman - I'll give that a go. Keep fighting crime so that the citizens of Gotham can go about their daily business free from from evil-doers!

Share this post


Link to post
Share on other sites
Rob

I'm sure Batman will appreciate the comment!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
batman

Of course I appreciate all comment. The complex topics are very simple to overcome, now I keep fighting with the CSS rules to keep learning. ;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob

@aerta, please let us know if Batman's solution worked. If so, kindly Accept his reply.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
aerta

I will, of course, leave feedback when I've had a chance to test Batman's solution.

Share this post


Link to post
Share on other sites
aerta

No - I can't get this to work, alas. I can get the same background image for the content area on all pages by using this custom code: #content .content-pad { background: url(" contact.jpg") bottom center no-repeat;} But when I try to customise the custom area background image for individual pages by adding: .page-id-64 #content .content { background: url (" writing-perspective.jpg") bottom center no-repeat;} } This over-writes the first bit of code, the background disappears altogether and I get INVALID ARGUMENT error messages. Also: impossible to add .page-id- custom code for home page as it doesn't seem to have a page-id. Any ideas Batman?

Share this post


Link to post
Share on other sites
catrina

Try this:

body.page-id-64 #content .content { background: url ("http://clarecolvin.com/wp-content/uploads/2012/08/writing-perspective.jpg" bottom center no-repeat;}

Also, the page id for the home page is always just home (i.e. body.home).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
aerta

Thanks, Catrina - still can't make it work I'm afraid. I have this custom code for two different pages: body.home #content .content { background: url (" contact.jpg"; bottom center no-repeat;} body.page-id-64 #content .content { background: url (" writing-perspective.jpg"; bottom center no-repeat;} but age-id-64 still shows the background from the home page

Share this post


Link to post
Share on other sites
aerta

...plus I'm getting a LESS parse error...

Share this post


Link to post
Share on other sites
aerta

PageLines Custom LESS/CSS error. parse error: failed at `background: url (" contact.jpg"; bottom center no-repeat;} ` line: 845

Share this post


Link to post
Share on other sites
catrina

There is an error in the code that I did not see before. Sorry. Please try:

body.page-id-64 #content .content { background: url ("http://clarecolvin.com/wp-content/uploads/2012/08/writing-perspective.jpg" bottom center no-repeat;}

There was a stray semicolon in there that's added automatically by this text box. Remove the semicolon immediately after the image URL.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
batman

Hi aerta, I??m not sure but you can try

body.page-id-64 #content .content { background: url ("http://clarecolvin.com/wp-content/uploads/2012/08/writing-perspective.jpg" ) bottom center no-repeat;}
WIthout ";" after .jpg I edit this and it put ";" alone automatically all the time, the same like Catrina in the comment. It's very strange so you try with
body.page-id-64 #content .content { background: url ("http:your image" ) bottom center no-repeat;}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
catrina

Yes, I don't know why this forum's text box automatically adds semicolons in places where they don't belong. :


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
aerta

I'm sorry I'm confused here. Which quote marks and semi-colons should I miss out?

Share this post


Link to post
Share on other sites
batman
:) you use this format
body.page-id-64 #content .content { background: url ("http://your image" ) bottom center no-repeat;}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
ducduc8888

Could someone please tell me where I need to put these CSS rules?

Share this post


Link to post
Share on other sites
batman

ducduc8888

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

It is advisable to learn how to do this on your own too.

Check out http://www.pagelines...wiki/Custom_CSS

The next time try open your own topic please.


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×