Question regarding pixel menu bar
 

Hello
I would like to modify the menu bar of the Atahualpa Theme by using only jpeg or bmp files (because of the special font I want to display).
So i have created 2 images for BLOG, HOME, ABOUT, CONTACT (2 because i want hover).
Till now figured out where to modify in Add CSS inserts...

div#menu1 ul.item-page-X (X=BLOG number) (HOME, ABOUT etc)
background: url(http:// my_site/folder/theme/images/blog.jpeg) center no-repeat !
}

div#menu1 ul.item-page-X, Y, Z a:link,
----------||------------------------- a:active,
----------||------------------------- a:visited {
visibility: hidden;
}

But the ul.item-page is not acting like a link... :( I have no ideea how to transform that element in a link element...
Or, same problem, solution 2 would be leaving "div#menu1 ul.item-page-X a:..." visible... and adding a "<SPAN>text</SPAN>" insede the <a>....</a> line of code, meaning I want this:
"<a href="http://www.XXX...." >Blog</a>"
to become:
<a href="http://www.XXX...." ><span>Home</span></a>
Can this be made only by Add CSS inserts? Or should I mess-up the PHP? Also here have no clue to solve the problem.
Searched the forum for a week and found no similar question...
If some of you guys could help me, I would appreciate!
10X!!!

Try this - putting in your own page ID's

Hi Jugledad and 10x for taking attention to my problem, but i'm affraid it wont help, because text in <a> is still visible in your solution.

Here is the code I use in Add CSS Inserts:

/*Image MENU PAGES*/

ul.rmenu2 {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

ul.rMenu li {
float:left;
}

ul.rMenu a {
display:block;
width:130px;
height: 10px;
}


div#menu1 li.page-item-43 {
background: url(http://www....home1.png) no-repeat center !important;
}
div#menu1 li.page-item-43:hover {
background: url(http://www.....home2.png) no-repeat center !important;
}


div#menu1 li.page-item-2 {
background: url(http://www.....picA1.png) no-repeat center !important;
}
div#menu1 li.page-item-2:hover {
background: url(http://www.......picA2.png) no-repeat center !important;
}


div#menu1 li.page-item-31 {
background: url(http://www......picB1.png) no-repeat center !important;
}
div#menu1 li.page-item-31:hover {
background: url(http://www......picB2.png) no-repeat center !important;
}


div#menu1 li.page-item-43 a:link,
div#menu1 li.page-item-43 a:active,
div#menu1 li.page-item-43 a:visited {
visibility:hidden;
}

div#menu1 li.page-item-2 a:link,
div#menu1 li.page-item-2 a:active,
div#menu1 li.page-item-2 a:visited {
visibility:hidden;
}

div#menu1 li.page-item-31 a:link,
div#menu1 li.page-item-31 a:active,
div#menu1 li.page-item-31 a:visited {
visibility:hidden;
}

Also Button BLOG needs the same treatment ... but i am a little confused by it's "li.page-item identifier" his value being li class="page_item current_page_item" but changing when navigate to another page.
BTW: Ata and WP are up-to-date!

Many 10X!!!

Any ideea???

What version of Atahualpa and WP?
What is the url showing the issue?

Sorry for the huge delay... Happy new year to all Atahualpa coders, supporters and users!!!
I am using Atahualpa version 3.4.4 and WP: 2.9.1
I can't provide a link to the site since is o a local server... when it is finished i'll seek some hosting...
Cheers!

Hmmm... no sugesstions?