• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 8 posts ] 
Author Message
 Post subject: Image File as a header
PostPosted: Sat Jan 29, 2011 3:55 pm 
Offline
Forum Members
Forum Members

Joined: Sat Jan 29, 2011 3:50 pm
Posts: 32
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:
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;


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Image File as a header
PostPosted: Sat Jan 29, 2011 7:51 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Oct 25, 2006 8:29 pm
Posts: 4968
Location: Raalte, the Netherlands
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Image File as a header
PostPosted: Thu Feb 03, 2011 2:50 am 
Offline
Forum Members
Forum Members

Joined: Sat Jan 29, 2011 3:50 pm
Posts: 32
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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Image File as a header
PostPosted: Thu Feb 03, 2011 3:55 am 
Offline
Forum Members
Forum Members

Joined: Sat Jan 29, 2011 3:50 pm
Posts: 32
I still have not gotten this to show up....

Template Code:
Code:
<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:
/* 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;
}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Image File as a header
PostPosted: Fri Feb 04, 2011 1:20 am 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12664
Location: Arizona
It would help if you gave a link to site...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
Image


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Image File as a header
PostPosted: Fri Feb 04, 2011 3:23 pm 
Offline
Forum Members
Forum Members

Joined: Sat Jan 29, 2011 3:50 pm
Posts: 32
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.


Last edited by mtnmchgrl on Sat Feb 19, 2011 12:07 am, edited 1 time in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Image File as a header
PostPosted: Sat Feb 05, 2011 12:07 am 
Offline
Forum Members
Forum Members

Joined: Sat Jan 29, 2011 3:50 pm
Posts: 32
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;
;D

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 :)


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Image File as a header
PostPosted: Sat Feb 05, 2011 6:57 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12664
Location: Arizona
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 ... =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;
}

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
Image


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 8 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Hosting Nation - Managed CMSMS Hosting