Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   want to place clickable icons in place of links (Home, About, etc.) (http://forum.bytesforall.com/showthread.php?t=2935)

agrossman Aug 12, 2009 03:11 PM

want to place clickable icons in place of links (Home, About, etc.)
 
1 Attachment(s)
Could you please help me? I would like to place four spoon icons (I have attached one of them) on each page. I want them to be centered on the page below my banner, and they will take the place of these links: Home, Now Cooking, My Food Philosophy, and Cooking with Friends. How can I accomplish this?

This is how it currently looks:

therunawayspoon.com/blog

Thanks so much!
Amy

Flynn Aug 13, 2009 10:19 AM

In your older Atahualpa version the single menu items don't have numbered CSS classes. Replace your functions/bfa_hor_pages.php with one from version 3.4.2

Then use a CSS Insert

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
color: transparent;
background: transparent;
font-size: 1px;
}

div#menu1 ul.rMenu li {
width: 100px; /* width of images */
}

li.page-item-2 {
background: url(/blog/wp-content/themes/atahualpa/images/spoon1.gif) no-repeat scroll center left;
}
li.page-item-14 {
background: url(/blog/wp-content/themes/atahualpa/images/spoon2.gif) no-repeat scroll center left;
}
li.page-item-39 {
background: url(/blog/wp-content/themes/atahualpa/images/spoon3.gif) no-repeat scroll center left;
}

These numbers will be different for your pages, look into the source code of a browser rendered page and watch for <li class="page_item page-item-21">

You may have to adjust the position of the images:
background: url(...) no-repeat scroll center left;
See http://www.w3schools.com/css/css_background.asp


The menu item text is set to transparent here and a size of 1px, so it won't be wider than the image. There may be better ways to do this without having to edit functions/bfa_hor_pages.php.

agrossman Aug 13, 2009 02:45 PM

Thanks so much for your help! I ended up creating my icons in Dreamweaver, and then I cut and pasted the code into HTML/CSS Inserts. I placed the code in Body Top, and the image in my image folder.

However...

I can't seem to move my icons from the top to below the banner. I changed the order in Configure Header Area, but it's not making a difference. It's currently set to %bar2%image%bar1%bar2

Any thoughts?

www.therunawayspoon.com/blog

p.s. I'm a bit fearful to update Atahualpa. First time jitters, I guess.


All times are GMT -6. The time now is 08:17 AM.

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