Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Styling the sidebar/center column area with different backgrounds on each page


  #1  
Old Oct 2, 2012, 11:10 AM
capelady
 
48 posts · Mar 2010
I am trying to put different background images on each page. Basically, it's the "container" area, encompassing the header, page menu, and sidebars/center column, but NOT the footer area.

So, I broke the background images into 3 parts - header, page menu, and sidebar/center area.

After much playing with the styling, I got it to work! In Firefox. See http://youcangrowthat.com.s52126.gridserver.com/

Then I looked at Safari and IE. Oops. Header and Page Menu look the same as Firefox, but not the sidebar/center area.

Now, the styling for the header and page menus is styling a div, and the styling for the sidebar/center column is styling a table row, and I suspect that is the difference.

/* -------------------------------------------------------*/
/* background image for page menus for garden centers */
/* -------------------------------------------------------*/
body.page-id-14 div#page-menu-div {
width: 990px;
height: 24px;
background:
url('http://youcangrowthat.com.s52126.gridserver.com/wp-content/uploads/bg_garden_centermenu.jpg')
top center no-repeat;
}
/*----------------*/
/* garden centers */
/*----------------*/

body.page-id-14 tr#bodyrow {
width: 990px;
height: 1086px;
background:
url('http://youcangrowthat.com.s52126.gridserver.com/wp-content/uploads/bg_garden_centerbottom.jpg')
top center no-repeat;
}

If the problem is the difference between styling a div and styling a table element, is there somewhere in the styling I can put a div that will hold both the sidebars and the center column?


Thanks!
  #2  
Old Oct 2, 2012, 11:17 AM
capelady
 
48 posts · Mar 2010
Alternatively, can I add something to the styling of the table row to make it display correctly?

Is there a firebug equivalent for Safari and/or IE?
  #3  
Old Oct 2, 2012, 11:23 AM
capelady
 
48 posts · Mar 2010
And yes, I tried styling the "container" div instead, with a single image, but that a) includes the footer area and b) created its own problem - the image was cut off at the bottom just below where the page text in the center column ends. If however, that is the better solution, and I can work out any issues with that, like putting a different image in the "container" on each page, I'll do it. Not knowing what issues will come up with that (Can the height of the "container" be specified, can I specify a different background image for each page?), I thought I'd try to continue on the current track, but if you have a better suggestion, I'm willing to try it!
  #4  
Old Oct 5, 2012, 06:27 AM
capelady
 
48 posts · Mar 2010
Well, I ended up styling the "container" div instead with the full image. It's not exactly as I want it, but it will do for now. And it works in Firefox, Safari and IE.

Bookmarks

Tags
background, center, container, sidebar, style

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Adding widget area to home/center column, but not post/page JennyD Center area post/pages 2 Feb 17, 2012 11:35 AM
[SOLVED] Not getting any styling or center column with 3.6.4 moomum New Versions, & Updating 6 May 10, 2011 02:52 PM
center area styling deltatango Atahualpa 3 Wordpress theme 5 Jun 7, 2009 03:28 AM
Center column styling: how can I remove margin or padding? bcorrigan Header configuration & styling 2 Apr 2, 2009 09:53 AM


All times are GMT -6. The time now is 06:35 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.