Changing a Text logo to an image
Posted: Mon Jul 02, 2012 10:15 pm
Hi
I'm completely new to CMSMS and im currently trying to adapt a template (high_tour.xml) to suit my needs. I was getting really into in but I've hit a problem. The template uses plain text for the website title/logo where as I need to chage it so it shows a image as the logo. I can see how it changes in templates such as NCleanBlue but i just can't figure it out in the stylesheet for this template. The details for the logo it has at the moment in the stylesheet is:
/* begin Logo. This is where the title logo is placed */
.logo
{
display : block;
position: absolute;
left: 0px;
top: 24px;
width: 400px;
}
h1.logo-name
{
display: block;
text-align: center;
}
h1.logo-name, h1.logo-name a, h1.logo-name a:link, h1.logo-name a:visited, h1.logo-name a:hover
{
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size: 38px;
text-decoration: none;
letter-spacing: 1px;
padding:0;
margin:0;
color: #ffffff !important;
}
.logo-text
{
display: block;
text-align: center;
}
.logo-text, .logo-text a
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 20px;
padding:0;
margin:0;
color: #F5E8B8 !important;
}
/* end Logo */
And the template shows:
<h1 id="name-text" class="logo-name"><a href="#">High Tour</a></h1>
<div id="slogan-text" class="logo-text">scenic
retreat</div>
How do I change this so it shows a clickable image and not text?
I'm completely new to CMSMS and im currently trying to adapt a template (high_tour.xml) to suit my needs. I was getting really into in but I've hit a problem. The template uses plain text for the website title/logo where as I need to chage it so it shows a image as the logo. I can see how it changes in templates such as NCleanBlue but i just can't figure it out in the stylesheet for this template. The details for the logo it has at the moment in the stylesheet is:
/* begin Logo. This is where the title logo is placed */
.logo
{
display : block;
position: absolute;
left: 0px;
top: 24px;
width: 400px;
}
h1.logo-name
{
display: block;
text-align: center;
}
h1.logo-name, h1.logo-name a, h1.logo-name a:link, h1.logo-name a:visited, h1.logo-name a:hover
{
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size: 38px;
text-decoration: none;
letter-spacing: 1px;
padding:0;
margin:0;
color: #ffffff !important;
}
.logo-text
{
display: block;
text-align: center;
}
.logo-text, .logo-text a
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 20px;
padding:0;
margin:0;
color: #F5E8B8 !important;
}
/* end Logo */
And the template shows:
<h1 id="name-text" class="logo-name"><a href="#">High Tour</a></h1>
<div id="slogan-text" class="logo-text">scenic
retreat</div>
How do I change this so it shows a clickable image and not text?