Add logo to Joomla website

[neilmc]

Im wanting to add our School Logo to our new website which I have been building in Joomla, used a joomla template, but can't seem to add our logo anywhere.

 

 

this is what it looks like now, but I want to add the logo to the top right corner, I have done this by editing the CSS and creating another image with the Logo on, but I get this.....

 

 

I know this happens because ive set in the CSS to no-repeat as I don't want the logo to appear 5 or more times. Is there a way I can set it so that I can have the logo and then just a full bar of green?

 

This is the section of CSS I edited

 

ORIGINAL CSS

.page_bg { background: #fff url(../images/page_bg.png) repeat-x center top; }

.page { min-height: 100%; }

 

AFTER EDITING

.page_bg { background: #fff url(../images/eagle.png) no-repeat; }

.page { min-height: 100%; }

 

ALSO TRIED (BUT NO JOY)

.page_bg { background: #fff url(../images/page_bg.png) repeat-x center top; }

.page_bg { background: #fff url(../images/eagle.png) no-repeat; }

.page { min-height: 100%; }

 

Thanks for Any advice

[penfold]

If you are looking to replace the existing image, you could rename the old one(in case you need to change it back) and rename your eagle image to be the same as your current image. That way you are just updating the existing image. Or is it that you want to add a new image to the existing structure?

[neilmc]

Basically the original image is this........

 

 

Which in the CSS is set to repeat-x so that is is stretched across the page

 

So i have created a new image.....

 

 

But if I set it to repeat-x I get the eagle about 5 times across the page, What I want to do is have the eagle on the top left, and then the rest just a bar of green so yea I want to add my logo some how don't mind how into the page.

 

Hope this makes sence

[beneal]

I don't think what you want is possible with just the image you have there. I'd say there are a couple of options:

1. Create a new image that extends the whole width (or more) of your site, with the logo at one end and the green across the rest. You'd have to experiment with the css so it only shows up to the edge of the banner.

2. Keep the old image (single pixel wide line) then add your new image on top of it. It should look ok just adding the image you've got there, alternatively you could make a png of the Eagle with a transparent background. Use absolute positioning in css to get it in the right place.

[neilmc]

alternatively you could make a png of the Eagle with a transparent background. Use absolute positioning in css to get it in the right place.

 

So to do this, what line would I have to use in the CSS to get it on the page? not really upto speed with CSS so having to just play and see what happens

 

Thanks

[beneal]

You'd need to add your image in the html. Doesn't really matter where but something like:

address/eagle.png

.eagle{
position:absolute;
left:100px;
top:100px;
}

Then experiment with the left and top values to get it in the right place. This does only work properly if you've got a fixed-width site though, it's a bit trickier to make fluid, but still possible.

[featured_spectre]

beneal beat me to it, I would stick with fixed width in this instance as it will be easier, so for example make the site viewable for 1024x600 as this is the standard for older laptops, and the 1024 width range is the current standard for most home users.

[neilmc]

Which file am I looking for to put the address/eagle.png

 

with the Line

 

.eagle{

position:absolute;

left:100px;

top:100px;

}

 

I take it that goes in my template.css?

 

Sorry for all the questions, like I said trying to learn as I go along here.

[featured_spectre]

address/eagle.png

 

"address/" should be the location of the file, so for example it could be

 

http://www.yoursitehere.com/joomla/images/eagle.png 

 

That is an example but hopefully you get what I mean

[neilmc]

address/eagle.png

 

"address/" should be the location of the file, so for example it could be

 

http://www.yoursitehere.com/joomla/images/eagle.png 

 

That is an example but hopefully you get what I mean

 

I understand this part Im just not sure what file im looking for to place it in do I put it in My template.css or is thee another file im supposed to put it in?

 

As I understand I put....

 

.eagle{

position:absolute;

left:100px;

top:100px;

}

 

in my template.css but where am I putting the line...... address/eagle.png

[beneal]

It's in your main html/php file. In your case it's probably called index.php

[featured_spectre]

again you beat me too it, it is in your index.php

 

this line to be precise

 

templates/<?php echo $this->template ?>/images/logo.png

or something similar

 

the file needs to be called logo.png btw