Blog-Support

Site Header Images

« H E Knowledge :: BCv.6 :: email
posted Thursday, 1 February 2007
If you want to customize your header for your blog, rather than use one of our predesigns. Here are some guidelines that may help you.

  • if you want your header to suit both fixed and fluid layouts, make it 1600 pixels wide by 160 pixels high - all the headers in the Blog-City Skin Manager are currently these dimensions. This is so they work in both the fixed width and fluid layouts
  • if you've decided firmly on a fixed width layout, 760 pixels wide by 160 pixels high will be sufficient
  • to alter the height of the header you need to find the "masthead" CSS and alter the "height" attribute (marked in bold in the example below)

#masthead {
text-align:center;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
background:transparent url(/styles/skins/_headers/nature16.jpg) 0 5px no-repeat;
height:170px;
}

  • the best format to use if the header is a photo is JPEG - use GIF if it's a graphic that uses blocks of colour and doesn't use gradients
  • to ensure fast download, compress your JPEGs with a graphics package such as Photoshop or Fireworks - don't apply too much compression as this will affect the appearance of the image. A good rule of thumb is 80% quality in Fireworks or Medium to High quality in Photoshop. You can download 30 day trials of both these applications from http://www.adobe.com/downloads/

tags:          



Need One-to-One Help?
If you are in any doubt, contact support

Related Posts

Site Header Images

If you want to customize your header for your blog, rather than use one of our predesigns. Here are some guidelines that may help you. if you want your header to suit both fixed and fluid layouts, make it 1600 pixels wide by 160 pixels high

How to add a Flash animation

Instructions on how to add a Flash animation to a blog entry, header, or custom portlet.

Inserting HTML/javascript code to your gutter

Instructions on how to add HTML or Javascript code to your blog's gutter. This can be used for adding AdSense, blog-rings, PayPal Donation buttons, weather pixies, images etc.

Inserting images using HTML

Instructions and examples on how to insert an image using HTML. This can be used in the Basic Editor, widgets, headers, and any other fields where you can input HTML.

Images: GIF format

General information about the GIF image compression mechanism, the way it works, its suggested uses, special characteristics that differentiate it from other image compression mechanisms such as JPEG, and a comparison between their suggested usages.

Images: JPEG format

General information about the JPEG image compression mechanism, the way it works, its suggested uses, special characteristics that differentiate it from other image compression mechanisms such as GIF, and a comparison between their suggested usages.

How do I upload files to my blog?

Instructions on how to upload files to your blog's file space.