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 »

Small issue with Styling a Widget


  #1  
Old Jun 14, 2011, 06:44 PM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
I've got a 3 celled widget area in my footer. Here is the code.

Code:
<?php bfa_widget_area('name=footer1 widget&cells=3&align=1&width_1=210&width_2=581&width_3=210&width_4=100&align_2=1before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>');?>
I have managed to get cell 1 and cell 3 exactly as I want them. Cell 2 is giving me some problems. it is below the others and I can't seem to get it flush like the others. (Here is the site) I have a background image that I'm using. This is the the code right now for the middle widget.

/*=================================*/
Code:
/*     Footer1 Widgets*/
/*=================================*/
#footer1_widget div.widget {
    color: #fff;
    background: transparent;
    text-align: left !important;
    margin-left: 0;
    margin-top: -20px;
    }

#footer1_widget_2 {
    background-image: url("http://irisdvs.net/wp-content/uploads/2011/06/ctr.jpg") !important;
}
I need to move that image up some and it seems I've tried everything. (obviously not everything). I used a background image because I need to have a horizontal scroller across it. i had the scroller working fine, but just couldn't get the image moved up. I've used Firefox but 'm at a loss. I can bring the iamge in via a text box but then it's much harder to use the scroller.

I have to say, I am getting better with these widgets. The last 4 websites i used widgets a lot and don't know how I got along without the option before. Thanks Flynn for putting them in and tanks Larry and Paul for being so helpful.
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"
  #2  
Old Jun 14, 2011, 10:47 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
I am not sure if this will have any bearing on it but instead of setting widths for all the widget areas set just the widths for the two outside ones and let the center fill n the rest. EG
HTML Code:
<?php bfa_widget_area('name=footer1 widget&cells=3&align=1&width_1=210&width_3=210&align_2=1before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>');?>
You also had a width_4 which wasn't needed.
__________________
~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.
  #3  
Old Jun 15, 2011, 07:18 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
Thanks larry. No, that had no effect at all. I was wondering about that 4th width. I have a hard time understand all that is there in that code. Actually, removing it makes it much easier to understand.

I did manage to get the background image looking right last night by adding a background repeat but it didn't help the positioning. What's strange is if I add it as an image through the widget, it lines up just fine, but then I can't get the scroller or fader (which I have to work on) to work because then it has to overlay it. I was trying to take the easy way out and also make it so they lave some control in the future.

Is something conflicting with what I've done with the body settings? I've played with them some but it deosn't seem to help. It might move the others down but can't get the middle to move up. I'll put the body box settings at the bottom of my posts.

Code:
#footer1_widget_2 {
    background-image: url("http://irisdvs.net/wp-content/uploads/2011/06/ctr.jpg") !important;
    background-repeat:no-repeat;
    background-position: top !important;
}
Body Box Settings

Code:
background-image: url(http://www.irisdvs.net/wp-content/uploads/backgrounds/home.jpg);
padding: 2px;
background-repeat: no-repeat;
background-position: top;
height: 342px;
padding: 75px 20px 0 20px;
margin-bottom: -120px;
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"
  #4  
Old Jun 17, 2011, 09:26 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
Ok...I finally solved this styling issue on the site. I just deleted everything in that area and started from scratch. After lots of digging, I found the culprit which was on the body not the widget. Lots of tweaking to get it to work but I now have the widgets edged up against the body and looking like they are suppose to AND got the scroller to work on the widget. I actually used a fade in/out plugin instead, let's the clients agrees it looks better.

However I've been trying to understand "why" it works now. This is the code I found via Firebug and made the margins changes and it works now. I haven't gone back thru and eliminated each one 1 by 1 cause I'm afraid of messing things up.

Code:
div.post-bodycopy p {
    display: block;
    margin: 1em 0;
    padding: 0;
}
l, ol, dl, p, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}
Of course now I have space below that group of widgets that I didn't have before but I'll deal with that later. Surely I can find that.
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"
  #5  
Old Jun 17, 2011, 11:20 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
if you do a settings export (ato->export/Import settings->Export) you can play then restore the current settings, or move them to a test site to play with.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Jun 17, 2011, 11:23 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
Believe me, i do that all of the time. Especially with this site I have a test site.
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"
  #7  
Old Jun 17, 2011, 11:27 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
another way to play is to view the site/page in question. Then view the source and copy it to a text file xxx.html now you can display it in the browser, make a change to the CSS and do a refresh in the browser. When you find what works, then put it in the css inserts.

I do this all the time. (I have a folder that contains over 200 pages from customers...one or two might be yours)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
styling widgets, widgets

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
BUGFIX 361-04: Allow Custom Menu widget links to use same styling as Pages widget. juggledad Old Version fixes and change logs 1 Jan 22, 2011 08:40 AM
BUGFIX 361-03: Allow Tag widget links to use Atahualpa widget link styling. juggledad Old Version fixes and change logs 3 Jan 14, 2011 03:56 PM
[SOLVED] Footer styling issue jasontbedell Post-Kicker, -Byline & -Footer 1 Jan 8, 2011 06:31 AM
[SOLVED] Child pages font size and styling - browser issue? neska0209 Page & Category Menu Bars 2 Jul 14, 2009 08:13 AM
Styling Issue: Dashed Line around Pages andyro Page & Category Menu Bars 1 Dec 12, 2008 04:28 PM


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


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