WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Ten theme, navigation, new features and presentation (6 posts)

  1. nicpaice
    Member
    Posted 1 year ago #

    Twenty Ten theme, navigation

    I have got to grips with the basic navigation blocks customising colour, the font and font size. What I am unable to achieve is adding a separator between each button, ideally this separator should look perforated. See lidget.co.uk as my goal

    Again, the roller-over colours I have mastered but what I would like to achieve is a unique colour and highlighted block for the page you current reside upon. Again see “Home” when you enter lidget.co.uk

    My site is hosted at lidgetspares.com

  2. linux4me2
    Member
    Posted 1 year ago #

    For the perforated separator between each button, I would add the following to the bottom of the style.css of your child theme (You really should be working with a child theme of Twenty Ten so your changes aren't overwritten when you upgrade the parent theme.):

    .page_item {
      border-left: 1px dotted #ffffff;
    }

    That should create a dotted border on the left side of every nav button except the currently selected one, which has the class "current_page_item."

    If you want a color and highlighted block for the current page, I think all you'd need would be to add the following to the style.css:

    .current_page_item {
      background-color: #594A42;
    }
  3. nicpaice
    Member
    Posted 1 year ago #

    Thanks linux4me2, this code worked 1st time.
    I take on board your comments re: child theme
    Nick

  4. nicpaice
    Member
    Posted 1 year ago #

    Help, I activated http://www.lidgetspares.com/wp-admin/nav-menus.php and I lost the perforated separators apart from when .current_page_item is in play. My site again is lidgetspares.com

  5. linux4me2
    Member
    Posted 1 year ago #

    LOL Whoops.

    You just lost the class we used earlier. I think if you change:

    .page_item {
      border-left: 1px dotted #ffffff;
    }

    to:

    .menu-item {
      border-left: 1px dotted #ffffff;
    }

    you will be back in business.

  6. nicpaice
    Member
    Posted 1 year ago #

    Yes, I am back in business.
    Nick

Topic Closed

This topic has been closed to new replies.

About this Topic