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
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 01:47 AM.


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