Monday, July 15, 2013

CSS customization of blogger template

I have been asked how I achieved the coloured fonts in my code examples. It's done via some customized CSS code.

My code examples are either inline using the <CODE> tag or longer code text is wrapped in <PRE> tags.

Examples:

Some inline code and

some
longer
text

How to add CSS customization

In the blogger main menu choose
Template
  Customize
    Advanced
In the list of advanced customizations scroll down to
      Add CSS
and in the text field enter
code {color:#8b0080; background:#ffffff; }
pre  {color:#8b0080; background:#ffffff; border:solid 1px black; }
which shows customizations for CODE and PRE:
  • one setting for the font colour (a kind of purple)
  • one setting for the background colour (white)
    Additionally PRE gets assigned a small black border line.

    I also have another customization for H2 headers:

    h2 { text-transform: capitalize}
    
    which capitalizes text so
      This is a nice text
    is shown as

    This is a nice text

    This example shows nicely that these customizations are added on top i.e. font type, font attributes (bold in this case) etc. remain as defined earlier (in the template definition by the template author).
  • No comments:

    Post a Comment