Tutorial » Changing the Site Masthead

Changing the masthead in the admin area

It's possible to make simple changes to the site masthead from the admin area. Navigate to the Appearance Settings control panel and then to the Site Settings tab where you will find instructions to change the default text and add a custom logo.

Changing the masthead using a custom template

Changing the masthead and logo area of your Pixaria website using template customisations is also very simple. To begin, you will need to have followed the instructions for creating new theme.

The default header text in a new installation is 'Pixaria Gallery' and this is defined by HTML code located in the main header template file:

resources/templates_default/layout/main.head.html

To make changes, make sure you take a copy of the file into your custom theme:

resources/themes/mytheme/layout/main.head.html

Inside this file, the header text is included in two places, once for situations where the site administrator has set that access to the site is blocked to unregistered users and another for all other situations. To find these two locations, simply open the main.header.html file in your preferred text editor and search for the text:

<div id="logo" {if $set_appearance_fixed_width}
class="logo-{$set_appearance_layout_position}"{/if}>
{if $set_appearance_site_logo_url|trim != ''}
    <img src="{$set_appearance_site_logo_url}"
    width="500" height="60" alt="{$set_appearance_site_logo_url}" />
{else}
    <span>{$set_appearance_site_logo_text}</span>
{/if}
</div>

You can now change the text or if you prefer, enter the HTML code for a logo image in place of the default text. Remember that if you're using a logo image, it's recommended that you upload the image file into your custom theme directory.

Changing the styles and colour

There are several CSS files used the front end of your website in Pixaria but to customise the masthead area, you only need to work with two of them:

resources/themes/mytheme/css/base.css

resources/themes/mytheme/css/color.css

Open the base.css file in a text editor and look for the text #header which defines the look and feel of the site masthead area including its dimensions and position.

#header {
	padding:0px;
	margin:0px;
	overflow:hidden;
	min-width:980px;
	position:relative;
	zoom:1;
}
	
#header #logo {
	font-family:Georgia, Times, Serif;
	font-weight:normal;
	padding:10px 0 15px 10px;
	margin-right:480px;
	font-size:3.5em;
	position:relative;
}

The styles in base.css are used for positioning and font selection while the color.css file contains details for text, border and background colours and also background images:

#header {
	background:#EEE;
}
	
#header #logo {
	color:#777;
}

Troubleshooting

If, after following these instructions, you have problems and can't see your changes take effect, check the following:

  1. Your custom theme has been selected in the appearance settings control panel.
  2. If template caching is on, that you have flushed the template cache.
  3. The URL or path of your masthead image is correct (test it) and that the CSS has no mistakes in it.
  4. That the location of your CSS template is correct (see above). If it isn't and Pixaria can't find it, it will use the default template instead which won't have your customisations in.
blog comments powered by Disqus


Last edited on Monday July 11 2011 at 08:53:34