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] Transparent border around sidebar widgets?


  #1  
Old Jan 27, 2014, 10:21 AM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
I'd like my sidebar widgets to float independently, and not be connected visually to the main content area or header. (See pic below.)

I think I can do this virtually with a wide margin in the center column and a clever background image. But I'm not sure how to do additional transparent buffers in between the widgets.

Any suggestions?

  #2  
Old Jan 27, 2014, 11:10 AM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
I'm experimenting right now. Like I thought, I was able to get space between the center and sidebar with margins and semi-transparent background image.

http://animatusstudio.com/test3/

But I'm not sure how to build in some space between each widget.
  #3  
Old Jan 27, 2014, 11:30 AM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
Also, is there a way to do a transparent border around my page menu items? You can see the thick black border around my menu links, and I'd prefer that to be transparent.
  #4  
Old Jan 27, 2014, 11:43 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
This is where learning to use a tool like Firebug is necessary. As an example to put space between widget areas you would make #right transparent and then style .widget to make the widgets look as you want.

For the menu you will probably have to make the menu transparent and put margins between the menu li items.
__________________
~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.
  #5  
Old Jan 27, 2014, 02:20 PM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
How do I "make the menu transparent"? I know how to change the hex code to any color I like, but what's the code for transparent?

I tried opacity:0.0

Also tried background-color: none

Neither seemed to work on the menu background, one actually made the whole menu disappear.

Last edited by sky captain; Jan 27, 2014 at 02:24 PM.
  #6  
Old Jan 27, 2014, 02:23 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
The code for transparent is transparent. w3schools.com is a good source for CSS code.
__________________
~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.
  #7  
Old Jan 27, 2014, 02:37 PM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
Not being able to style the Widget Content Box is throwing me off. I can give the widget a background color or image, but can't give the contents a margin. The words are right on the edge.
  #8  
Old Jan 27, 2014, 02:41 PM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
Thanks for the "transparent" tip. There's so many variations on CSS, and I'm a copy-paste coder, so didn't know what to do there.
  #9  
Old Jan 27, 2014, 03:14 PM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
I just remembered another blog design I did, where I compromised with a single image that acts as a long vertical background for the whole sidebar.

http://farmerbarney.com

I say compromise, because if I were to keep adding widgets, they'd end up falling off the bottom edge of the "paper" image.

I accomplished that with an HTML insert:

Code:
td#right {
vertical-align: top;
border-left: dashed 0px #CCC;
padding: 10px 10px 10px 10px;
background: url(ADDRESS-OF-JPG-GOES-HERE) no-repeat top left;
}
  #10  
Old Feb 12, 2014, 03:45 PM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
Reactivating this link to see if anyone has further suggestions for my sidebar. I've tried a lot of trial and error, but I don't see a way to give my sidebar boxes some nice margins.

http://animatusstudio.com/test3/

And I think I'll delete the top menu, instead of integrating it into this design.
  #11  
Old Feb 12, 2014, 04:03 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Your sidebar boxes have huge margins. If you are talking about padding you could use
HTML Code:
#right .widget {
padding: 10px;
}
__________________
~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.
  #12  
Old Feb 13, 2014, 07:58 AM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
That was it! I added that code to the html/css area, which worked, then tried adding just a padding line to the widget area styling, which worked also.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Background color fails to display/ transparent for first widget in sidebar, in IE wobcradio Sidebars & Widgets 1 Jun 13, 2011 07:37 AM
[SOLVED] Lost the border on right sidebar widgets (again) jkgourmet Sidebars & Widgets 3 Nov 12, 2010 05:06 PM
[SOLVED] How can I remove the border from the left sidebar widgets, but leave it on t jkgourmet Sidebars & Widgets 1 Nov 10, 2010 01:58 PM
Transparent GIF images in main page body not transparent donfos001 Center area post/pages 2 Jan 10, 2010 09:14 AM
Set left sidebar widgets same distance from center area as right sidebar widgets daisy24 Sidebars & Widgets 2 Feb 19, 2009 05:11 AM


All times are GMT -6. The time now is 11:04 PM.


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