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 »

Styling new widget areas


  #1  
Old Aug 14, 2009, 11:00 PM
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, 04: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, 06: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 07:07 PM.
  #4  
Old Aug 22, 2009, 08: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, 10: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 12, 2009, 11:47 PM
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, 07: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 02:48 AM
[SOLVED] Adding widget areas in the header joaodagraca Sidebars & Widgets 6 Aug 14, 2009 07:44 AM
Styling the WP calender widget scruffydoo Sidebars & Widgets 1 Aug 13, 2009 09:20 AM
adding new widget areas? dbweim Sidebars & Widgets 1 Aug 8, 2009 04:28 AM
Styling Category Widget BigG Sidebars & Widgets 3 Apr 16, 2009 11:53 AM


All times are GMT -6. The time now is 11:52 AM.


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