Jump to content
Sign in to follow this  
ksarul

Different sidebar images on static pages

Recommended Posts

ksarul

My site has 6 static (non-blog) pages, set up from within WordPress. On each of these pages I'd like a different image in the sidebar. Can anyone tell me how to go about this? The site in progress is here: http://www1.certaintycompliance.com.au And you can see sample of how the images appear in the sidebars here: http://www.certaintycompliance.com.au/whatwedo.html Help much appreciated!

Share this post


Link to post
Share on other sites
Rob
Well, each sidebar has it's own unique element identifier, and so too will each widget. You can set up the background for the specific sidebar background by the page using CSS to the id "sb-primary". Then, in your CSS you identify the specific page ID and apply the background singularly to that page.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ksarul
Thankyou. Can I get a little more specific help on the CSS selector? For example, for a page with an ID of 2, what would be the selector of its sidebar? Is it something like: #sub-primary .page-id-2 { background: url('address of image') no-repeat top left; }

Share this post


Link to post
Share on other sites
ksarul
Sorry, I mean #sb-primary .page-id-2 { background: url('address of image') no-repeat top left; }

Share this post


Link to post
Share on other sites
ksarul
Ahh, after much trial and error - the same problem I had when I did this site as straight html/css. The image won't go to the bottom of a sidebar that has no content in it, so I have to set the height of the sidebar to an arbitrary number: .page-id-2 #sidebar1 { height: 650px; background: url('address of image') no-repeat right bottom; } It's a dodgy solution at best. Does [i]anyone[/i] know how to stick a background image to the bottom of a sidebar that has no content in it?

Share this post


Link to post
Share on other sites
Jenny
http://www.w3schools.com/css/css_background.asp You could try a background-repeat or a background-position (depending on the image)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
ksarul
No good. Since there's already an image on the background of the content area (the fade at the top), it has to be the background of the sidebar. However an image won't go at the bottom of a sidebar empty of content, as far as I can find out.

Share this post


Link to post
Share on other sites
catrina
Perhaps you can add content to that sidebar and then just hide it using CSS so that the image can go there (leaving sidebar there and the widgets inside it hiding)?

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
ksarul
Thanks for the help, but I don't seem to be being very clear. I want the image to go at the bottom of the siebar. Adding hidden content will only make the image appear at the bottom of that hidden content - not necessarily at the bottom of the sidebar (if the main content is longer). I suppose it's a possible solution if the amount of content in the main content area doesn't change; though the vertical depth of that area will change in different browsers.

Share this post


Link to post
Share on other sites
kastelic
If it has no content in it then it wont stretch far enough down. The only way is to change the height. A better solution would be to use min-height rather than height so that it can extend further if the content demands it.

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

Sign in to follow this  

×