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 »

[SOLVED] How to style widgets in a new widget area


  #1  
Old Sep 21, 2010, 02:51 AM
mathmojo
 
21 posts · Oct 2009
Well, I've wrestled with it for two days now, and I give up. Time to ask the experts.
I created a new widget area in center column by doing this:

I put this is in the loop,

<?php bfa_widget_area('name=daily specials'); ?>

between

<?php bfa_post_bodycopy('<div class="post-bodycopy clearfix">','</div>'); ?>

and

<?php bfa_post_pagination('<p class="post-pagination"><strong>'.__('Pages:','atahualpa').'</strong>','</p>'); ?>

Then I put this in functions.php:

register_sidebar(array(
'name'=>'daily specials',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-title"><h3>',
'after_title' => '</h3></div>',
));

Then I made a bunch of text widgets and dragged them onto a page, (only one specific page, using Display Widget plugin)

It worked out well. I'd like to style those widgets, though. They can all be styled the same, so I suspect I only need to change the style for the widget area, which I named "daily specials".

I cannot figure out what to change, or what to add in order to be able to style that area. As it stands, the area has the same styling as all other text widgets, like the one in the left nav bar.

I don't want to change the style of the one in the nav bar, just the new widget area on the one page.

Got any suggestions? I don't want to tear out the hair I've got left.

Thanks so much for your attention to this.

_ Brian
  #2  
Old Sep 21, 2010, 04:26 AM
juggledad's Avatar
juggledad
 
23,755 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Why did you do anything to functions.php? I don't get what you are trying to do there?? are you looking to add a new widget area to the sidebar?

Where is this new widget area showing up?
(I must say you have confused me )
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Sep 21, 2010, 05:43 AM
mathmojo
 
21 posts · Oct 2009
Juggledad,
Thanks for the quick reply. Sorry I didn't explain better.

I did it in order to place a widget area in the body of a page. I tried to follow the directions at
http://forum.bytesforall.com/showthread.php?t=330

You check out the results so far at:
http://www.successininternetmarketin...aily-specials/

It's exactly how I wanted it except for the styling.

Thanks for giving it a look.

Brian
  #4  
Old Sep 21, 2010, 06:37 AM
juggledad's Avatar
juggledad
 
23,755 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Ah, that thread was BEFORE the new widget areas were added to the Theme, so you don't need it and it could (?) cause some issues.

to style the new widget area, you will need to look at the source of the page to create the CSS Selectors and CSS rules. Your source is
HTML Code:
<div id="daily_specials" class="bfa_widget_area">	
	<div id="text-6" class="widget widget_text">
		<div class="widget-title"><h3>Wash House</h3></div>			
		<div class="textwidget">Turkey, Roast Beef & Ham With American Cheese, Leafy Green Lettuce, Tomato & Mayonnaise</div>
	</div>
	<div id="text-7" class="widget widget_text">
		<div class="widget-title"><h3>The Shepard Ave</h3></div>			
		<div class="textwidget">Thinly Sliced Turkey With Swiss Cheese, Lettuce, Tomato & Mayonnaise</div>
	</div>
.
.
.
	<div id="text-19" class="widget widget_text">
		<div class="widget-title"><h3>Ferdinand’s Eggplant </h3></div>			
		<div class="textwidget">Eggplant Parmigiana Served As An Open Face Sandwich</div>
	</div>
</div>
so you can use
#daily_specials .widget-title {...} to style the titles
#daily_specials .textwidget {...} to style the descriptions
#daily_specials #text-7 .textwidget {...} to style the description of the 'The Shepard Ave'
etc, etc

p.s. I'll have THE PO BOY
__________________
"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; Sep 21, 2010 at 06:40 AM.
  #5  
Old Sep 21, 2010, 08:32 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
And I'll have Ferdinand's Eggplant and I live closer so I may even give it a try.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Sep 21, 2010, 11:17 AM
mathmojo
 
21 posts · Oct 2009
Thanks a load guys. I tried it and it's working fine.

One more thing, though. Is there a way for me to style the borders of just the widgets in the body of the page without it effecting the sidebar text widgets. I've tried inserting { border: 0; } in all of the three of these
#daily_specials .widget-title {text-align:center;}
#daily_specials .textwidget {text-align:center;}
#daily_specials #text-7 .textwidget {}

but none of them overrode the default text widget setting. I'd like to get rid of the borders in the "sandwich widgets" as well as the little white bar seperating the text from the description.

Any thoughts?

Thanks, and the sandwiches are on me if you ever get down to our pleasant area.
  #7  
Old Sep 21, 2010, 05:48 PM
mathmojo
 
21 posts · Oct 2009
Guys,

It's got to be more than a brain-fart with me. Maybe I'm just losing my mind. At this point I understand less than I did when I started. All the contents of my page vanished, and I realized after I posted the last post that I really don't have a clue.

Here's where it stands. OK, I no longer get how to add a widget area at all. If the old way doesn't work, how do I create a widget area (day in the middle of a page) to which I can add widgets, to begin with?

I know that Juggledad said that some new areas were added to the theme but I'm in 3/5/3 and only see the four sidebar areas on the widgets page.

I'm sure I'm missing something totally fundamental, but I'm at my wit's end to find it.

Once I can create the things, I'm sure I'll be able to follow Juggledad's directions for how to style them. But for now, I'm stripping everything out of the theme that I've added over the last few days.

Please help me out on this. I've put in plenty of hours and am not shy about working at it. But I'm at a roadblock.

Thanks guys.

Brian
  #8  
Old Sep 21, 2010, 06:17 PM
juggledad's Avatar
juggledad
 
23,755 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Brian, check for a PM from me. - your site looks fine to me
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Sep 29, 2010, 01:16 PM
2sticks
 
14 posts · May 2009
I've been reading far too long and searching too deep. I always find great answers here and seldom ask questions - but this time I have to. I think it's pretty simple but for the life of me cannot figure it out.

ATA 3.4.9 WP 3.0.1

I have a 3 section custom footer widget with everything aligned top left - The widget Titles are top left and I want to bring the bullets and their links over to align on the left too. The way it shows, the bullets are indented about 15-20px approx.

The menu items are from the wp menus, the ones I'm trying to modify. There's a google news widget that looks identical to the menus as far as the titling/indention.

Can't figure it out. Any guidance would be most appreciated.

Thanks

SL

Last edited by 2sticks; Sep 29, 2010 at 01:18 PM.
  #10  
Old Sep 29, 2010, 01:29 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
You need to use the selectors for the individual widget areas to style them or their contents. Without a link I can't give you an example.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Sep 29, 2010, 08:12 PM
2sticks
 
14 posts · May 2009
Thank lmilesw,

Ok the site is located at thelmgc.com - I appreciate you looking at it.
When you say "selectors" do you mean the bfa widget code I made for this in the footer?

Appreciate your time.
  #12  
Old Sep 29, 2010, 09:51 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
The selectors are CSS selectors. For instance if you wanted to style the nutrition news widget you would you in your case use. #google-news-widget-4 as the selector which I determined using the Firebug extension with Firefox.

If you want to style the particular widget area where the nutrition news is you would use #my_widget_area_3. I usually name the widget area something more descriptive of its use such as Bottom widget area.

I had to play around with widget areas a bit to get familiar with how they work and if you don't know much about CSS you should really check out w3schools.com
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old Sep 29, 2010, 10:15 PM
2sticks
 
14 posts · May 2009
aha.

1,2,3 widget area nomenclature on this site for me is fine since I only have a header and footer widget defined, with yes 1, 2 and 3 being the footer.

I'm a flash developer and css is NOT my forte. From what you've said, if I can begin to understand is that I can control the behaviour of the individual areas from the html/css inserts area within each by using a hashtag. Still beyond me how to simply move the bullet over slightly to the left . . . thanks for the direction sir.
  #14  
Old Sep 29, 2010, 10:24 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
That's basically it. For example if you wanted to move the bulleted items in the center widget to the left you might use something like the following.
HTML Code:
#google-news-widget-5 ul {padding-left:15px;}
You are selecting the ul in the google news widget 5
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #15  
Old Sep 29, 2010, 11:20 PM
2sticks
 
14 posts · May 2009
As the Doorman said in the Wizard of Oz, "Why didn't ya just say so"

It'll' sink in with me in a couple days, BUT it works -You're help is so appreciated Miles.
  #16  
Old Sep 29, 2010, 11:30 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
LOL.. Thanks
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Tags
widget area style

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Widgets - Widget Area Problem annsworld Sidebars & Widgets 4 Mar 21, 2010 01:54 PM
[SOLVED] New WIDGET AREA is not showing up in Dashboard - Appearance - Widgets merle Sidebars & Widgets 5 Feb 20, 2010 12:35 PM
Customize text template as setting in ATO>>Sidebars & Widgets>>Style Widget bigliettaio Sidebars & Widgets 4 Jan 17, 2010 02:18 PM
Added Widgets to Header area and now Widgets won't go away from Widgets page kippiper Header configuration & styling 5 Nov 12, 2009 04:33 PM
Set left sidebar widgets same distance from center area as right sidebar widgets daisy24 Sidebars & Widgets 2 Feb 19, 2009 05:11 AM


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


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