|
#1
Jun 4, 2009, 02:59 PM
|
|
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
Jun 4, 2009, 05:30 PM
|
|
|
|
23,765 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
Jun 5, 2009, 08:06 AM
|
|
Thank you very much. Now, how can I add a little padding between the widget and the separator?
Thank you.
|
#4
Jun 5, 2009, 09:03 AM
|
|
|
|
23,765 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
Jun 5, 2009, 10:49 AM
|
|
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
Jun 5, 2009, 11:22 AM
|
|
|
|
23,765 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
Jun 5, 2009, 11:39 AM
|
|
www.derbito.com
itīs under construccion yet, you can take a look anyway
|
#8
Jun 5, 2009, 01:27 PM
|
|
|
|
23,765 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
Jun 5, 2009, 02:36 PM
|
|
margin: 0 0 15px 0; border-bottom: solid 1px #cccccc; padding: 0 0 0 0;
|
#10
Jun 5, 2009, 02:45 PM
|
|
|
|
23,765 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
Jun 5, 2009, 02:51 PM
|
|
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>. <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><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.<br /><br />
<strong>Example:</strong><br /><code>onLoad=\"alert('The page is loading... now!')\"</code> would result
in an output of <code><body <i>onLoad=\"alert('The page is loading... now!')\"</i>></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>.
<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
Jun 5, 2009, 03:16 PM
|
|
|
|
23,765 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
Jun 5, 2009, 03:36 PM
|
|
Done..........
|
#14
Jun 5, 2009, 04:11 PM
|
|
|
|
23,765 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
Jun 5, 2009, 04:38 PM
|
|
That was it Thank you very much. Now Iīm gonna go asking another question but it goes to another forum category
|
|