Can I restyle the page menu bar with images?
 

I'm trying to use Atahualpa / Wordpress for a site that will have something like this.

https://docs.google.com/open?id=0B8Y...jVmOEpzaFp2Vnc

So I'm guessing that I can use the page menu bar and restyle each page with its own tab.

Or, I'm out of my mind and I should give up now.

So far, I don't see any down and dirty capability to modify a page menu with an image.

did you try a search in the 'Page & Category Menu Bars' forum for 'image'?

Thanks JD. I did a search, but didn't find anything explicitly referring to what I want to do. A little under the surface, I seemed to find some reference to widgets that might do a workaround. One thing I was looking for were instances where code referred to different page menus (menu1, menu2, etc.). As far as I can tell, there's only one that's part of the theme and if I want each of my tabs (page menu items) to have a different image, then I believe that would be the way to do it. Another point in my research thus far, there are plenty of references to using CSS to supply a background gradient like an image, but that's not the same thing. Make sense?

lee

Your image suggest something other than a background image for each menu. You might need to create one image for the entire menu and position hyperlinks over it with CSS or perhaps build an image map which could use a separate image for the hover on each menu item.

Bottom line is this will take some CSS, HTML, and image creation know how. Also you will have to rebuild the menu if you want to add new menu items.

Thanks Larry. I'm going to look into it further. How would I go about getting into the CSS, HTML and so on? I love how Atahualpa provides a great set of tools, but I also like to get under the hood. Do I do that in Wordpress?

BTW, am I barking up the wrong tree when I mention a 'widget?' I might even be thinking plugin, rather than widget, in terms of what I want it to do. I'm going to poke around at some examples of Atahualpa in the wild and see what people are up to.

Thanks again!

Atahualpa has an option 'CSS Inserts' that you can add your own css into or override any existing CSS and it becomes a theme option!

Actually, nothing against the fine work people are doing with Atahualpa, but maybe it's not the theme for me. I'm totally sold on WP and I really like some of the features of Atahualpa. So I just need to decide where to draw the line between how much I want Atahualpa to do and how much I want to do myself. If I can make a theme option that is my own styled menu bar, I'll be a happy camper. Not that I'm going camping or anything. :-)

Thanks again!

Based on my experience with many themes I think Atahualpa makes what you want to do more viable than other themes. No matter what theme you use to implement an image menu like you want will take special coding. Atahualpa makes it easier to integrate than most other themes though as you can replace %pages with the code you want for the menu. Most other themes would require editing the theme files.

That's just my two cents worth and NOT because I am a moderator.

Oh I can definitely see the power of Atahualpa just like I can WP. (although I wish I didn't have to type Atahualpa so often...just doesn't lend itself abbreviation.) I was in no way knocking this theme...just trying to figure out the workarounds. The real strength will show when I actually get this darn site up.

You can just use Ata instead of Atahualpa

If I want to place my very own code, CSS and HTML, into the header, where would I go about that? Obviously, this would be to replace the %page element in Atahualpa. Thanks!

No need to tough the theme code you put your HTML code in the 'Configure Header Area' option - just remove the %pages and put your HTML in it's place. CSS goes in the 'CSS Inserts' option

okay, inching along here, but playing dumb b/c i have a few other things on my mind besides my personal pet projects that make no $$.

1. Full HTML of my menu in the text field of Style & edit Header Area>Configure Header Area; replacing %page with code
2. CSS goes to CSS inserts
3. Image for the menu and associated buttons & hover in: wp-content/themes/atahualpa/images/

Sound right?

that sounds right

Hmm...maybe not quite. (BTW, http://www.leesachs.com is the domain)

Here's my HTML code, in the Configure Header, replacing %page

----------HTML below -----------
<div id="menu1">
<ul>
<li><a id="b_about" href="#"></a></li>
<li><a id="b_consulting" href="#"></a></li>
<li><a id="b_blog" href="#"></a></li>
<li><a id="b_humor" href="#"></a></li>
<li><a id="b_links" href="#"></a></li>

</ul>
<div class="clear"></div>
</div>
-------- end HTML -------
And the CSS

------- CSS below ---------

/* menu Code here */
/* menu1 */

#menu1{
float:left;
width:1305px;
height:56px;
margin:16px 0 0 11px;
margin /**/:16px 0 0 22px;
padding:0 0 0 13px;
background-color: transparent;
background-image: url(navbar2.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#menu1 li{
list-style-type:none;
display:inline;
padding:0;
margin:0;
}

#menu1 li a{
text-decoration:none;
display:block;
float:left;
width:300px;
height:49px;
text-indent:-99999px;
background-repeat:no-repeat;
background-position:-13px 0px;
}

#menu1 li a#b_about{
width:120px;
padding:0px;
background-position:40px 2px;
background-image:url(about.gif);
margin-right: 120px;
}
#menu1 li a#b_about:hover, #menu1 li a#b_about.selected{
background-position:-13px -46px;
}
#menu1 li a#b_consulting{
width:150px;
padding: 0px;
background-position:30px 2px;
background-image:url(consulting.gif);
margin-right:60px;
}
#menu1 li a#b_consulting:hover, #menu1 li a#b_consulting.selected{
background-position:-90px -46px;
}
#menu1 li a#b_blog{
width:190px;
padding:0px;
background-position:30px 2px;
background-image:url(blog.gif);
margin-right:40px;
}
#menu1 li a#b_blog:hover, #menu1 li a#b_blog.selected{
background-position:-134px -46px;
}
#menu1 li a#b_humor{
width:190px;
padding:0px;
background-position:40px 2px;
background-image:url(humor.gif);
margin-right:40px;
}
#menu1 li a#b_humor:hover, #menu1 li a#b_humor.selected{
background-position:-221px -46px; }
#menu1 li a#b_links{
width:190px;
padding:0px;
background-position:50px 2px;
background-image:url(links.gif);
margin-right:40px;
}
#menu1 li a#b_links:hover, #menu1 li a#b_links.selected{
background-position:-300px -46px; }

------ end CSS -----

I tried renaming the menu something unique like MenuSP. I also tried leaving in tr string %page and taking it out. Otherwise this is pretty much following what I said I was doing. I also tried posting this same locally in its own web page & everything worked ok. The only thing which is not implemented is ther active hover image but that shouldn't matter.

Thanks again...!

Lee

I'm not seeing any of your images and getting 404's on them

i actually didn't check those paths, so good point. i can tell you that the images are present on my server in the path i thought i was supposed to put them:
wp-content/themes/atahualpa/images/

BUT...i see that the default for the header image is in the header directory. OTOH, my logo is present in the root of images. where should the menu images go?

- - - - - adding an additional thought after posting the above - - - - - -
I moved the images to the header directory and of course they started showing up rotating in the header ... so that's a no go.

btw, an example of the menu working, outside of WP, is here:
http://leesachs.com/testnavbar/menu.html

None of the hover functions work. This is just POC.

I'm unsure as to what you are trying to do. The hover is working the way you have told it to, the image it moved and you can no longer see it.

are you trying to get it to work where when you hover the gif changes? if you want to do that you need the gif to have two versions of the image and you swap the postion causing the image to shigft showing the other one.

the menu you're seeing as posted above is NOT in WP/ata. that's just what I'm trying to do as implemented in WP. nothing works in that menu b/c it's just a proof of concept to show that the HTML & CSS works fine outside of WP. that code is posted under public_html in my web server. don't even worry about the hover functions, etc. that's not what this is about.

i'm trying to get that to appear in my blog using atahualpa through inserting the above code. between the %logo and %image.

BUT wait there's hope! I just noticed that the entire menu is appearing underneath the header image. if you open your browser window wide enough you can see it peeking out from behind. i think i need to figure out how to get the header to go further down the page. maybe a little extra CSS to do that?

now am i making sense?

i think i answered my own question...it looks sloppy and still a lot to work out, but you can see it sorta working now.
www.leesachs.com - no hover functions. had to add new CSS id to clear space below it.