DISQUS

Jon @ DadTrek · 11 months ago

I did something similar on my blog. I essentially copied the Thesis alert class and modified it as a "subscribe reminder" which appears at the bottom of every post. It even includes RSS and E-mail icons. Then I added code to my custom_functions.php file so the reminder would always appear automatically. Isn't Thesis great! :D

<abbr>Jon @ DadTreks last blog post..Two Secrets for Making 2009 Your Best Year Ever as a Dad</abbr>

kara · 7 months ago

Tyler - Thanks for the tutorial! Do you know what code needs to be added to custom_functions to make an alert (with an image!) appear at the end of each post automatically? (Jon mentions this in his comment.) :0

Rick Beckman · 11 months ago

Very nice, dude! Will be including this in the next "This Week in Thesis" for sure!

<abbr>Rick Beckmans last blog post..Shared Items for 2009/01/06</abbr>

kristarella · 11 months ago

Nifty! I haven't really started using the alert and note classes yet, but I'll keep this in mind if I do.
Nicely done. :)

<abbr>kristarellas last blog post..Photography with a capital ‘P’</abbr>

Tyler · 11 months ago

@Joe: Yes - I noticed that and I really like it. It's a great way to highlight the action that you want your reader to make.
@Rick: Sweet - thank you. I'm glad I could contribute a little to the Thesis community.
@kristarella: I started using some sort of alert on an older theme and almost forgot about theme until I installed Thesis. That's why I dug up the old code and wanted to adapt and share it with you. I love what you've done with your install by the way.

Katrina @ Callapidder Days · 11 months ago

Thank you so much for this tutorial! I kept my "note" and "alert" classes, but created two new ones with the icons ("noteicon" and "alerticon"), since I can imagine times I'll want the icon and times I won't.

<abbr>Katrina @ Callapidder Dayss last blog post..Not quite ready</abbr>

Tyler · 11 months ago

@Katrina: Very good idea! I'm thinking of making a couple more styles myself. I'll have to think about dropping the icon in case there is a time I don't want one. Thanks for the comment.

Alex · 11 months ago

I have a question that might be really simple to answer but I had a quick look and couldn't find what I was looking for.

How do you call on the 'Alert' and 'Note' classes in a post?

FirstDayBlack · 11 months ago

Awesome. I included this into my blog. many thanks for the inspiration.

<abbr>FirstDayBlacks last blog post..Wie mans nicht machen sollte…</abbr>

Tyler · 11 months ago

@Alex: It's pretty easy. All you have to do is include the following code anywhere in your post: <*p class="alert">Enter your text here<*/p>. Get rid of the two "*". It was the only way I could get the code to show up in the comment.

Also, replace "alert" with "note" to get the different effect. That should do the trick. Let me know how it works out for you.

@FirstDayBlack: Good to hear - glad I could help out.

Alex · 11 months ago

@Tyler: Worked a treat. Thanks a lot for the tip. Just got to find some good icons now. I've found some but I've got to fathom out how to work .ai files ^^"

Thanks a lot.

Tyler · 11 months ago

@Alex: Good to hear that it worked out for you. Have fun with the illustrator files - that's way over my head!

far cry 3 · 10 months ago

Very good, buy i think, that is not for me

Ben Goheen · 9 months ago

Thanks for the tutorial! I can't get the image to appear in my post: http://www.thegoheens.com/buying-real-estate/ho.... The image (http://www.thegoheens.com/wp-content/uploads/ne...) is noted in the css but doesn't seem to be showing, any suggestions?

<abbr>Ben Goheens last blog post..How to Buy Homeowners Insurance</abbr>

Milan · 7 months ago

I really like using the 'alert' class for sticky posts I use to draw attention to ongoing discussions.

Is there any way to make the yellow box extend over several paragraphs, or several items in ordered or unordered lists?

Basically, I want to give the whole post a yellow background or put it in a yellow box.

Tyler · 7 months ago

@Milan: I guess you could include your entire post or a list within the alert class style...I don't see why that wouldn't work. It would probably be easier than trying to tweak the custom.css file to add a yellow background to sticky posts.

Let me know if you do this - I'd like to know how it works out.

[ rosenkrieger ] · 7 months ago

Cool & thank you! Spices up the alert & note boxes quite nice!

Tyler · 7 months ago

Good to hear! Glad I could help.

Mobile Jorge · 7 months ago

Can you fixed my code, I uploaded to the css like this and also ...


.custom .format_text p.note {
background: #f5f5f5 url('###http://www.nokiamobiletalk.com/wp-content/uploads/2009/05/newspaper-32.png###')
center no-repeat;
border: 2px solid #ddd;
background-position: 7px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 5px 5px 45px;}

-------------------

.custom .format_text p.note {
background: #f5f5f5 url('http://www.nokiamobiletalk.com/wp-content/uploads/2009/05/newspaper-32.png')
center no-repeat;
border: 2px solid #ddd;
background-position: 7px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 5px 5px 45px;}


And the alert and note show up but it extends horizontally across the sentence, yours seems to be all compacted and nice looking, mine is just a huge long extended box for 4 words, so I'm like hmmm, what's going on here I thought mine would show just like yours. Anyway I appreciate your insight. Thanks

Tyler · 7 months ago

How do you call the class in your post? Are you using < p class="alert">? (just drop the space before the "p". Other than that I'm not sure what might be messing it up. Is there anything else in your custom.css file that may interfere with this code?

Tyler · 6 months ago

Just want to let you know that I've closed comments on this post. I'm getting ~5-10 SPAM comments on this post everyday. If you have a question about the code feel free to email me and I'll get back to you as soon as I can. Sorry for the extra step but I'm tired of managing SPAM comments.

blogviet · 6 months ago

Where can i add the text?

Tyler · 6 months ago

Tinh: You would add the text within the body of the post. Just enter text as you would normally but add either < p class="alert"> or < p class="note"> around the text you want to highlight. Let me know if you need any additional help.

canon5dshooter · 3 months ago

Thanks for this very useful tip of thesis alerts. Any idea how to change the look of the comments?