Using an image-based logo instead of text

[JSSupport]

There are two ways to do this. You can use an image or the existing text.

To use an image, follow the steps below:

If you look in your template_css.css file you'll see:

Code:

/* $2 - Header Styles */

Just below that you'll see a few classes; .header-logo, .header-logo h1 a, and .header-logo h2

Change these to read:

Code:

.header-logo {
height:111px;
padding:0px;
}
.header-logo h1 a {
color: #FFF;
padding:0;
margin: 0;
text-decoration: none;
display: block;
width: 360px; /* You can set the width here */
height: 110px; /* Maximum height is 110px */
text-indent: -5000em;
background: url(../images/header-logo.png) no-repeat left center;
}
.header-logo h2 {
color: #8C0000;
padding:0;
margin: 0;
width: 0px;
height: 0px;
display: none;
text-indent: -5000em;
}

Save and upload. You'll see the image appear:



You can create your own using the attached source file.

[Bassman]

Just one question- thanks för the logo. When it´s uploaded the upper part is not close to the upper border of the header.
I´m trying to reduce the hight but its just the lower part of the logo I can adjust.
http://timereg.se

[Granger]

I've been trying this, but I don't get the images.  Any advice?


http://www.lagrangehighschool.org/

There are two ways to do this. You can use an image or the existing text.

To use an image, follow the steps below:

If you look in your template_css.css file you'll see:

Code:

/* $2 - Header Styles */

Just below that you'll see a few classes; .header-logo, .header-logo h1 a, and .header-logo h2

Change these to read:

Code:

.header-logo {
height:111px;
padding:0px;
}
.header-logo h1 a {
color: #FFF;
padding:0;
margin: 0;
text-decoration: none;
display: block;
width: 360px; /* You can set the width here */
height: 110px; /* Maximum height is 110px */
text-indent: -5000em;
background: url(../images/header-logo.png) no-repeat left center;
}
.header-logo h2 {
color: #8C0000;
padding:0;
margin: 0;
width: 0px;
height: 0px;
display: none;
text-indent: -5000em;
}

Save and upload. You'll see the image appear:



You can create your own using the attached source file.

[coachfubu]

HELP!!! I've tried every post on this site. Help is needed.

www.titansaap.org/TAAP

My logo will not show.

My index.php:

Code:

<div class="header-logo">
<h1><a href="<?php echo $mosConfig_live_site;?>/index.php?option=com_frontpage&amp;Itemid=1" title="<?php echo                                                                                    $mosConfig_sitename; ?>">Education</a></h1>
<h2>Template Demo</h2>
</div>

My template_css.css:

Code:

/* $2 - Header Styles */

.header-logo {
height:111px;
padding:0px;
}
.header-logo h1 a {
color: #FFF;
padding:0;
margin: 0;
text-decoration: none;
display: block;
width: 360px; /* You can set the width here */
height: 110px; /* Maximum height is 110px */
text-indent: -5000em;
background: url(../images/header-logo.png) no-repeat left center;
}
.header-logo h2 {
color: #8C0000;
padding:0;
margin: 0;
width: 0px;
height: 0px;
display: none;
text-indent: -5000em;
}

[Kara Hill]

It certainly looks right.  Are you sure you put your image in the right 'images' folder.  You do not use Joomla's Media Manager, you need to FTP to
templates/js_education/images/xxx.jpg

If you were messing with the index.php and template_css.css files a bit, you may want to go back to the original files and start over.

[estice]

Hello

I am using the Joomla School Shack Pack (Joomla! 1.0.13) and my site can be seen here:

http://www.phoenixms.org/

I used the code posted here to change the header of the school site I’m working on (Thanks!). The header (with my logo) looks fine when using IE 7 but when viewing in Firefox (2.0.0.14), Safari, AOL, and IE on a Mac, the text sizing buttons end up on the left side and the main menu items don’t show or work correctly.

Can anyone please help?

[dt8]

Ok, I've gotten the logo to appear, but I have two problems.

I would like a larger logo than 110px height.

I would like to remove the Text Header that (in my case) reads "Education Template Demo"

Any suggestions?

Thx,
Drew

[McMastertwist]

everything right, no problems, thx =)

[josephmethew]

Hi...................



I would like a larger logo than 110px height.

I would like to remove the Text Header that (in my case) reads "Education Template Demo"

Thanks.

Jerry.

pass saliva drug test
<a href="http://www.ASMARTSOURCEADDITIVE.com ">beat drug test[/url]
pass marijuana drug test