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.
If you want to find me on Twitter, I'm 
{ 1 trackback }
{ 19 comments }
Loved this.
Thank you.
But I just tried it and no success. I didn’t put in any text of my own. I was just testing it so I left the default text. All I got was 4 lines if data (one for each box I guess) that said “//Write Something Here. No box, no color, no lines, etc.
Thanks for the heads up Carol. It didn’t work because I typed the code in as text and Wordpress did what it does and turned my normal ” ’s into curly ” ’s. So when you copied and pasted the code broke down. I’ve gone ahead and fixed the code so that WP doesn’t do that anymore. Please try it again and let me know how it goes.
Works great now RJ.
Thank you.
Hi there,
Got a question for you. Im thinking I want a home page that looks different from all other pages. All my other pages would look the way my blog looks now. 3 columns. Content in the middle. No FCG at the top.
My home page would have (I think) 3 columns also, but arranged differently. The left column (the widest) would have content (the most recent post). The right columns would have the FCG at the top taking the width of 2 side bars and under the FCG would be two side bars.
Does that sound possible? Does it sound complicated? I seem to remember somewhere in Thesis where I can make my home page different. I looked for it, but couldnt remember where I’d seen that. Any thoughts you have would be much appreciated. Thank you!
Hey Allison, it’s definitely possible but can get murky. Luckily Berchman wrote a great step-by-step tutorial about that here. I think it’s exactly what you’re looking for but if not please let me know. Do you mind if I ask why you want to use a static home page? Some people love ‘em and some hate them.
Thank you. But why do some people hate them? Guess Ive never really heard the pros and cons. And honestly I suppose Im still thinking it through, but my thoughts are that I want that FCG “above the fold” for people to get a preview of various posts, but I also want my current post above the fold.
The way it is now, the FCG pushes the post down the page in the center content column. I also dont want the FCG on every page. That would be overkill. And then for the other pages (all except the home page), I just like the 3 column look with content in the middle. So, I dont know. Maybe the FCG is just a little too many bells and whistles? I do subscribe to the Less is More idea. But I like pretty too. Im all ears to your thoughts on this.
Oh and the site I always go back to that I think is visually really nice is thepioneerwoman.com Her set up is kind of this way though she doesnt have a post on the front page. Thx.
Layout for me has always depended on what the purpose of my site was. People in the States read from left to right and ignore text if they have the option of looking at pictures. I think if you have a personal blog with a main purpose of connecting with readers then design it in a way that makes you happy. Go for pretty
If people really like what you write they won’t mind scrolling a bit to read your text under your picture gallery. At the same time, I think it’s a good idea to set up a local hosted test site and play with the layout. Who knows, maybe you’ll find that you really like having the FCG over the sidebars and maybe not. Personally I think it would look great that way, but I am a guy, and that means that I have probably worn brown shoes with a black belt at least one time in my life, so take everything I say about style with a grain of salt 
Thanks very much for this and support on forum. I have added the text boxes via dashboard. What I would really like to do is add some image headers to replace the standard headers – does this mean I should be creating my own boxes and styling accordingly as per your other tute or is there easy way to slot images into sidebar? Thanks again!
One further question (busy Sunday for me!); if I want to add the odd image throughout my sidebar (not using ngg widget gallery which I have removed) would I use text widget box but just style so no box so all you see is image? i.e. Text widget; then an image (photo); then another text widget – just to mix it up a bit! Thanks for any direction/ pointers.
Man, I think that a lot of sites would benefit from images as headers as long as they’re not concerned about increased load time. I’ll have a tutorial about adding images as widget headers coming out soon and thinking about doing a css sprite version. But right now I’m at the beach and thoughts of code are far from my mind
I haven’t done this, but if I were to do it on the fly, I would just add images via WP’s text widget so that I can drag them wherever I want in my sidebar. There’s probably a more elegant solution, but it’s not coming to my mind right now.
That’s great; I tried it last night as the drag and drop great; I know it will work once I get the image code right but I just could not call the image right. All loaded up into my thesis/custom/image/x.php but the image code I was using was wrong for sure, as just blank! Am working on that via DIYForum though; THANKS! Enjoy the beach, and time off!
PROGRESS! I have my sidebar boxes, and have also learned how to pop a clickable image in a text box (fluke); but getting in a mess with how to add an image into a text box which has been styled and has content. For example: how would I add an image to this little lot so that image appeared before writing – it’s been looking like modern art so far, not quite theme of my site. Thanks for any help.
If you are coming to the Médoc for holiday or business, on your own or with friends, family, colleagues or clients, please do get in touch to discuss any planning requirements.
ACH – I am so sorry; my code did not show up – please feel free to delete that last para in last post as tht has come up rather than my code which was basically a duplicate of your example with slightly different padding and a click through on one of the words. Sorry, was not after plug; please do erase as I can’t seem to.
Thanks.
It’s ok, I don’t mind the link there at all. What code did you need some help with?
Well, I have cracked the colour boxes, and also images, but not getting the two together i.e. if I wanted to put a little picture in my Latest Interviews box. I added the image code to the existing code but it popped out above box; not in it. Just wondered if a way to get little images where you want them around the text in a text box. You can see from my site what I have managed to do with your help and some playing so far! Hope the beach was good!
I am enjoying all of the info here, but for me, the two boxes at the top that show the two Thesis layouts are just plain white boxes, nothing in them. Do I need something in order to see them? Thanks!
Thanks for pointing that out. I must’ve forgotten to change the file path when I upgraded versions. The images should show up now, thanks again!
Comments on this entry are closed.