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 » Header configuration & styling »

Style widget content differently to bulleted text


  #1  
Old Apr 11, 2009, 03:39 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
From what I can gather (and don't take my word for it as I am VERY new at this) the 'content' in widgets is styled by the list tag <li>. I can change this via the theme editor under the Widgets tab and then in the Widget Content box.

I liked the way the theme had the sans serif fonts when I first installed it, with a black tint for some of the entries. However, since the content in the widget uses the <li> tag, this is the way my bulleted text in the body of my posts is formatted. This is not what I want.

So I added the following to the 'CSS Inserts' box to fix up my bullets:

li {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 16px;
font-style: normal;
color: #111111;
margin-bottom: 3pt;
margin-left: -16pt;
list-style-image: url(http://theperdoxrant.com/wp-content/...kbullet1.png);
}

So now my bullet points are the way I like them, matching my body text and using the graphic I wanted. But we always want just that little more than we have, don't we? Sigh.

Now, my sidebar information (under Just Added, Recent Comments, Categories etc.) is styled the same way as my bullet text is except for the colours which I think are overridden by the settings at the bottom of the Widgets editing page. I would like to be able to control the fonts in the widgets without destroying my bullet style.

What to do? Back to Google. I found an easy way to define a class and now have the following in my CSS Inserts:

li.pk {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 16px;
font-style: normal;
color: #111111;
margin-bottom: 3pt;
margin-left: -16pt;
list-style-image: url(http://theperdoxrant.com/wp-content/...kbullet1.png);
}

Now, I can style my widget content via the theme editor and when I want my style of the bullets in my posts, I just have to remember to put the appropriate opening tag at the beginning of my bulleted text being. This opening tag is: <li class="pk">

Voila! Perfect. Am I boring you? Hope not, because I have not finished my tale of woe. What is it they say? Right. You can't have too much of greed.

NOW, my greedy soul is not happy about having to remember to use the <li class="pk"> opening tag! I mean to say, how lazy can one get?

So wake up now, here comes my question.

Rather than having to use that long winded tag every time I want to style my bulleted text, is there a way I can use the long winded tag in the theme editor>Widgets>Widget Content Box to have it style my widget content and continue to use the normal way of defining my bulleted text in the text editor?

Phew! Hello? Hello? Please don't ignore this. Are you still there?
  #2  
Old Apr 11, 2009, 07:03 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
So you want to apply this to all widget? Then use

div.widget li

instead of

li.pk

Or, to address specific widgets only, use this

div#id-of-some-widget li,
div#id-of-another-widget li {
...
}

You definitely don't need to manually add your own class each time. Nearly everything in each widget already has classes or ID's. If not, then you usually can access a certain property through its parent, as shown in the example above. There's no need to have a class directly on the specific property.

Bookmarks

Tags
bullets, class, content, css, widgets

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to style a specific text widget ciocchi Sidebars & Widgets 5 Aug 10, 2010 04:21 AM
[SOLVED] Text Widget - how can I highlight all text (ctl-A) for a fast delete? Leoni Plugins & Atahualpa 5 Jul 14, 2009 08:38 PM
can't change widget content style hadleman Sidebars & Widgets 0 Jul 7, 2009 12:28 PM
Widget style causing ugly display of widget list, breaks at special characters wfzimmerman Sidebars & Widgets 1 Mar 20, 2009 04:31 PM
Bug: with /wp-content/themes/atahualpa3/style.css.php chris Atahualpa 3 Wordpress theme 6 Dec 13, 2008 02:00 AM


All times are GMT -6. The time now is 03:41 PM.


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