Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Can I restyle the page menu bar with images?


  #1  
Old Sep 23, 2012, 10:34 PM
coolpillows
 
35 posts · Nov 2010
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.
  #2  
Old Sep 24, 2012, 06:19 AM
juggledad's Avatar
juggledad
 
23,687 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you try a search in the 'Page & Category Menu Bars' forum for 'image'?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Sep 24, 2012, 09:05 AM
coolpillows
 
35 posts · Nov 2010
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
  #4  
Old Sep 24, 2012, 09:27 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Sep 24, 2012, 04:24 PM
coolpillows
 
35 posts · Nov 2010
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!
  #6  
Old Sep 24, 2012, 04:41 PM
juggledad's Avatar
juggledad
 
23,687 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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!
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Sep 24, 2012, 05:41 PM
coolpillows
 
35 posts · Nov 2010
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!
  #8  
Old Sep 24, 2012, 08:53 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Sep 24, 2012, 10:07 PM
coolpillows
 
35 posts · Nov 2010
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.
  #10  
Old Sep 25, 2012, 07:38 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You can just use Ata instead of Atahualpa
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Sep 25, 2012, 05:18 PM
coolpillows
 
35 posts · Nov 2010
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!
  #12  
Old Sep 25, 2012, 05:32 PM
juggledad's Avatar
juggledad
 
23,687 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Sep 26, 2012, 09:51 AM
coolpillows
 
35 posts · Nov 2010
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?
  #14  
Old Sep 26, 2012, 10:01 AM
juggledad's Avatar
juggledad
 
23,687 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
that sounds right
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Sep 27, 2012, 08:41 AM
coolpillows
 
35 posts · Nov 2010
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

Last edited by coolpillows; Sep 27, 2012 at 08:56 AM.
  #16  
Old Sep 27, 2012, 11:30 AM
juggledad's Avatar
juggledad
 
23,687 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I'm not seeing any of your images and getting 404's on them
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old Sep 27, 2012, 12:11 PM
coolpillows
 
35 posts · Nov 2010
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.

Last edited by coolpillows; Sep 27, 2012 at 12:26 PM. Reason: added new thought
  #18  
Old Sep 27, 2012, 12:31 PM
coolpillows
 
35 posts · Nov 2010
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.
  #19  
Old Sep 27, 2012, 01:05 PM
juggledad's Avatar
juggledad
 
23,687 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #20  
Old Sep 27, 2012, 01:39 PM
coolpillows
 
35 posts · Nov 2010
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?
  #21  
Old Sep 27, 2012, 01:49 PM
coolpillows
 
35 posts · Nov 2010
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.

Bookmarks

Tags
page menu bar image, tabs

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Customize the Page Menu w/ Images? imissamerica Page & Category Menu Bars 8 Jan 6, 2012 07:53 AM
How to use images for page menu items? pierrebk4 Page & Category Menu Bars 44 Nov 23, 2011 01:43 PM
Adding Social Images to Page Menu (As Menu Items) justle Page & Category Menu Bars 2 Jan 27, 2011 01:00 AM
[SOLVED] How to restyle the comments. lauretta Comments, trackbacks & pings 3 Nov 17, 2010 07:09 AM


All times are GMT -6. The time now is 01:04 PM.


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