Changing color of active menu button

  • Author
    Posts
  • #77704

    mashet
    Member

    Hi Yuri,

    I recently changed the background color to a pale gray and the active menu button – the one that indicates the page you are on like ‘Home’ for eg. – remains white and invisible, even though I have customized the color of the menu. How do I make them all appear uniform?

    Also the post body text is typically bunched together whatever font I use. Is there some way of formatting it to look more open with spacing between words and lines?

    Lastly there seems to be something wrong with the search widget. The box seems to be missing. Does removing the search button at the top affect the widget?

    Thanks in advance.

    The blog I need help with is theurgetowander.com.

    #77814

    yuriyportnykh
    Theme Author

    Hi.

    You can use the following CSS code:

    ul.nav a:hover, ul.nav > li.current-menu-item > a { color: #756151; }
    
    p { line-height: 30px; letter-spacing: 1px; }

    I don’t see the search widget in the HTML source code on your site. Did you remove it from Sidebar?

    #77816

    mashet
    Member

    Hi Yuri,

    The menu hover color is sorted, thanks.

    The code for the font changes spacing of titles as well. I only want the post text altered. I tried using it with: .post-text, and the spacing gets wider, but can’t figure out why the line height does not change.

    The search widget is no 3 on my home page. Still not working.

    #77817

    yuriyportnykh
    Theme Author

    I see.

    Try using this to apply the changes to post text:

    .post-text p { line-height: 30px; letter-spacing: 1px;  }

    The code that hides the search bar applies to the widget area as well. I’d suggest replacing the code with:

    #header #search-form {
      display: none;
    }

    Please, let me know if that works for you.

    #77818

    mashet
    Member

    One more thing, when I try changing the title logo colour via the custom panel like before, the entire scheme changes and the background reverts to default. I then have to go to Appearances > background and change it back manually. Any reason why that is happening?

    #77819

    yuriyportnykh
    Theme Author

    I’m not sure why it happens. I’ll let the WP.com staff know, they might have some suggestions for you.

    #77823

    mashet
    Member

    The code for font spacing works fine.

    The search widget now has text that reads ‘ search this website’ that was missing earlier, and works when you hit ‘enter’, but there is no distinct button to click.

    #77825

    yuriyportnykh
    Theme Author

    Looks like you also need to replace this:

    #searchform input[type="image"] {
      display: none;
    }

    with:

    #header #searchform input[type="image"] {
      display: none;
    }

    #77828

    mashet
    Member

    That doesn’t work. No change in the widget and the search button is now visible on the header.

    #77831

    kathrynwp
    Staff

    One more thing, when I try changing the title logo colour via the custom panel like before, the entire scheme changes and the background reverts to default. I then have to go to Appearances > background and change it back manually. Any reason why that is happening?

    Could you show me exactly where you are trying to change your “logo colour”?

    I went into the Customizer and chose a custom colour for the “Site Title.” I saved my changes, and the colour I just selected was still displayed on the front end of my site.

    If you could list out the steps you’re taking that aren’t working as expected, that would be very helpful in trying to figure out what’s not working right. Thanks!

    #77833

    mashet
    Member

    Hi Kathryn,

    I go into the CSS dialogue box and click on ‘colors and backgrounds’. The theme reverts to default when i click on ‘pick your own color’ and then on the color palette.

    Incidentally, I am not able to change the Hi Logo color even via CSS!! Never had a problem before.

    #77834

    kathrynwp
    Staff

    I still haven’t been able to replicate the problem, but I’m wondering if you might be running up against the Customizer’s contrast rules.

    The Customizer has a feature built in, which ensures that any font colours you choose have enough contrast against your selected background colour. Is it possible that you’re choosing a background and font colour that don’t have enough contrast? Do you have the colour codes for the specific background and site title colours you’re trying to use? That may allow me to replicate the problem. Thanks!

    Incidentally, I am not able to change the Hi Logo color even via CSS!! Never had a problem before.

    The reason you’re not able to change the site title with custom CSS is because you’ve already applied a custom colour using the Customizer, which is overriding any custom CSS you added. You can use one method to change the site title, but not both together.

    #77840

    mashet
    Member

    That’s probably it. I switched to default theme colors in the ‘Colors & Background’ section, and then replaced the background via theme configuration.

    That strangely changed the style of the title text! It now has a 3 dimensional, shadow effect that I actually like, even if I have no clue how I achieved it!!

    It also set the search button right, so that was probably just a color contrast issue

    Only, the sidebar turned grey. I need it be white again.

    And I actually like how the default title colour looks on the pale background. I need all other titles: h2, h3, widget titles, comments & replies to be the same shade. Would Yuri have the color code?

    #77843

    mashet
    Member

    OK, I figured out the problem! I had set header color in the theme customization, and that was overriding the CSS commands.

    All I need help with now is changing the sidebar and search form background colors.

    #77844

    mashet
    Member

    I missed out the rectangular box that shows the month on the post thumbnails on the homepage as well as on the posts pages. Need to change that color as well.

    #77859

    kathrynwp
    Staff

    I’ll let Yuri help with the rest of your CSS customizations. You may want to start a new thread if you don’t hear from him soon as it’ll be easier for him to spot your new questions that way.

    #77870

    mashet
    Member

    Thanks for your time Kathryn.

    I managed to change the sidebar color.

    Just need the background colors of the search button and date banners configured. Shall await Yuri’s response.

    #77872

    yuriyportnykh
    Theme Author

    Ok, here’s the code to change data banners background color:

    span.box { background: #894A01; }

    I’m afraid there is no way to change the search button color with CSS, because it’s an image, not an html element. We can hide it though, you can simply enter the text in the search box and hit Enter, I guess that’s what most people do, so it shouldn’t confuse your site visitors.

    #77873

    mashet
    Member

    All sorted.
    Thank you very much for your time Yuri.

    #77874

    yuriyportnykh
    Theme Author

    Glad we worked it out.

The topic ‘Changing color of active menu button’ is closed to new replies.