Welcome to CMS Made Simple

From CMSMS

• Introduction
• Development Enviroment

• Installation
  • Pretty URLs
  • Cyrillic Support
• Upgrading
  • What are the basic steps?
  • Can I jump Versions
  • Why are there no diff versions for release x.yy.z?
  • I am really behind... What can I do?
• Layout and Design
  • Getting Started
  • Modular CSS
  • Page Width
  • Adapt Your Template
  • Header Images
  • SubMenu Heading
  • Menu Manager Node Parameters
• General Help
  • Errors with {} characters
  • Who is that Smarty guy?
  • How to add multiple content blocks
  • How to add php code in a page
  • How to find out username and password
  • How to get HTTPS to work
  • Support for non-standard ports
  • Increasing the maximum length of your content

This page in: English - Deutsch - Français - Svenska - Русский - Norsk - Polski - Nederlands - Español - Lietuvių

How To Change the Header (Logo) Image

The image in the header is specified in the Layout stylesheet that is used by all the templates. You can change the image by:

1. First upload a new image by going to Content -> Image Manager. Then click Browse to locate the new image on your computer and then Save to upload it to the website. Make sure the new image filename does not contain spaces (rename it first if need be).
2. Then go to Layout -> Stylesheets and click on the stylesheet called Layout.
3. Scroll down to find the section shown below and change the filename to match your new file. Do not add any quotation marks to the line.
4. Also modify the height and width to match your uploaded image (i.e. from 80px and 198px as shown). Note that the height needs to be changed in two places:

       div#header {
            margin: 0;
            padding: 0;
            height: 80px;
            background: #385C72;           
            text-align: left;
        }

       div#header h1 a {
            background:  url(uploads/images/logo1.gif) no-repeat 0 12px; 
            display: block;
            height: 80px;
            text-indent: -700em;
            width: 198px;
 
 

Click submit to save your changes to the stylesheet and then browse the site to see your new header image.

Menu Bar over Header Image

If you want to make your main menu bar appear over, or next to, a main header image, this forum post describes how. An excerpt:

You can get the menu to appear beside the logo by playing around with the margins and padding in #top-nav and #menu_horiz, for example try margin-top: -50px; and margin-left: 250px;

Also you can adjust the width of #menu_horiz and float it to the right for some other options.

Two Header Images

Following is one technique for having a header containing two images, one on the left and the other on the right (Adapted from the forum). what you want is a 'liquid' / 'stretchy' page so you need to do most of it in '%'.

<div id="header">
<div id="left">
</div>
<div id="right">
</div>

#header{width:**%}
#left{float:left;width:**;height:**;margin:**;padding:**;}
#right{float:right; bla bla bla}

The widths for left & right can be **px or **%, margins can be same: px or %. You may have to futz around for IE.