Support » Themes and Templates » Help with add a class to menu

  • Hi everyone,

    I hope someone can help me. This is the problem;

    I’m making my first WordPress theme. I made my homepage first with html/css (instructions from ‘WordPress themes maken’ by Robbert Ravensbergen <– Dutch). It look like this:
    http://cl.ly/image/101v1J3W1p1V

    Yes, it’s very basic, but I like it :). Now, you might see the problem already. I used this for the links:

    <div id="menu">
    	     <div id="menuitems">
    		 <ul>
    		     <li><a href="#" class="button" />Home</a></li>
    	             <li><a href="#" class="button" />Blog</a></li>
    	             <li><a href="#" class="button" />Services</a></li>
    	             <li><a href="#" class="button" />About us</a></li>
    	             <li><a href="#" class="button" />Contact</a></li>
    		</ul>
                  </div>
    	</div>

    The css of the class “button” looks like this:

    .button {
    	text-decoration:none;
    	text-align:center;
     	padding:3px 14px;
     	border:solid 1px #c4c4c4;
     	-webkit-border-radius:14px;
     	-moz-border-radius:14px;
     	border-radius: 14px;
    	font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
     	font-weight:bold;
     	color:#474747;
     	background-color:#ededed;
     	background-image: -moz-linear-gradient(top, #ededed 0%, #fcfcfc 100%);
     	background-image: -webkit-linear-gradient(top, #ededed 0%, #fcfcfc 100%);
     	background-image: -o-linear-gradient(top, #ededed 0%, #fcfcfc 100%);
     	background-image: -ms-linear-gradient(top, #ededed 0% ,#fcfcfc 100%);
     	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0 );
     	background-image: linear-gradient(top, #ededed 0% ,#fcfcfc 100%);
     	-webkit-box-shadow:inset 0,0,0px 0,0,0px 1,1,1px #d9d9d9,#d9d9d9,#d9d9d9;
     	-moz-box-shadow:inset 0px 0px 1px #d9d9d9;  box-shadow:inset 0px 0px 1px #d9d9d9;}
    
     .button:hover{
     	text-decoration: none;
     	padding:3px 14px;
     	border:solid 1px #c4c4c4;
     	-webkit-border-radius:14px;
     	-moz-border-radius:14px;
     	border-radius: 14px;
     	font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
     	font-weight:bold;
     	color:#474747;
     	background-color:#ededed;
     	background-image: -moz-linear-gradient(top, #ededed 0%, #e8e8e8 100%);
     	background-image: -webkit-linear-gradient(top, #ededed 0%, #e8e8e8 100%);
     	background-image: -o-linear-gradient(top, #ededed 0%, #e8e8e8 100%);
     	background-image: -ms-linear-gradient(top, #ededed 0% ,#e8e8e8 100%);
     	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#e8e8e8',GradientType=0 );
     	background-image: linear-gradient(top, #ededed 0% ,#e8e8e8 100%);
     	-webkit-box-shadow:inset 0,0,0px 0,0,0px 1,1,1px #d9d9d9,#d9d9d9,#d9d9d9;
     	-moz-box-shadow:inset 0px 0px 1px #d9d9d9;  box-shadow:inset 0px 0px 1px #d9d9d9; }

    How can I add this to the menuitems, with the build in menu maker? I use this in the header.php.

    <div id="menu">
            <div id="menuitems">
    	<?php wp_nav_menu(); ?>
    	</div>
    </div

    I know I can add a class in the menu editor (http://cl.ly/image/2P3W1k0c050n), but I want the class default. Can someone help me?

    Thanks,
    Marijn

  • The topic ‘Help with add a class to menu’ is closed to new replies.