+ Post New Thread
Results 1 to 12 of 12
Web Development Thread, Add logo to Joomla website in Coding and Web Development; Im wanting to add our School Logo to our new website which I have been building in Joomla, used a ...
  1. #1
    neilmc's Avatar
    Join Date
    Nov 2008
    Location
    Edinburgh
    Posts
    301
    Thank Post
    69
    Thanked 19 Times in 17 Posts
    Rep Power
    15

    Add logo to Joomla website

    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.

    capture.JPG

    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.....

    Capture2.JPG

    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

  2. #2


    Join Date
    Sep 2008
    Posts
    1,773
    Thank Post
    323
    Thanked 260 Times in 212 Posts
    Rep Power
    120
    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?

  3. Thanks to penfold from:

    neilmc (19th July 2011)

  4. #3
    neilmc's Avatar
    Join Date
    Nov 2008
    Location
    Edinburgh
    Posts
    301
    Thank Post
    69
    Thanked 19 Times in 17 Posts
    Rep Power
    15
    Basically the original image is this........

    page_bg.png

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

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

    eagle.png

    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

  5. #4
    beneal's Avatar
    Join Date
    Mar 2010
    Location
    Ormskirk
    Posts
    47
    Thank Post
    8
    Thanked 8 Times in 8 Posts
    Rep Power
    20
    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.

  6. Thanks to beneal from:

    neilmc (19th July 2011)

  7. #5
    neilmc's Avatar
    Join Date
    Nov 2008
    Location
    Edinburgh
    Posts
    301
    Thank Post
    69
    Thanked 19 Times in 17 Posts
    Rep Power
    15
    Quote Originally Posted by beneal View Post
    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

  8. #6
    beneal's Avatar
    Join Date
    Mar 2010
    Location
    Ormskirk
    Posts
    47
    Thank Post
    8
    Thanked 8 Times in 8 Posts
    Rep Power
    20
    You'd need to add your image in the html. Doesn't really matter where but something like:
    HTML Code:
    <img class="eagle" src="address/eagle.png">
    HTML Code:
    .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.

  9. Thanks to beneal from:

    nephilim (19th July 2011)

  10. #7

    nephilim's Avatar
    Join Date
    Nov 2008
    Location
    Dunstable
    Posts
    12,004
    Thank Post
    1,631
    Thanked 1,907 Times in 1,416 Posts
    Blog Entries
    2
    Rep Power
    432
    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.

  11. #8
    neilmc's Avatar
    Join Date
    Nov 2008
    Location
    Edinburgh
    Posts
    301
    Thank Post
    69
    Thanked 19 Times in 17 Posts
    Rep Power
    15
    Which file am I looking for to put the <img class="eagle" src="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.

  12. #9

    nephilim's Avatar
    Join Date
    Nov 2008
    Location
    Dunstable
    Posts
    12,004
    Thank Post
    1,631
    Thanked 1,907 Times in 1,416 Posts
    Blog Entries
    2
    Rep Power
    432
    <img class="eagle" src="address/eagle.png">

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

    Code:
    <img class="eagle" src="http://www.yoursitehere.com/joomla/images/eagle.png">
    That is an example but hopefully you get what I mean

  13. #10
    neilmc's Avatar
    Join Date
    Nov 2008
    Location
    Edinburgh
    Posts
    301
    Thank Post
    69
    Thanked 19 Times in 17 Posts
    Rep Power
    15
    Quote Originally Posted by nephilim View Post
    <img class="eagle" src="address/eagle.png">

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

    Code:
    <img class="eagle" src="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...... <img class="eagle" src="address/eagle.png">

  14. #11
    beneal's Avatar
    Join Date
    Mar 2010
    Location
    Ormskirk
    Posts
    47
    Thank Post
    8
    Thanked 8 Times in 8 Posts
    Rep Power
    20
    It's in your main html/php file. In your case it's probably called index.php

  15. #12

    nephilim's Avatar
    Join Date
    Nov 2008
    Location
    Dunstable
    Posts
    12,004
    Thank Post
    1,631
    Thanked 1,907 Times in 1,416 Posts
    Blog Entries
    2
    Rep Power
    432
    again you beat me too it, it is in your index.php

    this line to be precise

    Code:
    <img src="templates/<?php echo $this->template ?>/images/logo.png" alt="Axe Rescheek - 1st November Joomlaxe Templates"/>
    or something similar

    the file needs to be called logo.png btw

SHARE:
+ Post New Thread

Similar Threads

  1. Add A Logo To The Logon Screen Frame?
    By Ronnie in forum Windows 7
    Replies: 3
    Last Post: 21st January 2011, 02:06 PM
  2. [Ubuntu] forwarding requests to new joomla website
    By ranj in forum *nix
    Replies: 11
    Last Post: 9th February 2009, 01:46 PM
  3. Add VirusScan to Explorer system tasks
    By thom in forum Windows
    Replies: 4
    Last Post: 17th October 2006, 08:27 AM
  4. Do you add value to the learning experience?
    By ITWombat in forum General Chat
    Replies: 21
    Last Post: 26th September 2006, 04:38 PM
  5. Software to add title to an image
    By Kyle in forum How do you do....it?
    Replies: 3
    Last Post: 27th August 2006, 12:00 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •