Jump to content


Photo
- - - - -

Implementing CSS for navigation background images


  • Please log in to reply
5 replies to this topic

#1 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 05 April 2012 - 08:11 PM

HI there, I would like to learn how to style my navigation more and add background images. For example something cool like this:

Please Login or Register to see this Hidden Content

Any resources you can point me to? If not, a plug-in suggestion is to add something like this in so we can style the nav better since it really defines a site design IMHO. that would be so AWESOME. :) thanks so much for your help! love pagelines!!!!!

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 April 2012 - 08:59 PM

Thanks for the compliment! Let's start with backgrounds. You can apply a background image to the menu on a menu item or whole menu basis. Learn more about doing this here:

Please Login or Register to see this Hidden Content

Similarly, that same link should help you with the background images of various elements of your site. As for identifying those, we strongly recommend

Please Login or Register to see this Hidden Content

which is an add-on tool for Firefox. This helps you to identify CSS elements in your site so you can apply changes correctly. Actually, it's a nifty little tool as you can edit live and see just how things will look before copying and pasting the code to make it standard for all your visitors. This might help a bit:

Please Login or Register to see this Hidden Content

You may also want to take a look at

Please Login or Register to see this Hidden Content

for some guidance with styling menus. With that site, you identify the menu you like, then view source and it gives you examples of the CSS. See the section "Using Custom Code"

Please Login or Register to see this Hidden Content

Hope this helps you get started.

#3 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 05 April 2012 - 09:40 PM

Thanx for the links, both if you... the beavery site nav is quite cool though it uses javascript. I recommend starting off with css as rangelone also stated. If you have any questions, don't hesitate to ask.

#4 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2920 posts
  • LocationWV
  • Country: Country Flag

Posted 06 April 2012 - 12:47 AM

That site is using a pretty cool effect that simply applies a left margin depending upon which menu item you are hovering on. I have no idea how to do it, but it's cool regardless! There are several CSS menu hacks available on the web. You just have to search for them. :)

#5 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 06 April 2012 - 01:01 AM

thanks everyone! on a related note, is there a way with pagelines that would style background for sections and not just the whole background?

#6 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2920 posts
  • LocationWV
  • Country: Country Flag

Posted 06 April 2012 - 01:11 AM

Glad we could help. :)

To change the background for individual sections, you will need to add a background CSS elements to make it work (for each section).

Keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded

Please Login or Register to see this Hidden Content

and check out

Please Login or Register to see this Hidden Content

for more info. Also please be sure to watch our Firebug video tutorial

Please Login or Register to see this Hidden Content

.

And if you consider this topic resolved, please accept an answer. Thanks!