Forum has moved to another host, some things may be broken or shaky for a little while
Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Image as vertical divider sidebar/main content


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Dec 15, 2010, 11:17 AM
Maartje
 
13 posts · Oct 2010
I'd like to put an image as divider between the main content and the sidebar, and I want it to be fluid with the site length.

I tried playing around with border-image in the css, but that doesn't seem to work. Placing the image as a background-image has the disadvantage that it doesn't scale with the site-height. And of course I only want it to scale in height, not in width. I tried floating the image and a div with the image in it (above the loop) but I couldn't get that to work.

Do you have any ideas about how to get this done? I'm OK with splitting the image into a top, middle (for extension) and bottom, but I need some help with where to put either the whole image or the parts.

The effect I'm after is like the vertical divider at http://www.pragmatichybrid.com, but they have it as part of the site background and I don't think I can pull that trick because I already have 2 images as site background, 1 in the body tag and one in the html tag.

My site is http://playyourwordsright.com

Thanks!
  #2  
Old Dec 15, 2010, 02:40 PM
Maartje
 
13 posts · Oct 2010
'fraid not.

That bgfade.gif is just the top 23 pixels of the divider. The rest of the divider is created in the background of the site, it's one picture with the drop shadows that surround the page. Switching off the bgfade.gif in Firebug only takes away the 'fade-out' effect at the very top, leaving the rest of the divider in place.

Nasty little trick, that.
  #3  
Old Dec 15, 2010, 03:01 PM
Maartje
 
13 posts · Oct 2010
Oh yeah, you're completely right. I was confused about the image names. They have one in the background, and a separate pic for the fade at the top and bottom. (He calls everything 'fade.' Confusing.)

Maybe I can try putting it on the #container. I was experimenting with the body and html tags and that didn't work. I'll try that.

They have put the lower fadeout image in the footer, though. My footer is not connected to the central column like theirs is, though. Any idea how I can get both the top and bottom fade pictures to display correctly?
  #4  
Old Dec 15, 2010, 03:17 PM
Maartje
 
13 posts · Oct 2010
Thanks, going to experiment with that as soon as the sun comes up again.
  #5  
Old Dec 16, 2010, 03:47 AM
juggledad's Avatar
juggledad
 
22,151 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you could always just set the left margin of the right sidebar to the background color. It might not be perfect, but real simple. ATO->Style & configure SIDEBARS->RIGHT sidebar style CHANGE THE LINE
HTML Code:
border-left: solid 0px white;
to
HTML Code:
border-left: solid 2px rrggbb;
where rrggbb = your background color
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #6  
Old Dec 16, 2010, 05:00 AM
Maartje
 
13 posts · Oct 2010
That would have been my backup plan, but I got it to work!

:D

STB pointed me in the right direction, and I even got both the bottom and top fade-out in the same sidebar.

[Edit: Oh well, I got it to work in Firefox and Chrome. No IE so far. Ugh. Do you know if IE just doesn't like multiple backgrounds?]
  #7  
Old Dec 16, 2010, 06:22 AM
Maartje
 
13 posts · Oct 2010
Well, mission accomplished.

Snuck a div in there to hold the second background, and now it renders in all browsers I could find.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] To much space between Main Content Area and Sidebar/Widget nberryman Atahualpa 3 Wordpress theme 2 Nov 24, 2010 02:10 PM
Making the sidebar narrower, and the main content area wider. ronnielees Sidebars & Widgets 1 Oct 11, 2010 04:53 PM
Content not showing on main page freedomrains Center area post/pages 11 Apr 27, 2010 05:03 AM
Can I overlap the header on my main content area? Masselyn Header configuration & styling 1 Feb 2, 2010 04:41 AM
Style issues with sidebar and main content area jenchilada Post-Kicker, -Byline & -Footer 1 Nov 30, 2009 07:24 PM


All times are GMT -6. The time now is 03:25 AM.


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