Jump to content


Photo

Custom Nav in WHP


This topic has been archived. This means that you cannot reply to this topic.
15 replies to this topic

#1 dscouron

dscouron

    Member

  • Members
  • PipPip
  • 29 posts

Posted 06 January 2010 - 09:23 PM

I'm trying to change the look of the nav in the header. I'm running it with dropdown enabled and would like to use a 960px x 35px image as the background, but I'm running into problems. All i'm doing is adding a line in the custom code: # nav {background: url("image location") no-repeat;} When I add this, it appears to white out the entire nav bar. You still get the menu and dropdown but only on mouseover. If you aren't hovering on it, it is just all white. I've verified the image location. Any ideas?

#2 arpowers

arpowers

    Founder

  • Administrators
  • 3270 posts

Posted 06 January 2010 - 11:17 PM

set a background color with this command. Did it find the image ok? e.g. `#nav {background: #HEXCOLOR url(images/yourimage.jpg) no-repeat 0 0;}`

#3 dscouron

dscouron

    Member

  • Members
  • PipPip
  • 29 posts

Posted 06 January 2010 - 11:28 PM

Forgot to mention that I had tried it that way and you don't get the issues where you only see the menu on mouseover. Doesn't use the image though, for instance. #nav {background: #ddd url(images/yourimage.jpg) no-repeat 0 0;} will just make the background of the nav bar flat blue. The original line in styles.css shows the background fine, the only differences being that it's a .png file and it's repeating. eg. background: #072A5A url(images/nav-blue.png) repeat-x 0 0;

#4 arpowers

arpowers

    Founder

  • Administrators
  • 3270 posts

Posted 06 January 2010 - 11:31 PM

ok... to help you I need to know more about the 'desired' result; and what you're getting now. Mockups help :)

#5 dscouron

dscouron

    Member

  • Members
  • PipPip
  • 29 posts

Posted 07 January 2010 - 12:02 AM

no change from the original styles.css gets me:

http://xs.to/share-31EE_4B452431.html

background: #072A5A url(images/nav-blue.png) repeat-x 0 0; gets me:

http://xs.to/share-6EA4_4B452431.html

My goal is to be able to change the nav background so I can control the gradients, something like:

http://xs.to/share-8442_4B452431.html

#6 dscouron

dscouron

    Member

  • Members
  • PipPip
  • 29 posts

Posted 07 January 2010 - 12:08 AM

that would be:

original

using background: #072A5A url(images/nav-blue.png) repeat-x 0 0;
here

what i want

#7 arpowers

arpowers

    Founder

  • Administrators
  • 3270 posts

Posted 07 January 2010 - 06:24 AM

The urls aren't working. Did you try Imgur?

#8 dscouron

dscouron

    Member

  • Members
  • PipPip
  • 29 posts

Posted 07 January 2010 - 02:25 PM

Original: Posted Image

background: #072A5A url(images/nav-blue.png) repeat-x 0 0;:
Posted Image

Desired Result: Posted Image

#9 arpowers

arpowers

    Founder

  • Administrators
  • 3270 posts

Posted 07 January 2010 - 09:25 PM

ok thanks... I'm still confused; as to the problem. So when you set the image it isn't showing up? Where is the green coming from? The nav in WHP uses a sprite (multiple images in one) and when a user hovers or clicks this images is moved around.

#10 dscouron

dscouron

    Member

  • Members
  • PipPip
  • 29 posts

Posted 07 January 2010 - 09:40 PM

Ah, I thought the nav was a single image, being repeated. The green is coming from the hex number when i use: background: #8ec25c url(images/"imageurl") repeat-x 0 0; The #072A5A was a typo, but that would just show a solid blue bar instead of green. I'm pretty sure i could accomplish adding an image at the beginning (left) of nav by adding a line into header.php, but that doesn't really solve the problem of not being able to control the look of the entire nav background.

#11 dscouron

dscouron

    Member

  • Members
  • PipPip
  • 29 posts

Posted 09 January 2010 - 03:23 AM

I tried achieving the same thing by putting:

`
  • `

    into the header.php, which will work to put an image in the nav before the menu starts, but it is treated as another menu item. It has the same padding and on mouseover, turns white since dropdown is enabled. It would be a compromise anyways, though, because this way still wouldn't allow for control over the background image of the nav bar as a whole.

  • #12 dscouron

    dscouron

      Member

    • Members
    • PipPip
    • 29 posts

    Posted 09 January 2010 - 03:24 AM

    correction:

    `
  • `

    #13 dscouron

    dscouron

      Member

    • Members
    • PipPip
    • 29 posts

    Posted 09 January 2010 - 03:28 AM

    `
  • `

    #14 arpowers

    arpowers

      Founder

    • Administrators
    • 3270 posts

    Posted 10 January 2010 - 06:56 PM

    there should be the need to compromise to make this work... and I would recommend just using CSS to do it. (no HTML edits) My issue is I still don't quite understand what we're trying to accomplish. If we're trying to change the background for the #nav bar... a rule like this: `#nav{background: #HEX url(images/yourimage.jpg) no-repeat 0 0;}` should work... Have you figured out how to get your custom image to show up for the nav?

    #15 dscouron

    dscouron

      Member

    • Members
    • PipPip
    • 29 posts

    Posted 11 January 2010 - 01:46 AM

    I got it. I'm setting everything up locally and found that you can't use url(images/yourimage.jpg). Instead you have to use url(http://..full url.../images/yourimage.jpg). Shows the custom image perfectly. Thanks for all the help.

    #16 arpowers

    arpowers

      Founder

    • Administrators
    • 3270 posts

    Posted 11 January 2010 - 08:57 PM

    yes, you have to do that if the image you want isn't inside the theme images folder :)