CMS Made Simple Forums

Hi All

I am running cmsms 1.2.3 with the grass stain theme and building a site for our local drumming group.

I can follow the doco for the defult style sheets and themes as there is written instructions in there.

However i started using this theme as i like it. I am changing the header but if you look at the site the header doesn't quite fit.
How do i make it fill the whiole white area and centre the image. I have been playing for hous but no availe.

my site: www.wildmoves.com/wmoves

Would it be easier for a beginner to stick with this theme i like or to mod the default cms template to suit the grass stain theme ?

Cheers

Pete

Thanks for moving this to the right topic.

RRR what have i missed out on info for getting help, tried googling centering an image tried it but it doesn't work so any advice would be helpful

Thanks

Pete

Looks like you went back to a modified default theme...

If you have an image in the header that is smaller than it you may need to wrap it in another div sized to the image with margin: 0px auto....

Hi Mark

Yes i went back to a default theme and decided to start with that and modify as it gives me instruction.
Ok so here is my header section from the stylesheet for my layout. Excuse my coding ability, but where do i need these div statements. The image is smaller than the area but i set the bground coulr to match the header.

div#header h1 a {
/* you can set your own image here */
  background: #990000 url(uploads/images/wmheader.gif) no-repeat;
  display: block;
  height: 50px;            /* adjust according your image size */
/*  text-indent: -999em;  this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

Cheers

OK well your template may say this...

   
      {some tag or ? which results in the h1 a}
     

If the image is smaller than the header width wrap it in another div...

   

      {some tag or ? which results in the h1 a}

     

CSS...

#headh1 {
      width:width of image;
      height: image height, if you want;
      padding:0px;
      margin: 0px auto;
}

Hi Mark This is what i have tried but its not displaying the image in the centre, what is wrong ?

this is what i have down in css styplesheet, should i add your hadh1 or modify div#header h1 a {

div#header h1 a {
/* you can set your own image here */
    background: #990000 url(upload/images/wmheader.gif) no-repeat;
  display: block;
  height: 50px;            /* adjust according your image size */
padding:0 px
margin: 0px auto;
/*  text-indent: -999em;  this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}


#headh1 {
      width:400;
      height: image height, if you want;
      padding:0px;
      margin: 0px auto;
}

This is the what i have done in the layout page

{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
 
     
      {cms_selflink dir="start" text="$sitename"}

         
     
  {* End Header *}

but something is not right !!


Cheers

Pete

You have to use px in the width of the div...

#headh1 {
      width:400; should be width:400px;
      height: image height, if you want; don't leave words in here, if not using a height then delete this or leave size blank
      padding:0px;
      margin: 0px auto;
}