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 » Sidebars & Widgets »

[SOLVED] Adding div to sidebar


  #1  
Old Jan 11, 2014, 05:57 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
I have an interesting design problem that requires adding another div tag to the sidebar. That div tag needs to contain all the widgets that the user adds to the site.

There may be another way to pull this off, but the only way I can figure this out is by adding a div tag (which I'm not sure how to). Here is a screenshot of the sidebar as designed in Photoshop:

The first rounded border can be applied as a background image, but the inner rounded stuff would require a separate div.

Any ideas on how to do this?
  #2  
Old Jan 11, 2014, 07:46 PM
juggledad's Avatar
juggledad
 
23,628 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you could add the <div> in the code - you'll have to edit header.php for the left sidebar(s) and footer.php for teh right sidebar(s)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 12, 2014 at 07:16 AM.
  #3  
Old Jan 12, 2014, 06:51 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
How about styling #left with the overall background color for the sidebar and then style .widget etc for the desired look?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #4  
Old Jan 12, 2014, 01:23 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
Quote:
Originally Posted by lmilesw
How about styling #left with the overall background color for the sidebar and then style .widget etc for the desired look?
I must admit I prefer this method better because it allows updating the theme without causing any problems.

The issue with it the rounded edges. By styling #left with a repeat pattern that contains the gray edge as well as the mustard one, I can't have rounded corners. If I did them with widgets, then a rounded corner would repeat with each widget added (in the screenshot the design calls for a solid color in between widgets)

If I create rounded corners in a separate divs placed above and below, then I can't have the pages without the sidebar cause you would see the top of the mustard area with the middle missing.

I can create the gray rounded corners in such divs cause they would be present on every page, but then the mustard area would have the square corners due to the repeating pattern.

Stuck between a rock and the hard spot, eh?

Last edited by flyboy; Jan 12, 2014 at 01:27 PM.
  #5  
Old Jan 12, 2014, 06:02 PM
juggledad's Avatar
juggledad
 
23,628 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
one other (slightly messier idea)
1) style the td#left with your grey curves
2) install the 'exec-php' plugin
3) add a text widget to the left sidebar called 'left inside'
4) add a new widget area to that text widget called 'my left sidebar'
5) put all widgets you would normally put in the left sidebar into this new widget area

now you can style the 'left inside' widget with the mustard
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Jan 13, 2014, 02:30 AM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
Thank you JD, I'll try that
  #7  
Old Jan 16, 2014, 06:33 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
Well, whaddaya know, in a stroke of genius I figured out a way to do it with nothing but CSS and png files =)



1. First I made a 6000 px tall top left rounded corner png file (in under 1200 bytes) and applied it to the sidebar left side.

2. Then I rounded the right top and bottom corners using CSS and added hex color fill for the rest.

3. Finally, the bottom left corner was rounded using a png image placed in a footer (pushed it outside of the footer using CSS - It loads on pages without a sidebar, but since it's white on white it's not visible)

4. Outer rounded corner was set as a background of %bar2

That left me with opportunity to style widgets independently.

Damn, I love a good CSS puzzle!

Bookmarks

Tags
div, sidebar background

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Adding sidebar under main content! misterfriend Sidebars & Widgets 3 Jun 16, 2012 04:49 PM
Adding a Rapid Cart to sidebar starlitegirl Sidebars & Widgets 1 Oct 5, 2010 04:11 PM
[SOLVED] I need help adding a sidebar to just one page sketchklubb Sidebars & Widgets 3 Jan 4, 2010 02:52 AM
Adding sidebar links outside of the blogroll (with formatting matching the sidebar) Flur Sidebars & Widgets 8 Jul 21, 2009 10:50 AM
Adding sidebar pamlicoink Sidebars & Widgets 1 Jul 16, 2009 01:16 PM


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


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