Jump to content


Photo
- - - - -

How to... custom CSS in functions.php


  • Please log in to reply
8 replies to this topic

#1 johnferris

johnferris

    Member

  • Members
  • PipPip
  • 13 posts

Posted 11 May 2011 - 01:32 PM

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.

Please Login or Register to see this Hidden Content


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

Please Login or Register to see this Hidden Content


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!

#2 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 11 May 2011 - 03:18 PM

Hey John, Have you checked out the WP info on using their nav function? You can find it here:

Please Login or Register to see this Hidden Content

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.

#3 johnferris

johnferris

    Member

  • Members
  • PipPip
  • 13 posts

Posted 11 May 2011 - 03:41 PM

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:

Please Login or Register to see this Hidden Content


And then put this in functions.php

Please Login or Register to see this Hidden Content


But it's not doing anything.

#4 johnferris

johnferris

    Member

  • Members
  • PipPip
  • 13 posts

Posted 11 May 2011 - 03:43 PM

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

Posted Image

#5 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 11 May 2011 - 03:54 PM

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:

Please Login or Register to see this Hidden Content


make yours:

Please Login or Register to see this Hidden Content



#6 johnferris

johnferris

    Member

  • Members
  • PipPip
  • 13 posts

Posted 11 May 2011 - 04:06 PM

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.

#7 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 11 May 2011 - 10:38 PM

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

#8 johnferris

johnferris

    Member

  • Members
  • PipPip
  • 13 posts

Posted 12 May 2011 - 02:29 PM

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

Please Login or Register to see this Hidden Content


Any help, much appreciated!

#9 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 12 May 2011 - 06:29 PM

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.