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 »

want to place clickable icons in place of links (Home, About, etc.)

Old Aug 12, 2009, 03:11 PM
16 posts · Jun 2009
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:


Thanks so much!
Attached Thumbnails
Click image for larger version

Name:	spoonicon.jpg
Views:	811
Size:	6.3 KB
ID:	220  
Old Aug 13, 2009, 10:19 AM
Flynn's Avatar
3,768 posts · Oct 2008
Munich, Germany
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.
Old Aug 13, 2009, 02:45 PM
16 posts · Jun 2009
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.


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?


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


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
how to place and where to place a sign up box zizi Header configuration & styling 5 Oct 10, 2010 07:41 PM
How can I place a rotating/clickable slideshow (SWF etc.) in homepage header (only) ? viewdesigninc Header configuration & styling 4 Mar 31, 2010 01:53 AM
place images as clickable icons on page agrossman Header configuration & styling 3 Aug 13, 2009 01:17 PM
How to place RSS icons Post, By Email, Comments at botton of each post. sagatr Post-Kicker, -Byline & -Footer 7 Jun 21, 2009 04:36 AM
Want to place icon in Sidebar HalfWayThere Sidebars & Widgets 2 Feb 7, 2009 11:30 AM

All times are GMT -6. The time now is 02:25 PM.

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