9 replies to this topic

[jkegley]

How do I change the font and add a custom divider (such as a dot graphic) between each of the Primary Nav Bar items? You can find a very simple example of what I am talking about at KevinandAmanda.com. Thanks.

[catrina]

You can use CSS code added to the CSS Rules box in the Custom Code settings. For further instructions on how CSS works and how it can be used to create the customization you're looking for, please see this documentation: http://www.pagelines...iki/Custom_CSS. For more specific tutorials on CSS you can use, see here: http://w3schools.com/css/default.asp (Specifically, the Styling Fonts and Styling Links tutorials)

[jkegley]

I have already tried using the Firebug app to check out the coding of my example website. Unfortunately, it all looks like Greek to me. I don't see anything that looks like it is placing those dots. I assume it is an easy change need to include a graphic divider between menu options. i just do not have the technical knowledge to figure it out.

[Rob]

Okay, on the KevinAndAmanda site, they appear to have included a dot between each of the

tags in the menu and likely did this by some styling which I haven't found. Have you considered writing to them via their Facebook or Twitter accounts?

Have you tried creating a custom menu item with a graphic of the dot and no link?

Lastly, have you looked at the CSS options inside the menu items? Click Screen Options at Dashboard > Appearance > Menus and you'll see you can add CSS specific to your menu items. Check the box for CSS Classes. Each menu item will then have an option to add specific link CSS.

As for the font for the menu:
This is the default generated through your settings:

 .font-sub, ul.main-nav, #secondnav, .metabar, .subtext, .subhead, .widget-title, .reply a, .editpage, #page .wp-pagenavi, .post-edit-link, #wp-calendar caption, #wp-calendar thead th, .soapbox-links a, .fancybox, .standard-form .admin-links, .pagelines-blink, .ftitle small {
	    font-family: "Lucida","Lucida Sans","Lucida Sans Unicode",sans-serif;
	    letter-spacing: 0.1em;
	    text-transform: uppercase;
	}

Just copy that to your Custom Code in CSS Rules and change the Lucida, Lucida Sans, Lucida Sans Unicode and sans-serif to the fonts you wish. Remember there's a priority to this list. The first one, left to right (Lucida) is the primary font choice, then each is secondary if the one before is not found. Select the fonts available ONLY from the list in your Typography section. Change the spacing and transform as you wish.

[jkegley]

OK I am really confused. How do I add a custom menu item with a graphic and no text? I would love to do this but you cannot add a menu item without a link and there is no way (that I know of) to add a graphic instead of the item name text. What do I put in the CSS classes section? I can see that option but I have no idea what to add here to add the graphic before or after the menu item text. That would be a simple fix if I knew the code to enter. The website that I am looking at uses Blogger and they are much different in their setup than we are so I have not bothered asking how they are coding the dot. It is probably a simple menu option for them.

[jkegley]

Oh and what if I want to use a custom font for the menu item text? Your code is great if I am using the fonts available in the topography section but I have added many custom fonts using the font uploader plug in and I want to use them for the menu text. Any ideas for that situation? Thanks.

[Rob]

To answer your query about adding an image into a custom menu link, the answer is quite simple, and I've done this many times. You craft your image link outside the menu, like a Notepad. Creating something like

 <img src="http://www.YOURSITE.com/wp-content/uploads/2012/03/YOURIMAG.png" border="0" valign="middle" height="12" width="10">

Make sure you uploaded the image first, of course. See this in action at http://www.epicurus.com/dining

Under Custom Links, add # where the URL should go, then, copy the entire image URL from the Notepad and add it to the Label field. Save it. Then, slide that menu item up to where you want it placed. Repeat and add this in front of each parent level menu item and one at the end.

You can also do it by following the basic guidance here: http://www.pagelines...-customizations

You put a CSS class... a unique term, in the CSS field. Something like 'jkmenu' (without the single quotes) goes in there, and then later when you're preparing any custom CSS to apply specifically to that class, it will only apply to the items with that class.

If the font is uploaded and is found in your Typography section, you may certainly apply it to the code I provided. What you cannot add are fonts found on your own computer that don't match ones in your Typography section. Why? Because they won't necessarily be found on the visitor's computer. If the font loader plugin gets those fonts into the Typography section, great! If not, I'd not recommend using those fonts.

If you're using PageLines Framework, our Google Fonts plugin just became free on St. Patrick's Day. You might want to use that and add a font found there. I believe there are hundreds of new fonts.

[jkegley]

OK, I followed your instructions using a custom menu item and the graphic is not showing. Any idea what I might have done wrong? I entered "#" in the URL and "" in the label.

[jkegley]

I figured out my error. I was missing a quotation.

[Rob]

I think the problem is you have a ; where it doesn't belong here: ...png"; border...