Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Styling text widgets


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jul 15, 2009, 05:58 PM
Insane Artist
 
3 posts · Jul 2009
Jacksonville, TX
I am brand new to WordPress, and thus to Atahualpa! I tried posting about this on another thread, but if it was answered (and I'm not entirely sure it was), I am now more confused than ever! I have a fair knowledge of HTML and CSS, but haven't learned PHP--yet. My blog page is part of a larger website (http://andreadlavigne.com), though only the blog page is created with WordPress software--the rest of my pages are (so far) just plain ol' HTML and CSS code that I did myself. I have gotten my blog page (http://andreadlavigne.com/blog) looking ALMOST like I want it, but am having problems styling the navigation menu on the left sidebar. The links on my nav menu DO work, but I also want it to have the background buttons like I have on my other pages, just to keep some uniformity going. I use what I saw referred to as a "pixy-rollover" effect, where the button graphic is a .gif picture twice the necessary width, divided into 2 different halves, and change colors/icons when the user hovers over them. So far, I have managed to get the buttons on my blog page to change colors, so I'm pretty sure the pixy-rollover thing is working. But they are not showing up near the 40x200 pixels they are supposed to appear! Basically the colors of the buttons hug the text in the menu, rather than spreading out to their required size. I have tried numerous "fixes" with CSS, even trying to put a <div> around the PHP code for that widget in the WordPress "Editor" and trying to style it with a CSS insert, but nothing has worked right. As of now, I have the nav menu just plain--no buttons turned on. WHAT in the world am I doing wrong--or am I trying to do the impossible???? If anybody can help, I would really appreciate it! Please just keep the suggestion in plain English--my brain is frazzled with this whole mess! Sorry for the "book" here, but I wanted to be clear as I could!
  #2  
Old Jul 16, 2009, 07:22 AM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
Remove your existing CSS insert and put in this one:

div.widget ul li,
div.widget ul li:hover,
div.widget ul li.sfhover {
border-left:0 none !important;
margin: 0 !important;
padding 0 !important;
}

div.widget ul li a:link,
div.widget ul li a:visited,
div.widget ul li a:active {
background:transparent url(/miscimages/pixy-rollover.gif) no-repeat scroll left center;
display:block;
line-height:40px;
padding-left:40px;
width:160px;
}

div.widget ul li a:hover {
background:transparent url(/miscimages/pixy-rollover.gif) no-repeat scroll right center;
display:block;
line-height:40px;
padding-left:40px;
width:160px;
}

You were using the path to the image as shown in the example code but your image is not there, it's at the location /miscimages/pixy-rollover.gif

The code above will apply to all widgets. To limit it to that particual text widget, look up its CSS ID or CSS class by looking into the source code of a browser rendered page ("View Source" in your browser).

You'll see

<div id="text-3" class="widget widget_text">

Replace "div.widget" in the code above with "div.widget_text" to limit this design to (all) text widgets, or replace it with "div#text-3" to limit it to this particular widget. When you remove this text-widget from the sidebar and add it again, the ID "text-3" may change. In that case you'd have to look it up again and adjust the code accordingly.
  #3  
Old Jul 17, 2009, 06:36 PM
Insane Artist
 
3 posts · Jul 2009
Jacksonville, TX
YAAAAAAY!!!!!!!!! It worked! Thank you SO MUCH! And all I had to do was copy-and-paste. You have my undying gratitude! Have a great day!

Bookmarks

Tags
css insert, styling, text, widget

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Text Widget - how can I highlight all text (ctl-A) for a fast delete? Leoni Plugins & Atahualpa 5 Jul 14, 2009 07:38 PM
Changing the links default title text to an image jpg of text veenublue Sidebars & Widgets 2 Jun 5, 2009 06:05 AM
text styling in pages tomhypno Atahualpa 3 Wordpress theme 4 Apr 16, 2009 06:25 PM
right widgets cut off in IE, Firefox-right sidebar text smaller than on left sidebar daisy24 Sidebars & Widgets 2 Feb 23, 2009 10:59 AM
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 07:05 AM.


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