Home › Forums › Free Themes › Signify › Mouse hover color in pages menu and submenu
Tagged: Mouse hover color
- This topic has 14 replies, 5 voices, and was last updated 2 years, 6 months ago by valita.
-
AuthorPosts
-
November 14, 2020 at 3:47 pm #138549KonstantinosGiannopoulosParticipant
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?November 17, 2020 at 12:04 am #138649wensolutionsKeymasterHello,
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.
November 22, 2020 at 10:12 pm #139175seeuropeParticipantHello. 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
November 23, 2020 at 12:44 am #139202wensolutionsKeymasterHello,
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.
November 23, 2020 at 1:16 pm #139230seeuropeParticipantThank you. What code can I use to center the button under the image? It’s left aligned right now.
November 23, 2020 at 11:55 pm #139258wensolutionsKeymasterHello,
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.
You can consider hiring a freelancer to get the feature.
Regards.
April 10, 2022 at 8:51 pm #180871valitaParticipantHi 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: #8f77b6I hope you can help me with these two matters!
Best regards,
ValentinaApril 11, 2022 at 12:39 am #180911sanamKeymasterHello @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.htmAs 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,
ThemepalaceApril 11, 2022 at 7:35 am #180925valitaParticipantHello @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,
ValentinaApril 11, 2022 at 11:52 pm #180950sanamKeymasterHello @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,
ThemepalaceApril 12, 2022 at 6:36 am #180970valitaParticipantHello @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,
ValentinaApril 12, 2022 at 7:33 am #180976sanamKeymasterPlease add this CSS
button[type=”submit”] {
background-color: #8f77b6 !important;
}April 12, 2022 at 11:17 am #180990valitaParticipantthank you for the reply! Unfortunately, that didn’t work, the search button still appears orange…
April 12, 2022 at 11:26 pm #181001sanamKeymasterCan 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.
April 13, 2022 at 2:56 am #181003 -
AuthorPosts
- You must be logged in to reply to this topic.