Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 19
  1. #1
    Junior Member
    Join Date
    Aug 2010
    Posts
    11
    Member #
    23239
    I'm trying to build a template...

    Look at my nav bar:
    AR-Auto

    How do I add a background image to that?


    Also how do I change the link colors?
    Like the hover, active, etc..

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Are you using Firebug? It is a great help in fixing CSS issues...

    In your CSS you have
    Code:
    #navbar { min-height: 50px; background: #000; overflow: hidden; }
    .navbar { margin: 0px 0 0 0; list-style-type: none; padding: 0; }
    .navbar li { display: inline; margin: 0; }
    .navbar li a { color: #fff; text-decoration: none; padding: 12px;}
    .navbar li a:hover { background: #fff; color: #000; padding: 12px; }
    Try this
    The stuff in red are my changes - you need to change the navbar classes to id's and then the hover colour change should work.
    Code:
    #navbar { min-height: 50px; background: #000; overflow: hidden; }
    #navbar { margin: 0px 0 0 0; list-style-type: none; padding: 0; }
    #navbar li { display: inline; margin: 0; }
    #navbar li a { color: #fff; text-decoration: none; padding: 12px;}
    #navbar li a:hover { background: #fff; color: #000; padding: 12px; }
    Put the background image in the navbar ul if you only want the image to show where it is currently grey.
    Code:
    #navbar ul {background:  url(path-to-image) no-repeat;}
    If you want the whole navbar, (both grey and black areas) to have the image, put it in the navbar only.
    Code:
    #navbar {background:  url(path-to-image) no-repeat;}
    Change the repeat as appropriate for the image you are using.

    Hope this helps,

    Cheers,
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Junior Member
    Join Date
    Aug 2010
    Posts
    11
    Member #
    23239
    It messed up the look of my site..
    Check it out:
    www.lfswear.com/template/weird

    But then I changed some stuff, so now that kinda fixed (But still no background image)
    www.lfswear.com/template/weird2

    and heres how it used to look:
    www.lfswear.com/template

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    I see what you mean - the navbar is higher now but the mouseover colour change seems to be working.

    If you want a background image you have to specify a location and a filename - in your CSS for the navbar you have
    Code:
    {background:none repeat scroll 0 0 #000000;
    min-height:18px;
    overflow:hidden;
    }
    If you specify "none" it will show no image.

    I strongly advise you to use Firebug to help check out your CSS - Firebug

    What is the location and filename of the image you want to use?
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    Junior Member
    Join Date
    Aug 2010
    Posts
    11
    Member #
    23239
    I have firebug, I use it a little, but I dont know how to use it...
    I see the none part, but when I try to edit it dissapears!

    location is: images/navbar.jpg

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    OK - let me see what I can do.. give me five minutes...
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Can you tell me the full path to the image?
    is it :

    http://www.lfswear.com/template/weir...ges/navbar.jpg ?

    I'm trying to re-create the problem so i can see how to fix it...
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  9. #8
    Junior Member
    Join Date
    Aug 2010
    Posts
    11
    Member #
    23239
    yes

  10. #9
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    OK - when I type that into the address bar i get an error message instead of the image - can you double-check the path?
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  11. #10
    Junior Member
    Join Date
    Aug 2010
    Posts
    11
    Member #
    23239
    http://www.lfswear.com/navbar.png

    i dont know why that other link doesnt work...
    really weird... :/

    BUT I GOT IT TO WORK!! THANK-YOU SO MUCH!!


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:42 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com