The top logo header area is different from most themes because this one has a unique graphic of rocks and a branch in the background that takes up a significant area and is meant to be part of the style concept. The title is text based rather than a logo, but it has one other part that is called a Title Caption, which is the second line of text below the main site title and is also part of the overall concept.

Title

The title is text based and uses a custom Google font called “Philosopher” which is the same for the Title Caption as well. For the title, you can change this from the Joomla configuration settings because the template is coded to get your site name:

title

  1. Go to Site >> Configuration >> and then click on the “site” link
  2. Type the title of your site blog in the “Site Name” field:
    site-title
  3. Click Save

Title Caption

caption

  1. Go to Extensions >> Template Manager >> zentheme
  2. Go to the Miscellaneous settings and change the Title Caption for your own. The default caption is: Personal Blog Template
    caption-field
  3. Click Save

Modify the Caption Font

Open the template.css file in the template and look for the following css code:

#title h1, #caption h2 {
font:normal 70px/50px 'Philosopher', Arial, Helvetica, sans-serif;
}
#title h1 {
margin-left:370px;
color:#678800;
text-transform:uppercase;
}
#caption h2 {
margin-left:295px;
font-size:46px;
line-height:40px;
color:#000;
}

The font size is done in px (pixels) and the font family is a custom Google font “Philosopher” which is not standard on Windows OS systems or Mac systems, but is imported into the css file. You can change this if you prefer a different font which you can change it to your own preference. The above code also has the size and line height which is represented by the 70px/50px attribute, where the 70px is the font size and the 50px is the line height. This currently affects both the title and title caption with this styling. However, the next css code is specific to the title caption:

#caption h2 {
margin-left:295px;
font-size:46px;
line-height:40px;
color:#000;
}

The font is now adjusted with a font size of 46px and a line height of 40px.

You can adjust these to your own personal preferences, but you may need to adjust the margins for both the title h1 and the caption h2 positioning.

Customize the Colours

If you want to adjust the colours for both the title and the title caption, you can do this from the Zen theme’s template settings. You can refer to this setup tutorial for colour customization.

By |2011-02-11T03:59:59+00:00February 11th, 2011|Blog|