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 »

Customize text widget's margins individually


  #1  
Old Nov 29, 2011, 01:55 AM
maralian
 
18 posts · Nov 2011
Customize text widget's margins individually

Atahualpa rocks!!! One question: I want to change the margins but only on certain text widgets in my sidebar. I know there is an option in:

ΑΤΟ > Sidebars & Widgets > Style widgets > Widget Container but that does the job for all of them.

I want to experiment only with three of my text widget's margins... How do I do that?

Thanks in advance

Last edited by maralian; Nov 29, 2011 at 01:59 AM.
  #2  
Old Nov 29, 2011, 04:23 AM
juggledad's Avatar
juggledad
 
23,729 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you need to look at the source of a generated page. Then you can examine the widgets and see if there is a ID="..." with the widget. Using that in your CSS Selector, you can then craft some css for each widget specifically
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Nov 29, 2011, 05:27 AM
maralian
 
18 posts · Nov 2011
I think I got what you mean.

One of my widget's code looks like this:

<div id="text-3" class="widget widget_text"> <div class="textwidget"><div class="textwidget"><a title ...... ></div></a>

Where and what code should I put, in order to make top and bottom margins 15px for example

Last edited by maralian; Nov 30, 2011 at 01:28 AM.
  #4  
Old Nov 29, 2011, 05:38 AM
juggledad's Avatar
juggledad
 
23,729 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
this is where you need to start learning CSS

CSS is made up of a SELECTOR and some RULES - the more specific a selector the narrower the focus of where the rules are applied. You have seen a 'wide' selector when you gave the widgets a margin in the theme options, it applied it to all widgets. You can use the ID to make your selector very strict and it will only apply to this widget.

a great reference for CSS is http://w3schools.com/css

Once you code your selector and rules you can put them in the CSS Inserts option of the theme (ato->Add 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
  #5  
Old Nov 29, 2011, 08:25 AM
maralian
 
18 posts · Nov 2011
Let me see if I got this thing right because CSS is totally new for me...

The id of my widget is "text-3"

now for the selector and the rules it should be something like this {margin-top:15px;} ????

so the CSS in ATO->Add HTML/CSS Inserts->CSS Inserts will be

text-3 {margin-top:15px;}
  #6  
Old Nov 29, 2011, 09:14 AM
juggledad's Avatar
juggledad
 
23,729 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You need a pound sign to identify the ID
HTML Code:
#text-3 {margin-top:15px;}
note this will only effect the TOP margin
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
Adding CSS to Customize Context Using WordPress Text Widget JerryArns Sidebars & Widgets 1 Jan 3, 2011 08:13 PM
Customize text template as setting in ATO>>Sidebars & Widgets>>Style Widget bigliettaio Sidebars & Widgets 4 Jan 17, 2010 03:18 PM
Question about margins lmilesw Header configuration & styling 0 Dec 1, 2009 11:14 AM
How to add margins when not using a logo? Ashjoielee Atahualpa 3 Wordpress theme 1 Mar 30, 2009 09:18 AM


All times are GMT -6. The time now is 10:51 AM.


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