Changing Pencil

Home › Forums › Automattic › Blog Simple › Changing Pencil

Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 5, 2013 at 10:43 pm #107772 Resolve

    needmoretorque
    Member

    The theme explanation page suggests you can tweak the menu logos.

    How do you:
    (1) Change the pencil to another graphic; and
    (2) Associated the menu tabs with an icon?

    Thanks in advance.

    The blog I need help with is gpevolved.com
    August 6, 2013 at 8:40 pm #137919

    Michelle

    Hi there,

    To change the pencil to a different graphic:

    1. Create the graphic in an image editor. For best results, the new graphic should be 30px wide and 30px high.

    2. Upload the image to your Media Library (Dashboard > Media > Add New), and note the image’s URL.

    3. Next, paste the following CSS into the CSS Editor:

    .top-page .main-navigation > div > ul > li.current-menu-item > a:before, .top-page .main-navigation > div > ul > li.current_page_item > a:before {
    
background: url("http://path/to/your/new/image") no-repeat scroll 50% 0 #BD3040;
    
}

    To give each item in your menu its own icon, repeat the steps 1 and 2 above, creating each graphic and uploading them to your Media Library. You might also need to remove the CSS I gave you for the pencil, because it could conflict with your custom icons.

    After you have done that, you’ll need to assign each menu item a unique CSS class. To do this, go to Appearance > Menu, and, for each item in your menu, click the little down arrow in the right corner and find the box that says “CSS” class. Enter a unique class name for each one. Save your menu.

    Next, use the following CSS to display the icons:

    .main-navigation .your-class-name-here {
    
background: url("http://path/to/your/icon/") no-repeat scroll 50% 0 #BD3040;
    
}

    Repeat the above CSS for each individual menu item, replacing “your-class-name-here” with the class name for that particular item, and replacing the background image URL with the path to the icon you uploaded to the Media Library.

    Let me know how this goes for you, or if you run into any trouble along the way.

    August 6, 2013 at 9:30 pm #137922

    needmoretorque
    Member

    I will give this a try later on. I’ll post if I have any difficulties. Thanks for the quick response, I appreciate it.

    August 6, 2013 at 9:56 pm #137924

    Michelle

    You’re welcome! :)

    August 13, 2013 at 4:45 am #138192

    Michelle

    Hi there, just checking with you. Did you get a chance to give this a try yet?

    August 20, 2013 at 6:13 am #138620

    Michelle

    Hi, checking in with you one more time. Are you all set or do you still need assistance?

    Cheers,

    Michelle

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Changing Pencil’ is closed to new replies.