[solved] Using 2 images and centering sitename in header

[elbmw]

Hi,

I have installed CMSMS and have been learning to tweak a few things (Great!) but I'd like to be able to use 2 logos one on the far left and one on the far right of the header and to have the sitename centered in between them.

I have been playing around with the stylesheet trying to change the float: right attribute to float: center but all that does is place the sitename on the Top-left of the page.

This is the section of the code I mentioned above...

div#header h2 {
/* this is where the site name is */
       float: right;
line-height: 1.2em;
/* this keeps IE6 from not showing the whole text */
font-size: 1.5em;
/* keeps the size uniform */
margin: 35px 65px 0px 0px;
/* adjust according your text size */
color: #463066;
}

FYI I am using CMSMS 1.6.6 with CGCalendar module installed and working.

Is this possible to do this and how can I implement it?

Thanks in advance.

[Dr.CSS]

There is no float:center for CSS...

You would have to give the div a width then use margin: 0px auto, 0px is up to you but the auto puts it in the middle of all...

[elbmw]

There is no float:center for CSS...

You would have to give the div a width then use margin: 0px auto, 0px is up to you but the auto puts it in the middle of all...

Hi Dr CSS. Thanks for the prompt reply. I removed the float: right and changed the margin to auto (see below) and it still goes to the top-left of the page.

Can you give me an example of what it is I have to change and where please? As you can tell I'm completely new to CSS.

Thanks again.

div#header h2 {
/* this is where the site name is */
line-height: 1.2em;
/* this keeps IE6 from not showing the whole text */
font-size: 1.5em;
/* keeps the size uniform */
margin: auto;
/* adjust according your text size */
color: #463066;
}

[Dr.CSS]

You would have to give the div a width then use margin: 0px auto, 0px is up to you but the auto puts it in the middle of all...

You should use a new div for this as you are trying to do this to an h2, so make new div and give it a width then whatever other style you want, most times I give something like this a width and a height...

[elbmw]

You would have to give the div a width then use margin: 0px auto, 0px is up to you but the auto puts it in the middle of all...

You should use a new div for this as you are trying to do this to an h2, so make new div and give it a width then whatever other style you want, most times I give something like this a width and a height...

OK so I create a new div in the stylesheet like..

div#sitename {
     width: 100%;   
     margin: auto;
     color: #000000;
}

Do I replace the current reference to the sitename in "div#header h2 {" or do I just place it anywhere in there?

Then do I reference it in the template? Whats the procedure? Sorry but I did say I'm new to all this. I am trying very hard to figure it out but I guess it will take a while.

It may probably be easier to provide me an example of the code and where to place it and how to reference it in the template.

[Dr.CSS]

At this point your best bet is to read some here...

http://www.w3schools.com/default.asp

[elbmw]

OK, I have managed to tweak the site name to center accross the page and add two images to the header as needed.

I did this by tweaking the stylesheet (Layout: Left sidebar + 1 column) by adding a fixed width as suggested by Dr CSS but I didnt need to create a new div as the h2 div is where the site name was located. See code below for more info.
-----------------------------------------------------------------------
div#header h2 {
/* this is where the site name is */
                width: 700px; ->This added a fixed width to the site name, kinda like a word-wrap.
                text-align: center; -> This centered the site name accross the header.
                line-height: 1.2em;
/* keeps the size uniform */
                margin: -120px auto; -> I had to give a negative value to position the site name in the middle, height wise.
/* this keeps IE6 from not showing the whole text */
                font-size: 1.6em;
In addition I removed the margin and the float attributes that were there in my previous posts.
-----------------------------------------------------------------------

The second part showed how to add a second image to the header.
-----------------------------------------------------------------------
/* header, we will hide h1 a text and replace it with an image, we assign a height for it so the image wont cut off */
div#header {
/* adjust according your image size */
height: 150px;
margin: 0px 0px;
padding: 20px 70px;
/* you can set your own image here, will go behind h1 a image */
background: #f4f4f4 url(/uploads/images/logo_1.jpg) no-repeat-x left center;
/* border just the bottom */
border-bottom: 1px solid #D9E2E6;
}
div#header h1 a {
/* you can set your own image here */
background: url(/uploads/images/logo_2.jpg) no-repeat right top;
/* this will make the "a" link a solid shape */
display: block;
/* adjust according your image size */
height: 150px;
/* this hides the text */
text-indent: -999em;
/* old firefox would have shown underline for the link, this explicitly hides it */
text-decoration: none;
}
div#header h1 {
                margin: 0px 0px;
padding: 0px;
/*these keep IE6 from pushing the header to more than the set size*/
line-height: 0;
font-size: 0;
/* this will keep IE6 from flickering on hover */
background: url(/uploads//images/logo_1.jpg) no-repeat left top;
}
-----------------------------------------------------------------------
I dont know if this is the correct way to have done this but it worked for me!

HTH.

[EvrReady]

I am trying to do what elbmw did, but edits that I make dont seem to be correct or edit correctly.
I have logo left and would like to have the Title Centered and a logo right.

I am editing Layout: Top menu + 2 columns

div#header h1 a {
/* you can set your own image here */
background: url(uploads/ngrey/logoCMS.png) no-repeat left top;
/* this will make the "a" link a solid shape */
display: block;
/* adjust according your image size */
height: 100px;
/* this hides the text */
text-indent: -999em;
/* old firefox would have shown underline for the link, this explicitly hides it */
text-decoration: none;
}
div#header h1 {
margin: 0;
padding: 0;
/*these keep IE6 from pushing the header to more than the set size*/
line-height: 0;
font-size: 0;
/* this will keep IE6 from flickering on hover */
background: url(uploads/ngrey/logoCMS.png) no-repeat left top;
}
div#header h2 {
/* this is where the site name is */
float:right;<-- if I chage this to Center, the text goes far right of the page and throws my logoCMS.png way off
line-height: 1.2em;
/* this keeps IE6 from not showing the whole text */
font-size: 1.5em;
/* keeps the size uniform */
margin: 35px 65px 0px 0px;
/* adjust according your text size */
color: #f4f4f4;
}

Noob here, please help.
Thanks

[Dr.CSS]

Like I said in previous post there is no float center, float is used to move something left or right only...