Banner
Styling Modifications for Widgets Tutorial

There have been a few requests in the comments and in emails I have received asking exactly how the Styling Modifications textbox works for my Status Press and Customizable Search Widgets. This tutorial will explain exactly what this option does, and how to use it to the fullest extent possible.

The purpose of the Stylizing Modifications textbox option is to give the user control of how the widget looks on the their front end in the sidebar. This will allow the text of your status to become big and purple and the update time to look small and italicized. Or make your search box have a neon green outline. Basically, you can modify the section to any type of styling format you can create in CSS.

You have three reference options to choose from to stylize your section; two of which come from references in your CSS stylesheet in the form of ids and classes, the other from the style html descriptor.

Yeah, we'll go with big and purple and small and italic.

Yeah, we'll go with big and purple and small and italic.

Let’s work an example with the stylesheet options using the Status Press Widget. We’re going to say that you want to come up with this design for your Status Press Widget (see right-side screenshot). Open up your CSS stylesheet for your current theme. We are going to add an entry to modify the actual status entry by using a class. Classes begin with a period ( . ), followed by a unique name ( sidebar_text ), and ending with an open curly bracket ( { ). In classes, descriptive modifyers format the Class, and are then closed with a closed curly bracket ( } ). Classes are items in your stylesheet that are meant to be used multiple times throughout your page. A class item is a good option for the status text, since the text will probably look like the other main text in your sidebar (though big and purple might not be the best design option!). At the bottom of your stylesheet, add this entry:

.sidebar_text {
color: #9900cc;
font-size: 18px;
}

Use class="sidebar_text" in the style modifications for status textbox

Use class="sidebar_text" in the style modifications for status textbox

Next, go to your Widgets update page in the WordPress Administration. If you have not added the Status Press Widget to your sidebar, go ahead and do so, and configure it so that it pulls one of your status feeds by clicking the Edit link next to Status Press and filling out the first sections.

Now, in the “Stylizing Modifications for Status Tags” textbox type, class=”sidebar_text” . Hit Done, and then click the Save Changes button. If you refresh your front page, you should see that your status is now big and purple!

The next entry you need to make in your stylesheet will be to modify the time updated portion. With this, we’ll use an id. The first line of an id begins with a pound sign ( # ), followed by a descriptive and unique name ( status_updated ) and is ending with an open curly bracket ( { ). Like with classes, descriptive modifyers format the id, and are then closed with a closed curly bracket ( } ). In CSS, ids function primarily to style only one portion of an element on the page and are not meant to be used again. Since the updated time is a unique element that does not exactly match the formats of the other items in the sidebar, and id is a good choice for this element.

So at the bottom of your stylesheet, add:

#status_updated {
font-size: 10px;
font-style: italic;
}

Use this

Use id="status_updated" in the style modifications for time since updated textbox

Going back to your Widgets configuration page in Administration, you need to make sure that “Show Time Since Status Update:” is checked (or else the updated time will not show up in the sidebar!). Next type id=”status_updated” in the “Stylizing Modifications for Time Since Tags” textbox. Hit Done, and then click the Save Changes button. If you refresh your front page, you should see that your status is now big and purple, and the time since last update will be small and italic!

Ok, so hopefully this makes sense to you now. The Stylizing Modifications textboxes provide you a way to reference a class or id in your stylesheet so that you can customize the look of one of the widget’s elements. If you don’t want to customize it, then leave it blank.

But now you may be wondering what the third option to use to stylize your widget’s element. Let’s take a look at this other option by using the Customizable Search Widget. Like with the previous example, we’re going to say that you want to make your search box have a neon green outline.

Neon green is the way to go.

Neon green is the way to go.

Instead of using your CSS stylesheet to enter the style functions, we are going to input the style directly using the style CSS command. This command, unlike the others, allows you to define stylizations in the HTML of the section of the page itself instead of relying on a seperate CSS portion or seperate spreadsheet file.

The style command is found within an html tag of the element you want to stylize, and begins with style=” . The next portion is the actual declarations of CSS formats to assign to that element , and it ends with a closed quotation mark ( ).

Use this

Use style="border: #66ff33 1px solid" in the other textbox style modifications textbox

To use this command to make your search box have a green border, go to the Widgets configuration menu and if you haven’t added the Customizable Search Widget yet, do so now. Click the edit link, and go ahead and make your configurations and such. Now, in the “Other Textbox Stylizing Modifications” type in style=”border: #66ff33 1px solid”. Hit Done, and then click the Save Changes button. If you refresh your front page, you should see that your search textbox will have a neon green border!

Ok, so here I have shown you how to stylize my widgets using your Styling Modifications textboxes, using three different methods. The class and id options are references to instances defined in your CSS stylesheet, while the style method is a quick and dirty hack to get the look you want without messing with your stylesheets. If you need some help on CSS syntax and ideas, check out these tutorials on CSS coding. Hopefully this will help you customize your widgets to enhance the presentation of your sidebar. Feel free to be creative with this!

As always, if you feel blessed by my time and effort in creating these widgets and tutorials, feel free to send some money love. Comments, questions, and suggestions are welcome!


5 Responses »

  1. […] comments and emails, I have created a page with a detailed tutorial on how to effectively use the Stylizing Modifications textboxes in my widgets. Go ahead and take a read, you might find something that interests […]

  2. Hi Brian,

    Enjoyed reading your article – very well written and easy to follow.

    What would you recommend if the widget is not the one you mention above – i.e. I am trying to stlye a widget but it does not have
    “Stylizing Modifications for widget ” in the widget options fields.

    Would your instruction work if the widget does not contain option to specify ID and or class. If not what do you suggest?

  3. Purseal,
    This article refers exclusively to my two widgets. Authors have their own way of allowing modifications to their widget, and you would have to check with them about their widget.

    Sorry that this doesn’t help much!

  4. Hello Brian…

    I find your widget very usefull. The WordPress search box has not a very interestin design, because of it i want to use it.

    I have a doubt, but im not sure if you can help me because maybe its a topic about the worpdress css….

    If you can see http://www.dresdesign.com.ar , there is a search box there, but i cant allign it to the right.. can i make it editing the widget? or should i modify the complete bar menu align?

    I have tried both things but its still there!

    Lot of thanks

    Andres

  5. Hi

    I’ve just started using your statuspress widget and all is going well but I wonder if its possible to not have any title at all? Or maybe to use an image in the title field?

    If this isn’t possible, could you help me modify the css for the title so it matches the text please?

    Many thanks

    Jo

Leave a Reply