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 »

Styling new widget areas


  #1  
Old Aug 15, 2009, 12:00 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
For a new widget area written like this:

<?php bfa_widget_area('name=Header Widget Area&cells=1&align=8&width_1=470'); ?>

How do I write the correct CSS insert to add margin-left:40px; ?

Basically, I don't want the widget ALL the way to the left (as set by align=8) and want to make some space on the left.
  #2  
Old Aug 16, 2009, 05:19 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
If you look into the source code you'll see the ID's and classes of the various elements

<div id="header_widget_area" class="bfa_widget_area">

</div>

You can apply the styling on the ID

div#header_widget_area {
...
}

or the class

div.bfa_widget_area {
...
}
  #3  
Old Aug 16, 2009, 07:57 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Thank you Flynn for the help.

I was able to write the correct CSS insert like so:

div#text-8 {
margin-left: 40px;
}

I read the source code as you suggested and found that the new widget area feature is not using the widget names for the div IDs -- instead it is using "text-2", "text-3", etc.

Was it intended to be that way? If not, hopefully this is a helpful heads-up.

EDIT: After more thought, the "text-#" div ID is because I am using text widgets inside the new widget areas right? I tried calling #header_widget_area and it didn't work...

Last edited by Wimbledon; Aug 16, 2009 at 08:07 PM.
  #4  
Old Aug 22, 2009, 09:46 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
You can set a margin-left on the widgets or a padding-left on the widget are.

Both widgets and widget area should have ID's.

The ID of the widget is completely different from that of the widget area.

The ID of the widget will be set by the widget itself. The ID of the widget area will be built from the parameter that you used with the function bfa_widget_area(...)

But should be all in the source code of a browser-rendered page. I also suggest that you use Firebug, a very useful Firefox plugin
  #5  
Old Dec 12, 2009, 11:26 PM
jdadour
 
7 posts · Dec 2009
I need to stylize my newly added widgets as well. Which code file in the Editor section do you find the coding for the widget? Header.php? css.php?
  #6  
Old Dec 13, 2009, 12:47 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
You have to add a CSS insert in ATO (Atahualpa Theme Options) > Add HTML/CSS Inserts.
  #7  
Old Dec 13, 2009, 08:39 AM
jdadour
 
7 posts · Dec 2009
Thanks Wimbeldon. Worked perfectly!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Widget areas 1 to 4 Ddabrai Sidebars & Widgets 2 Aug 15, 2009 03:48 AM
[SOLVED] Adding widget areas in the header joaodagraca Sidebars & Widgets 6 Aug 14, 2009 08:44 AM
Styling the WP calender widget scruffydoo Sidebars & Widgets 1 Aug 13, 2009 10:20 AM
adding new widget areas? dbweim Sidebars & Widgets 1 Aug 8, 2009 05:28 AM
Styling Category Widget BigG Sidebars & Widgets 3 Apr 16, 2009 12:53 PM


All times are GMT -6. The time now is 03:11 PM.


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