Home Forums Free Themes Signify Mouse hover color in pages menu and submenu

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #138549

    Hello to all.
    I’am working a website using the Signify theme. And i’am trying to change the colors of the mousehover when clicking the buttons in varius places. The colors of menus/submenus and all are in black. And when the mouse cursor hovers they are turning to pink.
    How can i choose a differend color? Or cancel it so that stays black everywhere?

    #138649
    wensolutions
    Keymaster

    Hello,

    Regarding your query, once please provide us with your site URL so that we can help you with the CSS to fix the color for hover link.

    Also please provide us with the color you want to change for the hover.

    Hoping for your kind co-operation.

    Regards.

    #139175
    seeurope
    Participant

    Hello. The linked words on the pink square buttons on my pages, http://naturallybettercopy.com/services, have changed color and I can’t seem to fix them. They were white and now they’re not. You can’t see the text until you hover over them. Is there a code to fix this?

    Also how can I center the buttons, toward the bottom of my homepage, and have the fill color pink? Right now they are left aligned and outlined. http://naturallybettercopy.com

    #139202
    wensolutions
    Keymaster

    Hello,

    Regarding your query, you can add below given CSS following the path Admin Panel > Appearance > Customize > Additional CSS to change the text hover color in page.

    #page .singular-content-wrap .entry-content a:not(.more-link):not(.button):not(button) {
        color: #131112;
    }

    You can add desired color code as per your requirement.

    Further, you can add below given CSS following the path Admin Panel > Appearance > Customize > Additional CSS to change the button background color and hover text color as well.

    .home .singular-content-wrap .entry-content a:not(.more-link):not(.button):not(button) {
        color: #131112;
    }
    
    .home .wp-block-button .wp-block-button__link {
        background-color: #fc7684;

    You can add desired color code as per your requirement.

    Hope this helps.

    If you have further queries, let us know.

    Regards.

    #139230
    seeurope
    Participant

    Thank you. What code can I use to center the button under the image? It’s left aligned right now.

    #139258
    wensolutions
    Keymaster

    Hello,

    Regarding your query, the button in the screenshot below which you have mentioned is on the left side of the screen and it cannot be aligned center as the button is below the content which is designed on the left side.

    https://prnt.sc/votpv8

    You can consider hiring a freelancer to get the feature.

    Regards.

    #180871
    valita
    Participant

    Hi there,
    I have a similar issue with my Signify themed webpage: https://wins.vsos.ethz.ch
    When I arrive on the main page, the HOME and SOCIAL MEDIA menu icons are already on “hovering”, even though I’m not hovering on them. It is probably, because they are directing to the main site, if you click on them. It still doesn’t make sense, that it’s already on hover and therefore already have another color.
    Furthermore, I would like to change the hover color (and the search color as well as the “go up to start” button when you scroll down to this color: #8f77b6

    I hope you can help me with these two matters!

    Best regards,
    Valentina

    #180911
    sanam
    Keymaster

    Hello @VALITA, Please add this CSS in the Additional CSS

    .main-navigation ul:not(.sub-menu) > li > a:hover,
    .main-navigation ul:not(.sub-menu) > li > a:focus,
    .top-navigation ul:not(.sub-menu) > li > a:hover,
    .top-navigation ul:not(.sub-menu) > li > a:focus,
    #menu-toggle:hover .menu-label,
    button.menu-toggle:hover .menu-label,
    .menu-inside-wrapper .main-navigation .nav-menu ul > li > a:hover,
    .menu-inside-wrapper .main-navigation .nav-menu ul > li > a:focus,
    .menu-inside-wrapper .top-navigation .nav-menu ul > li > a:hover,
    .menu-inside-wrapper .top-navigation .nav-menu ul > li > a:focus,
    button.dropdown-toggle:hover,
    .site-header-menu .menu-inside-wrapper .nav-menu li button:hover,
    button.menu-toggle:hover,
    button.menu-toggle:focus,
    .menu-toggle-close:before,
    .menu-toggle:hover,
    .menu-toggle:focus,
    #menu-toggle:hover,
    #menu-toggle:focus,
    .menu-label:focus,
    .dropdown-toggle:hover,
    .dropdown-toggle:focus,
    .menu-inside-wrapper .main-navigation > .nav-menu > .current_page_item > a {
    color: #FF0000;
    }

    @media only screen and (min-width: 75em) {
    .navigation-classic .menu-inside-wrapper .main-navigation > .nav-menu > .current_page_item > a:before, .navigation-classic .menu-inside-wrapper .top-navigation > .nav-menu > .current_page_item > a:before {
    border-color: #FF0000;
    }
    }

    #scrollup,
    button[type=”submit”] {
    background-color: #FF0000;
    }

    #menu-toggle:hover{
    color: #FF0000;
    }

    Go to Customizer >> Appearance >> Additional Css, paste the above CSS there, and published the site.
    Please use this link for reference https://www.computerhope.com/htmcolor.htm

    As for the HOME and SOCIAL MEDIA menu icons are already “hovering”. it is just to make it easy for the user to know on which page exactly they are on. please remove the link to the homepage from the social media menu and it will get fixed.

    Regards,
    Themepalace

    #180925
    valita
    Participant

    Hello @SANAM,
    Thank you so much for your reply! Both suggestions worked splendidly! I’m so happy about that!
    Some additional questions arised now, still connected to the pre-installed color, i.e. how to change the pre-set color of the following things:
    – links (as e.g. on this page: https://wins.vsos.ethz.ch/the-wins-board/ they are still orange, but I would like the color)
    – the search button on the homepage (still orange, would like to change the color)
    – and if I toggle on the title (the society for women in natural sciences at ETH), it also appears orange (would like to change the color)
    – on the calendar site: “edit calendar” is also in orange
    For now, it’s all the places I see, where the standard color (orange) is still included.

    Your help would be very much appreciated!

    Best regards,
    Valentina

    #180950
    sanam
    Keymaster

    Hello @VALITA, Please add this CSS in the Additional CSS

    #site-footer-navigation li a:hover,
    #site-footer-navigation li a:focus,
    #social-footer-navigation li a:hover,
    #social-footer-navigation li a:focus,
    a:hover,
    .site-info a:hover,
    .site-info a:focus,
    .singular-content-wrap .entry-content a:not(.more-link):not(.button):not(button):not(.wp-block-button__link):not(.wp-playlist-caption),
    #social-footer-navigation li a:hover,
    #social-footer-navigation li a:focus,
    .menu-social-container a:focus,
    .menu-social-container a:hover,
    #site-generator .menu-social-container a:hover,
    .sidebar .widget-wrap li a:hover,
    .sidebar .widget-wrap li a:focus,
    #site-generator .menu-social-container focus{
    color: #8f77b6 !important;
    }

    button[type=”submit”],
    #site-generator #social-footer-navigation a:focus:before,
    #site-generator #social-footer-navigation a:hover:before{
    background-color: #8f77b6;
    }

    Unfortunately, we don’t have the option to change the default color of the entire site on the free version. I suggest you to please check the pro version of this theme.

    Regards,
    Themepalace

    #180970
    valita
    Participant

    Hello @SANAM, thank you so much for your help! It worked like a charm!
    There is still one color that is not changed, that’s the search button (widget) on the start page (still orange): https://wins.vsos.ethz.ch/ Is there any code that I can add to the additional CSS to change the color to purple?

    Thank you so much in advance!

    Best regards,
    Valentina

    #180976
    sanam
    Keymaster

    Please add this CSS

    button[type=”submit”] {
    background-color: #8f77b6 !important;
    }

    #180990
    valita
    Participant

    thank you for the reply! Unfortunately, that didn’t work, the search button still appears orange…

    #181001
    sanam
    Keymaster

    Can you please try this CSS

    .widget.widget_block button.wp-block-search__button {
    background-color: #8f77b6;
    }

    If that does not work try this one

    .widget.widget_block button.wp-block-search__button {
    background-color: #8f77b6 !important;
    }

    Regards,
    Themepalace

    • This reply was modified 2 years, 6 months ago by sanam.
    #181003
    valita
    Participant

    Hi @SANAM, thank you so much for your help! The first of the two options (widget) worked!! Amazing 😀

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.