Without touching your custom.css!

Below is a picture of what Thesis looks like almost straight out of the box.

It’s OK clean, which is great, but it’s also kind of BLAAHH, you know?  Where’s the COLOR!?

How about we keep the same clean layout and lines that Thesis offers straight out of the box, but add just a touch of color to make the page pop.

Like this!

It’s easier than washing a window and you don’t even need to dig into your custom files to do it!.

Step 1.  In your Wordpress dashboard, Appearance->Widgets->Text Widget.  Drag a few text widgets into your side bar.  Click on them to open up them up so that you can type in them.

Step 2.  Paste this into them:

<div style="background-color: #E3F0F2; border: 1px solid #222222; padding: 5px 0px 5px 10px;">
//Write Something Here.</div>

Step 3. Save your changes and refresh your blog.

You should exude the glow of a proud parent of a light blue sidebar widget.

Let’s break down what each part of it does so that you can hack it to your own liking!

background-color: #E3F0F2; This is pretty obvious.  It changes the bg color to light blue.

border: 1px solid #222222; This gives your box a 1 pixel, dark grey (almost black) border.  Feel free to make it thicker or change up the border style.

padding: 5px 0px 5px 10px; Just as I covered in this post, this is the shorthand way to write padding and margins and refers to the top, right, bottom and left, respectively.

Put all of that between some divs and you have a colored text widget that can easily be moved in your widgets panel WITHOUT TOUCHING YOUR CSS!

Next time I talk about colored text widgets, I’m going to rehash how to make your own with custom_functions.php and how to do some advanced styling with them.  Later, I’m going to cover how to make custom widget headings to replace the default h3 text!  So stay tuned and, as always, feel free to ask me a question in the comments, on Twitter or shoot me an email.

Note:  I used one line of css in that last picture: .custom #header #logo a { color: #57B37B; } to make the logo light green.

]]> http://www.fouroclockproject.com/2009/colored-text-widgets-for-your-wordpress-sidebar-part-1/feed/ 20 http://www.fouroclockproject.com/2009/how-to-change-font-size-using-wp-chgfontsize-plugin-for-wordpress/ http://www.fouroclockproject.com/2009/how-to-change-font-size-using-wp-chgfontsize-plugin-for-wordpress/#comments Mon, 25 May 2009 07:30:16 +0000 R.J. http://www.fouroclockproject.com/?p=105

Can your Great Aunt Penny who just had hip surgery read your site?

If she can’t, then neither can a large population of your mature readers.  If you write about real estate, golf, investing or retirement then you understand what I’m talking about. But increasing the default font size of a site will affect your design, and you probably don’t want that after all the work you’ve put into it or money you’ve paid for it.  So the question is, then, how do we allow readers to optionally increase the font size of their blog content without affecting the rest of the site?

The answer is a simple wordpress plugin that will rock you, if you know how to use it.

WP-chgFontSize is a plugin that installs easily through FTP and allows your readers to increase or decrease the font size of a specific <div id> of your website, for example <div id=”sidebars”> or <div id=”content”>.

Wait…<div>…what is that and why should I care?  Just tell me how to use the thing already!

Ok, here are step-by-step instructions on how to install and use the plugin.

Installation:

1. Download the plugin to your desktop.
2. Double click the the .zip folder to unzip it.  You can delete the .zip folder at this point.
3. Open your FTP client and navigate to your “plugins” folder.  Drag and drop the wp-chgfontsize folder to your plugins folder.
4. Open your web browser of choice and go to your wordpress control panel.  Under “Appearance” select “widgets.”  Towards the bottom of the page you’ll see the wp-chgfontsize plugin.  Click the link on the right side of the page to activate it.
5. Installation is complete!  But Now it’s time to set it up for use with your blog.

Setup:

1. In the bottom left of your page, click the link that says “Font Size.”
2. Enter setting similar to the picture shown below:

You can change the values however you’d like, of course.  Also, you’ll notice that as the font gets larger, your sidebars get shuffled to the bottom of the page.  I’m working on a way around this and will update this post as I get closer.

Did this tutorial help you out?  Do you know a better way and want to let me know?  I’d love to hear about it in the comments!