Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   new widget area with border (http://forum.bytesforall.com/showthread.php?t=9686)

radioaktif Sep 15, 2010 11:00 AM

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

lmilesw Sep 15, 2010 04:46 PM

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>')


rmilam Sep 15, 2010 08:09 PM

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!

rmilam Sep 15, 2010 08:12 PM

Sorry too quick on the draw... I deleted the block command. Am learning quickly! Love ATO

jrobie23 Nov 17, 2011 04:46 PM

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 (Post 43599)
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>')



juggledad Nov 18, 2011 04:15 AM

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'

jrobie23 Nov 18, 2011 04:56 AM

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!

juggledad Nov 18, 2011 05:33 AM

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


All times are GMT -6. The time now is 07:49 PM.

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