Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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, 12: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 12:59 AM.
  #2  
Old Nov 29, 2011, 03:23 AM
juggledad's Avatar
juggledad
 
23,765 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, 04: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 12:28 AM.
  #4  
Old Nov 29, 2011, 04:38 AM
juggledad's Avatar
juggledad
 
23,765 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, 07: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, 08:14 AM
juggledad's Avatar
juggledad
 
23,765 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 07:13 PM
Customize text template as setting in ATO>>Sidebars & Widgets>>Style Widget bigliettaio Sidebars & Widgets 4 Jan 17, 2010 02:18 PM
Question about margins lmilesw Header configuration & styling 0 Dec 1, 2009 10:14 AM
How to add margins when not using a logo? Ashjoielee Atahualpa 3 Wordpress theme 1 Mar 30, 2009 08:18 AM


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


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