free hit counters
If you are using Internet Explorer as your browser please be running at least IE 7 or above. This site does not support IE 6 or below. Go here for the latest free version including easy download and installation instructions If you want to make it real easy on yourself, download Firefox , the most popular browser in the world. It's free and simple. You'll be so glad you did.
Feb
4
2009

Colorize the teaser content

If you want to get an effect similar to this…

99

In your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Remember, once you make the change, save it, and upload the new file to your server. Always describe what you’re doing by putting your description between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*colorize the teaser content*/
.custom .teaser .format_teaser { background-color: #eeeeee ;}

Pick whatever hexidecimal color gives the desired effect

colorchart2

Leaving a comment with code in it...

If you would like to leave a comment and you have examples of code you want to show, you must "escape the code". This allows the entire code to show correctly by inserting certain variable around certain tags to make them show. If you don't "escape the code" your code will show up broken, mangled, and it won't be able to be seen correctly. "Escaping the code" is very simple...

  1. Copy your code you want to show
  2. Click here to go to the site to escape the code
  3. Follow the directions, it's so easy
  4. Once you have the escaped code copied, paste it in the comments area where you want
  5. Now you can enjoy life


Go ahead, leave a comment...

{ 4 comments… read them below or add one }

Brian May 13, 2009 at 9:09 pm

With regards to the teaser section. How would you style the whole teaser div, so that all the content had that background?

Reply

Nasty May 14, 2009 at 11:23 am

In your custom.css add this…

.custom .teaser_box { background: ;}

add whatever gives you the desired effect, i.e. images, colors

Reply

Joe May 20, 2009 at 1:31 pm

Nasty,

Can you make the teaser box preserve the design elements from the actual post. For example, in the actual post the first word is a link. This link does not come through in the teaser….

Reply

Joe May 20, 2009 at 1:44 pm

This plugin solved my problems: http://sparepencil.com/code/advanced-excerpt/

Highly recommend. Can also control the length of teasers.

Reply

Leave a Comment

Previous post: Change the “link to full article” text

Next post: Colorize the teaser text