Image File as a header

[mtnmchgrl]

I'd like an image file that I have (Jpeg Logo) to be my "header" but I'd also like it to be link clickable to redirect to the home page.

I have gone through several boards trying to find this but all I see are making sections as headers........

I have attempted to include the code in the stylesheet referencing the logo but it's not showing up.....

It may be where I have the logo stored, I don't know. Any help would be appreciated!

Layout: Left sidebar + 1 column
CSS:

Code: Select all

div#header {
/* adjust according your image size */
	height: 100px;
	margin: 0;
	padding: 0;
	background: #999967 url([[root_url]]/images/cms/logoFinal.jpg);
/* border just the bottom */
	border-bottom: 1px solid #D9E2E6;

[RonnyK]

Check the default templates that come with the installation. As they have the headers as a 'header a' as well, making it a link to the homepage.

Ronny

[mtnmchgrl]

Let me re-phrase my question....

If I built a site using HTML/CSS & am in the process of converting it to CMS Made Simple....
How do I code the image that way?

And also...I'm a little confused as to why it's not showing up b/c I have it uploaded via FTP or do I have to upload it thru the image thing in the admin paneL?

[mtnmchgrl]

I still have not gotten this to show up....

Template Code:

Code: Select all

<div id="header">
{cms_selflink dir="start" image="logoFinal.jpg" text="$sitename"}
</div>

Perhaps the stylesheet is where I am screwing up? I don't understand if you have to put the image in the #header or elsewhere. I put it in the #header AND #header a but it still is not working....

StyleSheet Code:

Code: Select all

/* HEADER STYLES */ 
#header {
	clear:both;
	float:left;
        width:100%;
	background: #999967 url([[root_url]]uploads/images/logoFinal.jpg);
	background-repeat:no-repeat;
	background-position:center; 
	height: 101px;
	border-bottom:2px solid #333300;
}

#header p,  #header h1,  #header h2 {
	padding:.4em 15px 0 15px;
	margin:0;
}
#header ul {
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
}
#header ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}
#header ul li a {
	display:block;
	float:left;
	margin:0 0 0 1px;
	padding:3px 10px;
	text-align:center;
	background:#eee;
	color:#000;
	text-decoration:none;
	position:relative;
	left:15px;
	line-height:1.3em;
        background: #999967 url([[root_url]]uploads/images/logoFinal.jpg);
}
#header ul li a:hover {
	background:#369;
	color:#fff;
}
#header ul li a.active,  #header ul li a.active:hover {
	color:#fff;
	background:#000;
	font-weight:bold;
}

[Dr.CSS]

It would help if you gave a link to site...

[mtnmchgrl]

Sorry, I thought my code would be enough. I would really appreciate some help on this, as it's been a few days since I've asked. I cannot find any documentation on this other than how to make the image redirect back to the site (in the smarty tags section) & I have also not found the answer in the forums either.

[mtnmchgrl]

Ok, I have this one half solved.......

The image was not displaying because I was using:
background: #999967 url[[root_url]]/uploads/finalLogo.jpg no-repeat center; instead of just
background: #999967 url(uploads/logoFinal.jpg) no-repeat center;


But the smarty tag code that I had placed in the header of my template to make the .jpg a clickable link back to the homepage was appearing on top of my image as a hyperlink....so I just deleted that all together & now my image doesn't do anything.

Hopefully I can figure out how to do this in less time it took me to wait on the forum

[Dr.CSS]

If you look at a default install template there are a lot of comments as to what does what and what style sheets it can be found in...

For instance...

Left simple navigation + 1 column template used on this page http://multiintech.com/defaultcontent/i ... ge=navleft...

{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet "Layout: Left sidebar + 1 column" *}
<div id="header">

{* this holds the name of the site on the right side *}
<h2 class="headright">{sitename}</h2>

{* this holds a link back to home page and the header left image/logo, text is hidden using CSS *}
<h1>{cms_selflink dir="start" text="$sitename"}</h1>

Looking in Layout: Left sidebar + 1 column...

/* 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: 100px;
margin: 0;
padding: 0;
/* you can set your own image here, will go behind h1 a image */
background: #f4f4f4 url([[root_url]]/uploads/ngrey/bg_banner.png) repeat-x left top;
/* border just the bottom */
border-bottom: 1px solid #D9E2E6;
}
div#header h1 a {
/* you can set your own image here */
background: url([[root_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([[root_url]]/uploads/ngrey/logoCMS.png) no-repeat left top;
}