Wordpress Themes - WP Forum at BFA - [SOLVED] How to add 1 px solid line separators between sidebar widgets

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - [SOLVED] How to add 1 px solid line separators between sidebar widgets (http://forum.bytesforall.com/showthread.php?t=1914)

[SOLVED] How to add 1 px solid line separators between sidebar widgets

I would like to add 1px solid line separators between sidebar widgets.

I would also like to wrap some of my sidebar widgets in 1px solid line frames.

Any suggestions?

Thank you very much.

You can style the widget containers at ATO->Widgets->Widget Container: - For a solid black line use: 'border-bottom: solid 1px #000000;' BUT remember styles applied here will effect all widgets.

If in addition, or in case you just want to effect one widget, you need to look at the generated source and find the '<div id=...' and using that , create a css insert (ATO->HTML/CSS Inserts->CSS Inserts

If you wanted to put a red box around the pages widget, looking at the generated code for a page we see the pages widget's 'DIV' is

HTML Code:

<div id="pages" class="widget widget_pages">

so the CSS insert would be

HTML Code:

#pages {

border-style:solid;

border-color:red;

}

Thank you very much. Now, how can I add a little padding between the widget and the separator?

Thank you.

You can play with the margin and padding in the ATO->Widgets->Widget Container try this

HTML Code:

border-bottom: solid 1px #000000;

padding: 20px 0 20px 0;

Thank you again. Now, when I do what you told me, appears too much padding ABOVE each widget, so the space between the widget and line above it is too big. Even if I write padding: 0 0 0 0;

What should I do :)

what's the url so I can take a look

www.derbito.com

it´s under construccion yet, you can take a look anyway

What have you got coded in the ATO->Widgets->Widget Container ? It looks like you have some duplicate entries. Please copy what you have there and paste it here.

margin: 0 0 15px 0; border-bottom: solid 1px #cccccc; padding: 0 0 0 0;

And what is in ATO->HTML/CSS Inserts->CSS Inserts: ?

There is nothing there. Haven´t added anything there yet.

Take a look at this, I don´t understand much. It may be helpful to you. It´s the bfa_theme-options.php

// New category: html-inserts

array( "name" => "HTML Inserts: Header",
"category" => "html-inserts",
"switch" => "yes",
"id" => $shortname."_html_inserts_header",
"std" => "",
"type" => "textarea-large",
"editable" => "yes",
"info" => "Add code here (JavaScript, CSS, certain type of HTML) that you want to put into the header section of the website,
between <code><head></code> and <code></head></code>. Note: Any HTML you put here shouldn't be
\"visible\" HTML such as a table or a DIV container. If you put HTML here, then it would be machine parsable code, something like a
meta tag, such as: <code><meta name=\"author\" content=\"John W. Doe\" /></code>."),

array( "name" => "HTML Inserts: Body Tag",
"category" => "html-inserts",
"id" => $shortname."_html_inserts_body_tag",
"std" => "",
"type" => "textarea-large",
"editable" => "yes",
"info" => "Add code here (usually Javascript) that you want to add to the opening body tag <code><body></code> of the website. 
Example: <code>onLoad=\"alert('The page is loading... now!')\"</code> would result
in an output of <code><body onLoad=\"alert('The page is loading... now!')\"></code> instead
of the regular <code><body></code>"),

array( "name" => "HTML Inserts: Body Top",
"category" => "html-inserts",
"id" => $shortname."_html_inserts_body_top",
"std" => "",
"type" => "textarea-large",
"editable" => "yes",
"info" => "Add code here (JavaScript, HTML, CSS) that you want to put into the body section of the website, between
<code><body></code> and <code></body></code>, right after <code><body></code>."),

array( "name" => "HTML Inserts: Body Bottom",
"category" => "html-inserts",
"id" => $shortname."_html_inserts_body_bottom",
"std" => "",
"type" => "textarea-large",
"editable" => "yes",
"info" => "Add code here (JavaScript, HTML, CSS) that you want to put into the body section of the website,
between <code><body></code> and <code></body></code>, right before <code></body></code>.
Google Analytics code would go here, and most other tracking code probably too."),

array( "name" => "CSS Inserts",
"category" => "html-inserts",
"id" => $shortname."_html_inserts_css",
"std" => "",
"type" => "textarea-large",
"editable" => "yes",
"lastoption" => "yes",
"info" => "Add CSS code here that you want to append to the theme's CSS file. Example 
<code>.newclass { color: #123456; border: solid 1px #000000; 
font-family: arial, \"comic sans ms\", sans-serif; background: url(". $css_img_path ."images/myimage.gif);
 }</code>"),

First off , that code is what builds the page you see when you click the 'HTML/CSS Inserts' tab in the backend.

What is very strange is the code greneated for the widget container. I'm seeing this

HTML Code:

div.widget {

        margin: 0 0 15px 0; border-bottom: solid 1px #cccccc; padding: 0px 0 0px 0;

padding: 20px 0 20px 0;

padding: 20px 0 20px 0;



        }

note the two extra padding lines. They are what's causing the problem.

Let's try something, first Go to ATO->Widgets. Make note of what you have in each of the options if it is different from the default. Then at the bottom of the page, press the RED 'Reset Settings' button. DO NOT PRESS THE GREY BUTTON.

The Red Button will reset the Widget page back to its defaults. Let me know when you have done this and I'll look at the page again to see if the extra 'padding's are gone.

Ok, that got rid of the extra 'padding's. Now put this

HTML Code:

border-bottom: solid 1px #000000;

padding: 20px 0 20px 0;

in the ATO->Widgets->Widget Container

That was it :) Thank you very much. Now I´m gonna go asking another question but it goes to another forum category :)