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] How to add 1 px solid line separators between sidebar widgets


  #1  
Old Jun 4, 2009, 02:59 PM
eftim's Avatar
eftim
 
16 posts · Jun 2009
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.
  #2  
Old Jun 4, 2009, 05:30 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"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; Jun 5, 2009 at 02:46 PM.
  #3  
Old Jun 5, 2009, 08:06 AM
eftim's Avatar
eftim
 
16 posts · Jun 2009
Thank you very much. Now, how can I add a little padding between the widget and the separator?

Thank you.
  #4  
Old Jun 5, 2009, 09:03 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jun 5, 2009, 10:49 AM
eftim's Avatar
eftim
 
16 posts · Jun 2009
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
  #6  
Old Jun 5, 2009, 11:22 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what's the url so I can take a look
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Jun 5, 2009, 11:39 AM
eftim's Avatar
eftim
 
16 posts · Jun 2009
www.derbito.com

itīs under construccion yet, you can take a look anyway
  #8  
Old Jun 5, 2009, 01:27 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Jun 5, 2009, 02:36 PM
eftim's Avatar
eftim
 
16 posts · Jun 2009
margin: 0 0 15px 0; border-bottom: solid 1px #cccccc; padding: 0 0 0 0;
  #10  
Old Jun 5, 2009, 02:45 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
And what is in ATO->HTML/CSS Inserts->CSS Inserts: ?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Jun 5, 2009, 02:51 PM
eftim's Avatar
eftim
 
16 posts · Jun 2009
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>&lt;head&gt;</code> and <code>&lt;/head&gt;</code>. <strong>Note:</strong> 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:<br /><code>&lt;meta name=\"author\" content=\"John W. Doe\" /&gt;</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>&lt;body&gt;</code> of the website.<br /><br />
<strong>Example:</strong><br /><code>onLoad=\"alert('The page is loading... now!')\"</code> would result
in an output of <code>&lt;body <i>onLoad=\"alert('The page is loading... now!')\"</i>&gt;</code> instead
of the regular <code>&lt;body&gt;</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>&lt;body&gt;</code> and <code>&lt;/body&gt;</code>, right after <code>&lt;body&gt;</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>&lt;body&gt;</code> and <code>&lt;/body&gt;</code>, right before <code>&lt;/body&gt;</code>.
<strong>Google Analytics</strong> 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.<br /><br /><strong>Example</strong><br />
<code>.newclass {<br />color: #123456;<br />border: solid 1px #000000;<br />
font-family: arial, \"comic sans ms\", sans-serif;<br />background: url(". $css_img_path ."images/myimage.gif);
<br />}</code>"),

Last edited by eftim; Jun 5, 2009 at 02:56 PM.
  #12  
Old Jun 5, 2009, 03:16 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Jun 5, 2009, 03:36 PM
eftim's Avatar
eftim
 
16 posts · Jun 2009
Done..........
  #14  
Old Jun 5, 2009, 04:11 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Jun 5, 2009, 04:38 PM
eftim's Avatar
eftim
 
16 posts · Jun 2009
That was it Thank you very much. Now Iīm gonna go asking another question but it goes to another forum category

Bookmarks

Tags
sidebar, sidebar.php

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to add page menu separators evangelos Page & Category Menu Bars 4 Jun 24, 2009 11:00 AM
[SOLVED] Widgets do not show up as being available for sidebar LemBook Plugins & Atahualpa 4 May 20, 2009 08:48 PM
How to change dotted border line in the layout to solid line? araneum Atahualpa 3 Wordpress theme 1 Feb 21, 2009 07:40 PM
Set left sidebar widgets same distance from center area as right sidebar widgets daisy24 Sidebars & Widgets 2 Feb 19, 2009 06:11 AM
Stack Overflow at line: 353 and can't edit sidebar widgets kellya29 Sidebars & Widgets 1 Jan 6, 2009 09:10 PM


All times are GMT -6. The time now is 07:26 AM.


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