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 » Page & Category Menu Bars »

Navigation with images/hovering?


  #1  
Old Jul 5, 2009, 04:43 PM
CDJ
 
6 posts · Jul 2009
Navigation with images/hovering?

First of all I'd like to thank for this wonderful theme. For someone like me, who's never been that much into coding, this literally awesome. Thanks!

I'm trying to finalize a design I've made for some time ago, and have so far succeed pretty well. However, I can't seem to figure out how to change the site navigation.
My intention is to change the navigation into images instead of the original one, either with .css or html. I believe I've found a .css code that allows this, but as I don't really know alot about this, I'm only assuming.
My mock up version of the menu looks like this:

And the .css file I've "created" (with a tutorial) looks like this:

Code:
<ul class="menu">
	<li class="nyheder"><a href="#">nyheder</a></li>
	<li class="holdet"><a href="#">holdet</a></li>
	<li class="kampe"><a href="#">kampe</a></li>
	<li class="omos"><a href="#">om os</a></li>
	<li class="partnere"><a href="#">partnere</a></li>
</ul>

.menu {
	margin: 0;
	padding: 0;
	list-style: none;
	background: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/menu_bg.png)
}
.menu li {
	padding: 0;
	margin: 0;
	height: 34px;
	width: 900px;
	margin-right: 1em;
	list-style: none;
	background-repeat: repeat top left;
}
.menu li a, .menu li a:visited {
	display: block;
	text-decoration: none;
	text-indent: -1000px;
	height: 34px;
	background-repeat: repeat top left;
}
.nyheder {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/nyheder.png); width: 77px;}
.nyheder a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/nyheder_g.png);}
.holdet {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/holdet.png); width: 77px;}
.holdet a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/holdet_g.png);}
.kampe {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/kampe.png); width: 77px;}
.kampe a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/kampe_g.png);}
.omos {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/omos.png); width: 77px;}
.omos a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/omos_g.png);}
.partnere {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/partnere.png); width: 77px;}
.partnere a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/partnere_g.png);}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
(http://www.cdjgfx.dk/menu.css)

Is this possible to create this menu (with a static background as well as hovering images) within this template? If so, how?

Edit: The URL for the site is http://skoven-gaming.dk/wordpress/.. I'm sure that the .css "file" I uploaded are lacking some links and stuff, so guess the link could be somewhat vital.

Last edited by CDJ; Jul 5, 2009 at 04:51 PM. Reason: Added url of my website.
  #2  
Old Jul 6, 2009, 07:08 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
see http://forum.bytesforall.com/showthread.php?t=1981 - post #3
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
next and previous navigation in the consulted category lkjc Page & Category Menu Bars 4 Jun 1, 2009 05:25 PM
Navigation plugin integration nello Page & Category Menu Bars 6 Apr 1, 2009 08:24 AM
disabling left navigation silentone Atahualpa 3 Wordpress theme 3 Mar 9, 2009 07:38 AM
Navigation Breadcrumbs ...recommendations? Shepherd Jim Plugins & Atahualpa 3 Feb 27, 2009 10:49 PM
Centering Page Navigation cks Page & Category Menu Bars 1 Feb 6, 2009 03:23 PM


All times are GMT -6. The time now is 05:56 AM.


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