Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

How do I add an icon to a page menu link in page menu bar?


  #1  
Old Mar 4, 2009, 12:16 PM
bcorrigan
 
85 posts · Feb 2009
How do I add an icon to a page menu link in page menu bar?

I would like to put an icon in my page menu links. I am using a page menu bar at the top of the header and figured out how to stylize the text and background color. What I want to do now is put a 15x15 px icon to the left of the titles in this bar.

Is there a post here that already covers this topic?

my site in development is at:
http://depts.washington.edu/ophthweb/wordpress/

I want to put the icons in front of the links at the top of the page.

Thanks in advance,

Bill
  #2  
Old Apr 2, 2009, 05:03 PM
bcorrigan
 
85 posts · Feb 2009
I'm still trying to figure out how to do this.
I think the div is called, li .page_item page item-XXX (the page ID), as that's what Web Develper in FF tells me.

I think I want to add some css like:
a {
padding-left: 20px;
background-image: url(/to/file/img.jpg);
background-position: left center;
background-repeat: no-repeat;
}
But I can't figure out where to put this CSS.

thanks for any help,

Bill
  #3  
Old Apr 3, 2009, 07:16 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Try

HTML Code:
ul.rMenu li a {
background-image: url(path/to/image.gif) !important;
padding-left: 30px !important;
}
Adding !important here just to be sure
  #4  
Old Apr 3, 2009, 10:14 AM
bcorrigan
 
85 posts · Feb 2009
Thanks Flynn, that works!

What I want though is to have this a different icon for each menu option. I know the page numbers, so what do you think I need to do call each individual one?

Great Theme.

I love that I can do most of the work w/o editing the files themselves. Really makes the site sustainable by multiple folks.
  #5  
Old Apr 3, 2009, 10:43 AM
bcorrigan
 
85 posts · Feb 2009
Solved it!
I didn't realize until I read a post by jutta that I can put HTML in titles of post/pages.

so what I did was add a div tag around the page title and than added the CSS in the insert section.

Voila!

Great board here at Bytes for All, you never know where you will learn stuff!
  #6  
Old Apr 3, 2009, 11:40 AM
bcorrigan
 
85 posts · Feb 2009
However, problem with my last method, is I don't know how to do an image swap in a hovered stage,

and even worse: the div tags show up in the title field! This will be an accessibility problem!

so I'm back to thinking this has to happen with the ul.rMenu li a CSS.

Drats!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Page tab height issue: page link tabs higher than page menu bar Fux Page & Category Menu Bars 13 Oct 30, 2010 03:42 AM
Feed Icon in page menu bar kkk RSS, Feeds & Subscribing 4 Nov 28, 2009 04:18 PM
[SOLVED] How to add icon and link to logo bar crogers32 Header configuration & styling 7 Sep 18, 2009 06:42 AM
How can I get a category link into the Page Menu Bar? billzarchy@gmail.com Page & Category Menu Bars 1 Jun 8, 2009 01:18 PM
How to add custom page menu bar rinoa3108 Page & Category Menu Bars 2 May 5, 2009 04:33 PM


All times are GMT -6. The time now is 04:00 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.