Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 47: Styling WordPress sidebar titles using Thesis 2 CSS

Thesis 2 Sidebar Title

We’ll now take a look at styling the WordPress sidebar titles using Thesis 2 CSS.  Thesis 2 provides a CSS Package out-of-the-box for our use.

From the WordPress Dashboard navigate to the Thesis 2 CSS page.

Thesis 2 CSS Page

On the right side of the page you’ll find a CSS Package labeled “Widgets”.

Thesis 2 Widgets Package

Click on the Widgets button.  Scroll down and expand the Widgets Titles – Font Settings.  I changed the Font Weight to “bold”.

Thesis 2 Widget Title Font Settings

Scroll further down to the Widget Titles – Font Settings – Padding.  I added a little padding on top and bottom to expand the title a bit.  I also added left padding to move the title off the side of the title container.

Thesis 2 Widget Title Padding

Remember the CSS Variables we created?  Take note of our secondary color B1.

Thesis 2 CSS Variables

Within the Widgets CSS button, click on “Additional CSS”.  I entered the new CSS highlighted below.  This will add a background color to our widget titles and change the font to white.

Thesis 2 Widget Title Background Color

Click the green “Save” button.  Also click the green “Save CSS” button.

Thesis 2 Save CSS

Refresh your home page and you will see the changes to your widget titles.

Thesis 2 Sidebar Widget Title CSS

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 0 comments… add one }

Leave a Comment