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 »

new widget area with border


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 Sep 15, 2010, 11:00 AM
radioaktif
 
2 posts · Aug 2010
new widget area with border

Hi all,

I'm not so good in programming and very bad in css...

I use WP 3.0 and Atahualpa 3.5.3

Here is my WP blog : www.leparloir.ch

I try to made my blog more like a magazine theme but really love
Atahualpa functionnality and so try to do what I want with it.

I like the default style of widget in the right side bar with grey
border around each widget.

I would like to put a widget area horizontally under the first post.
And I did it with "add new widget areas". Actually I put this code on
the begenning of the loop in "style and edit center column section" :

<?php if ( is_front_page() AND $bfa_ata['postcount'] == 2 ) { ?>

<?php bfa_widget_area('name=My widget
area&cells=3&align=2&width_1=200&width_2=200&width _3=200&width_4=200&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>');
?>

<?php } ?>

But no grey border...

So how can I make look my news widgets just like in my right bar ? I
guess I have to change some reference to css style but as I said I'm
not really good in css and php...

I hope that someone can help me.

Best regards

Charles
  #2  
Old Sep 15, 2010, 04:46 PM
lmilesw's Avatar
lmilesw
 
10,072 posts · Jul 2009
Central New York State USA
You would use the following to ATO>Add HTML/CSS Inserts>CSS Inserts to style the 3 new widget areas the same as the sidebars
HTML Code:
#my_widget_area_1, #my_widget_area_2, #my_widget_area_3 {
border:4px solid #EEEEEE;
display:block;
font-size:12px;
margin:0 0 10px;
padding:10px;
}
I would also change the widget code to as you don't need to specify widths when they are all the same.
HTML Code:
<?php bfa_widget_area('name=My widget  
area&cells=3&align=2&before_widget=<div id="%1$s"  class="header-widget %2$s">&after_widget=</div>')
__________________
~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.
  #3  
Old Sep 15, 2010, 08:09 PM
rmilam
 
25 posts · Sep 2010
Sierra Foothills of Northern California
If I do the above CSS to add borders, on Firefox, Chrome and Safari, my three widgets stack top to bottom. On IE they are side by side which is what I want. How do I get side by side WITH borders? Many thanks!
  #4  
Old Sep 15, 2010, 08:12 PM
rmilam
 
25 posts · Sep 2010
Sierra Foothills of Northern California
Sorry too quick on the draw... I deleted the block command. Am learning quickly! Love ATO
  #5  
Old Nov 17, 2011, 04:46 PM
jrobie23's Avatar
jrobie23
 
63 posts · Feb 2011
Boulder, CO
I'm struggling with getting space between my new widget areas. I've tried assigning widths, padding, margin, etc.. all to no avail.
it says the widget areas will take up the space they are allotted. (they are in center column), but I want them to have some space between them. I've added borders and padding (inside cell), but can't get them to separate.
http://4legsandatail.org/
here's my code: it is a work in progress, so i've had "margin-left: 20px", etc.. in there.
I'm likely missing something simple, but need a little life-line!



#mainwidget1_1, #mainwidget1_2, #mainwidget2_1, #mainwidget2_2, #mainwidget3_1, #mainwidget3_2 {
border: solid #660000;
border-left-width:2px;
border-right-width:2px;
border-top-width:2x;
border-bottom-width:2px;
padding: 10px;
}



Quote:
Originally Posted by lmilesw
You would use the following to ATO>Add HTML/CSS Inserts>CSS Inserts to style the 3 new widget areas the same as the sidebars
HTML Code:
#my_widget_area_1, #my_widget_area_2, #my_widget_area_3 {
border:4px solid #EEEEEE;
display:block;
font-size:12px;
margin:0 0 10px;
padding:10px;
}
I would also change the widget code to as you don't need to specify widths when they are all the same.
HTML Code:
<?php bfa_widget_area('name=My widget  
area&cells=3&align=2&before_widget=<div id="%1$s"  class="header-widget %2$s">&after_widget=</div>')
  #6  
Old Nov 18, 2011, 04:15 AM
juggledad's Avatar
juggledad
 
22,049 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
You have a few syntax issues with your CSS. You have
HTML Code:
#mainwidget1_1, #mainwidget1_2, #mainwidget2_1, #mainwidget2_2, #mainwidget3_1, #mainwidget3_2{
margin-right: 50px;
border: solid #660000;
border-left-width:2px;
border-right-width:2px;
border-top-width:2x;
border-bottom-width:2px;

.mainwidget1_1 td{
padding: 5px;
{

}
table.bfa_widget_area {

}
First, you are using the 'border' shorthand 'border: solid #660000;' but missing the width so change
HTML Code:
border: solid #660000;
border-left-width:2px;
border-right-width:2px;
border-top-width:2x;
border-bottom-width:2px;
to
HTML Code:
border: 2px solid #660000;
second - you have '.mainwidget1_1 td' as a CSS selector. The label 'mainwidget1_1' is an ID so it must have a '#' before it '#mainwidget1_1' (ID's get pound sign, CLASSes get periods)

What that says is 'apply this css to any TD element that is the child of an element with a class of 'mainwidget1_1' - well there are no 'td's inside so this selector applies to nothing. what you want is something like 'td#mainwidget1_1'
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #7  
Old Nov 18, 2011, 04:56 AM
jrobie23's Avatar
jrobie23
 
63 posts · Feb 2011
Boulder, CO
Thank you so much for that!!! I'm a bit embarrassed to say that the whole "class/Id" thing has eluded my brain a bit. I'm going to have to do a little more reading. Up until now, I've not had to deal with it. Your description makes a ton of sense, but I need to get that nailed down for myself. I have a feeling I'll enter a whole new fun world of customization once I get it straight in my head!!
Thanks again!
  #8  
Old Nov 18, 2011, 05:33 AM
juggledad's Avatar
juggledad
 
22,049 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
I had the same issue with class and ID's - here is the rule
ID uses the '#' - must be unique on the page
CLASS's use the '.' - can occur on any number of elements
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
1px border on edge of header area rinoa3108 Header configuration & styling 1 Aug 11, 2010 09:15 AM
Positioning widget onto logo area creates extra spacing in the overall header area cab262 Header configuration & styling 1 May 20, 2010 01:14 PM
Advanced Text Widget in Header Widget Area jcooper Sidebars & Widgets 4 Mar 23, 2010 04:12 PM
[SOLVED] Space between Footer Border top and widget border bottom?? norwichkaren Atahualpa 3 Wordpress theme 12 Sep 25, 2009 07:32 AM
[SOLVED] Help ! Links broken in widget in new widget area mikecnwa Sidebars & Widgets 4 Sep 16, 2009 01:56 PM


All times are GMT -6. The time now is 09:34 PM.


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