• 0
Sign in to follow this  
Followers 0

How to... custom CSS in functions.php

Question

Posted · Report post

I apologise in advance if this has been covered but I can't find anything that matches what I'm after in the forum. I've used a hook in the functions.php file to put advertising and a custom menu on top before the navigation kicks in, but my problem is this. I'm able to show the menu okay, e.g.

 <?php wp_nav_menu( array('menu' => 'topmenu' )); ?>
It shows okay but as a bullet point and I can't figure out how to change the size/text colour etc. I would be happy with the size/font/colour that is used for the date on a single post, e.g. the default style for this (think it's called sword): by ADMIN on MARCH 29, 2011 ?· LEAVE A COMMENT How do I do that? I've tried putting a
div class

Before the wp_nav_menu code but it doesn't seem to make a difference and all I get is a bullet pointed list from the menu. I'd be happy to know how to use one of the styles already there or how to create a new style and use. I did try using the custom css but couldn't get it to work. I know this is something silly I'm doing but it's driving me insane!

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

Hey John, Have you checked out the WP info on using their nav function? You can find it here: http://codex.wordpress.org/Function_Reference/wp_nav_menu You'll see there's an option you can add to the array for a container div. Then, in the CSS, simply style it the way you want. Or, use the class already used for the menus by PageLines.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've tried Kate, and you're right, it does work a little better (though I can't get it to use they style I'm after). I've added this to the custom code css rules section:

Small_headline{
		font-family: Gill Sans, Verdana;
		font-size: 11px;
		line-height: 14px;
		text-transform: uppercase;
		letter-spacing: 2px;
		font-weight: bold;
	}
And then put this in functions.php
     <?php wp_nav_menu( array('container_class' => 'Small_headline', 'menu' => 'topmenu' )); ?>

But it's not doing anything.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry when I say it's not doing anything I mean it's coming out like this: testimage.jpg

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Two things: First, you don't have a class or ID in front of that. (You need to add a "." or a "#" depending on if it's a class or an ID.) An alternative: In the CSS, wherever you see the code currently used for menus, just append your class to those. For instance, if it's something like:

.nav li{}
make yours:
.nav li, .Small_headline li{}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Kate, thanks for all your help. Getting there! You're right, forgot the '.' ??“ only issue I have now is it's still coming up as bullet points. Is there something that would cause that? I've been able to change size/colour etc now.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

to get rid of bullet points using CSS you apply this to the ul element `ul {list-style-type:none;}`

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Adam, the CSS side of things is the only thing I can't get my head around. I have been able to change colour, remove bullet points but it's still now got each menu item on an individual line, here's the code I have

<div class="Small_headline">
	
	            <div style="list-style-type:none; position: relative; left: 0px; top: 68px; height: 100px; width: 200px; padding: 1em;" >
	
	     <?php wp_nav_menu( array('menu' => 'topmenu', 'items_wrap' => '%3$s' )); ?>
	  </div> 

Any help, much appreciated!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

To get list item inline you need to float them. You will have to use whatever CSS you have and apply `ul li {float:left;}` Keep in mind that you will have to "clear" the float potentially as well. Read up on CSS Floats...it can be a tricky beginner concept.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0