When it comes to Thesis CSS customization I really count on in-post fixes! Making certain parts of your posts stab your users into their eyes is a nice way to finally catch their ever-fluctuating attention. Perhaps you would like to announce a new feature on your blog or stress the fact that having installed WordPress 2.8.4 makes life easier again. There are countless ideas knocking at your door. Just invite them in and listen to what they want to tell you.

As always you have to make sure that your Thesis options are set with the custom stylesheet option! There are two ways to implement custom CSS fixes but installing the OpenHook Wordpress plugin seems to make sense at once, because installing works like putting your pants off (I mean it’s easy!) and finally working with it remembers you of having obtained the best WordPress theme that is available.

I would place a note here, but you have to look at these nice boxes at hand below. I do not want to exaggerate things. So, before you switch over to another site: YES, you are able to use the following boxes even without the Thesis theme. It’s just about CSS. Simple, yet powerful!

So, how to implement the special boxes?

I’m glad you finally ask! Just look at my examples below and read carefully. I have to say that the two first (alert + note) are already ready to use by default if you install the Thesis theme. The other ones are selfmade and therefore need some extra treatment. You will read about that below!

This is an alert. I made it look like the Thesis advertisements and on my website it is mainly used for making my users (you) take a close look at something. Yellow boxes are very common to display something special!

Accessible by setting the class-attribute to “alert”. Your code should look like this: <p class="alert">Your alert goes here</p>

Inside your custom.css you have to change the following:

.custom  p.alert { /* YELLOW BOX */
        border: 2px solid #FFE400;
        background-color: #FFFACC;
}

This is a note. Comes in a calm blue style, which of course can be changed in your custom.css file. Again, a colorful box like this will catch attention at will. At your will to be precise!

Accessible by setting the class-attribute to “note”. Your code should look like this: <p class="note">Your note goes here</p>

Inside your custom.css you would like to insert the following:

.custom p.note { /* BLUE BOX */
        border: 2px solid #2361A1;
        background-color: #CFE1F5;
}

This is a warning. Warnings are a nice announcement for your users to REALLY look closer at what you are writing. You could for example tell them not to obtain the Revolution Theme, but instead – for infinite reasons – buy the ultra-cool and most customizable Thesis Theme.

Accessible by setting the class-attribute to “warning”. Your code should look like this: <p class="warning">Your warning message goes here</p>

In your custom.css file you are bound to make it a red splashing screen:

.custom p.warning { /* RED BOX */
        border: 2px solid #DD0000;
        background-color: #FFCEC7;
        padding: 8px 11px;
}

I marked the padding attribute by making it bold because you have to do CSS what you want (a box designed with the same patterns as the alerts and notes) by acting like them! The little boxes which are implemented by default have got their padding attribute set to 8px in height and 11px in width. Insert this additional line and you are fine with your style!

And this is finally an advice. Fits best in blogs where you act like parents telling their children to NOT destroy the unique Ming vase on the table…

Accessible by setting the class-attribute to “advice”. Your code should look like this: <p class="advice">Your advice goes here</p>

.custom p.advice { /* GREEN BOX */
        border: 2px solid #00B100;
        background-color: #DEFFDE;
        padding: 8px 11px;
}

It’s the same procedure with this box full of your advices – you have to insert the padding attribute to be sure that this greenish box will look alike. You are of course in no way forced to do so. You will see how to make your little CSS-inside-posts-boxes look different in another precious post of mine. Well, later, so to speak :-)