Page 1 of 1

Changing a Text logo to an image

Posted: Mon Jul 02, 2012 10:15 pm
by PeteMuzz
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?

Re: Changing a Text logo to an image

Posted: Tue Jul 03, 2012 5:40 am
by staartmees
<h1 id="name-text" class="logo-name"><a href="#"><img src="path-to-image.jpg" width="xx" height="yy"></a></h1>
<div id="slogan-text" class="logo-text">scenic
retreat</div>

Re: Changing a Text logo to an image

Posted: Tue Jul 03, 2012 11:09 pm
by PeteMuzz
Thanks for the help. I've entered the code into the template but it doesn't show anything? Does something need added in the logo section of the style sheet to identify it as an image?

The logo is a PNG file so it doesn't have any background. This shouldn't make a difference should it?

Thanks for your help. Its really appreciated.

Pete

Re: Changing a Text logo to an image

Posted: Wed Jul 04, 2012 6:35 am
by staartmees
try with the full path to the image

<img src="http://www.websitename.ext/cms/uploads/images/image.jpg" width="xx" height="yy">

Re: Changing a Text logo to an image

Posted: Wed Jul 04, 2012 11:21 pm
by PeteMuzz
Still nothing....

Its the only major stumbling block i'm having. Everything else seems to be coming along nicely.

Re: Changing a Text logo to an image

Posted: Thu Jul 05, 2012 5:39 am
by staartmees
do you see the img-tag in the html-code of the page?

Re: Changing a Text logo to an image

Posted: Thu Jul 05, 2012 5:42 pm
by Dr.CSS
As always, a link to the site/page really helps us help you...

Re: Changing a Text logo to an image

Posted: Sat Jul 07, 2012 5:06 pm
by PeteMuzz
Hi all

On my tablet I could see an image that failed to load (blue logo with a ?) but on my laptop I can't see anything.

the website link is www.cumbrianrun.co.uk. The difficulty I have is that its a business site so I can't make it active until its ready.

Re: Changing a Text logo to an image

Posted: Sun Jul 08, 2012 8:30 pm
by Dr.CSS
I make a mysite.com/subfolder CMSMS install to test changes etc. till it's ready then move it to the root, sorry but w/o a real link it makes it hard to help...

Re: Changing a Text logo to an image

Posted: Sun Jul 08, 2012 10:21 pm
by PeteMuzz
Hi

I'm not sure how to do that and i'm incredibly desperate, so for the next 24 hours i'm going to activate the site. Please take a look at

www.cumbrianrun.co.uk.

Any help is really appreciated.

Re: Changing a Text logo to an image

Posted: Mon Jul 09, 2012 6:36 am
by Rolf
Give class some fixed height:
.logo
{
...
...
height: 158px;
}

Missing quote:
<h1 id="name-text" class="logo-name"><a href="#"><img src="uploads/high_tour/finallogo.png" width="486" height="158"></a></h1>

Looks like image doesnt exist: uploads/high_tour/finallogo.png
Check for file present or spelling...


grtz. Rolf

Re: Changing a Text logo to an image

Posted: Mon Jul 09, 2012 6:46 am
by SimonJ
Yes, it is to do with the quoting.

Code: Select all

 <img src="uploads/high_tour/finallogo.png width=" 486"="" height="158">
Also the image, even if quoted correctly is missing.

Re: Changing a Text logo to an image

Posted: Mon Jul 09, 2012 12:42 pm
by PeteMuzz
That did the trick!

You are both wonderful wonderful people!!!! Thank you so much.

Re: Changing a Text logo to an image

Posted: Mon Jul 09, 2012 1:10 pm
by SimonJ
3) After your problem is solved add [Solved] in the subject
[added] If you are the originator of the topic, you can click on the 'modify' button on the first post in the topic. This will provide a form which allows you to edit the subject, and even the content... please add [Solved] to the beginning of the subject, once your topic has been resolved, and click 'Save'

http://forum.cmsmadesimple.org/viewtopi ... 40&t=17166

;D