- This topic has 14 replies, 5 voices, and was last updated 2 years, 8 months ago by
.
-
Posts
-
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?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.
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
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.
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.
You can consider hiring a freelancer to get the feature.
Regards.
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: #8f77b6I hope you can help me with these two matters!
Best regards,
ValentinaHello @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,
ThemepalaceHello @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,
ValentinaHello @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,
ThemepalaceHello @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,
ValentinaCan 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,
ThemepalaceHi @SANAM, thank you so much for your help! The first of the two options (widget) worked!! Amazing 😀
- You must be logged in to reply to this topic.
