Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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.)


  #1  
Old Aug 12, 2009, 04:11 PM
agrossman
 
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:

therunawayspoon.com/blog

Thanks so much!
Amy
Attached Thumbnails
Click image for larger version

Name:	spoonicon.jpg
Views:	1978
Size:	6.3 KB
ID:	220  
  #2  
Old Aug 13, 2009, 11:19 AM
Flynn's Avatar
Flynn
 
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.
  #3  
Old Aug 13, 2009, 03:45 PM
agrossman
 
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.

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.

Bookmarks



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 08:41 PM
How can I place a rotating/clickable slideshow (SWF etc.) in homepage header (only) ? viewdesigninc Header configuration & styling 4 Mar 31, 2010 02:53 AM
place images as clickable icons on page agrossman Header configuration & styling 3 Aug 13, 2009 02: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 05:36 AM
Want to place icon in Sidebar HalfWayThere Sidebars & Widgets 2 Feb 7, 2009 12:30 PM


All times are GMT -6. The time now is 12:48 AM.


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