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 »

Widget CSS


  #1  
Old Apr 19, 2011, 07:48 PM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
Ok...before I mess things up even further I really need some help. I needed to put in some widgets to be able to do what a client wished. Or at least I thought that was the easiest way. But I have several problems.

Up at the top I have 3 widgets. one with a logo inside of it, one with phone numbers and a Skype widget, and the 3rd with a search bar. Thought I had it working right but it seems on larger monitor the search bar just keeps getting longer which looks bad. I've tried a variety of things but it doesn't seem to get better, in fact worse.

%bar1 %pages %bar1 <?php bfa_widget_area('name=Logo widget&cells=3&align=1&width_1=400&width_2=350&wid th _3=100&width_4=100&align_2=1before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>');
?>

I keep staring at the above and I just can't tell if it is correct. I'm using this in CSS inserts for the middle widget but I'm so unsure at this point.

Code:
div#text-19.widget  {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0px solid #F88C2C;
    text-align: left;
    font-size: 1.10em;
    font-weight:normal;     
    display: block;
    margin:5px 5px 2px 45px; 
    padding: 2px 5px 2px 25px;
    width: auto;
Then we have another widget just below that that has a series of images. I thought I had that looking right but it doesn't seem to center on lager resolutions. I'm sure it is just a CSS setting, but I can't figure out which one. I've spent hours looking through W3 Schools. Here's the code I have for that:

Code:
div#text-18.widget  {
    background: none repeat scroll 0 0 #FFFFFF;
    display: inline;
    margin: 2px 15p 2px 5px
    padding: 2px 5px 2px 35px;
    width: auto;
I might add here that I have also add some CSS before the images to try and move them over to the right and although it worked to a degree it still doesn't on larger resolutions which means I'm doing it wrong.

Last but not least, I have 4 widgets in the footer. I actually thought that I had everything there correct but for some reason in IE the content seems to flow outside of the widget.

Here's the code for those:

Code:
div#text-2, div#text-22, div#text-23, div#text-24  {    
   background: #ffffff;
-moz-box-shadow: 6px 6px 1px #cfcdce; /* Firefox 3.6 and earlier */
-webkit-box-shadow: 6px 6px 1px #cfcdce; /* Safari */
box-shadow: 6px 6px 1px #cfcdce;
   border: solid 2px #cfcdce;
   height:270px;
   text-align: left;
   font-size: .90em;
   font-weight: normal;
   margin: 15px;
   padding: 5px 10px 2px 5px;
As you can tell, somehow I made a mess. Client keeps making changes and I'm ready to call it quits. If you need in the backend or want me to attach my settings i will be happy to do so. I'm taking it out of maintenance mode for the time being.

Sure hope you can help.
Guess it would help if I listed the site.
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"

Last edited by sleenie; Apr 19, 2011 at 07:52 PM.
  #2  
Old Apr 19, 2011, 09:15 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Trying to explain things or figure out what you have would be more time than just showing you what some CSS would do.

To set the search form to a specific width you would use something like the following.

HTML Code:
#logo_widget_3 .searchform {
    width: 200px;
}
And to center the discus widget area you just center like you would any div by setting a width and using auto left and right margins as below. You might also have to add position relative if this doesn't work in IE.
HTML Code:
#discus_widget_area {
    width: 870px;
    margin-right: auto;
    margin-left: auto;
}
__________________
~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 Apr 19, 2011, 10:52 PM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
Thanks Larry. It does help the search area alot. I'm feeling pretty stupid though. Part of my problem was I noticed that I had my layout setting wrong. I had forgotten to add the px after the layout. That sure changed things also.

I do have one problem left though. The content in the 4 widgets below towards the footer area seems to flow out of the widget but only in IE. Never had that happen before. I do understand that they shadow won't show up in IE but this content problem has me perplexed. Never had that happen before in a widget.
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"
  #4  
Old Apr 20, 2011, 08:23 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Try resizing the text widgets.
__________________
~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 alignment

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Sidebar Title or modify css of a specify widget ponzaracconta Sidebars & Widgets 4 Jan 30, 2011 02:52 PM
Background CSS for overlaid new widget areas Wimbledon Sidebars & Widgets 3 Dec 24, 2010 10:17 PM
css insert for custom widget mythical54 Sidebars & Widgets 4 Nov 14, 2010 09:56 PM
[SOLVED] How to Style Flexipages Widget with CSS New WordPress Fan Forum How-To 2 Sep 11, 2010 01:20 PM
Need help optimizing new widget area CSS Wimbledon Sidebars & Widgets 0 Jun 9, 2010 06:46 PM


All times are GMT -6. The time now is 08:02 AM.


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