Home › Forums › Pro Themes › Musicsong Pro › Changing colors and hovers

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 22, 2020 at 8:36 am #126921
    Lavita
    Participant

    Hi there,

    How do I change the colors and hovers?

    For example how do I change the pink hover (#fd2d55) permanently into blue?
    Is there an easy way? Or do I have to change all the #fd2d55 codes in the CSS stylesheet?

    It’s important it shows correctly after theme updates aswell.

    Thanks again guys!

    June 23, 2020 at 12:07 am #126965
    wensolutions
    Keymaster

    Hello,

    Actually we are not quite clear with your query so please explain in detail so that we can be clear enough to help you.

    Also, provide us with your site URL and specific screenshots highlighting the section you have mentioned so that we can help you with a precise fix.

    Regards.

    June 23, 2020 at 6:26 am #126986
    Lavita
    Participant

    Hello,

    See the link below:

    https://paste.pics/9DOCE

    I would like to change all the pink text color and ‘hovers’ into another color.
    I can not find it in the website ‘customizer’.

    Is there an easy way? Or do I have to change all the #fd2d55 (pink color) codes in the CSS stylesheet?

    It’s important it shows correctly after theme updates aswell.

    Thanks a lot for your feedback!

    June 24, 2020 at 2:09 am #127067
    wensolutions
    Keymaster

    Hello,

    Please provide us with your site URL so that we can provide you with custom CSS.

    Regards.

    June 24, 2020 at 9:47 am #127109
    Lavita
    Participant

    Offcourse see below:

    https://heffo.nl/

    June 25, 2020 at 3:32 am #127150
    wensolutions
    Keymaster

    Hello,

    Please add following given CSS code in Additional CSS section by going to Admin Panel > Appearance > Customize > Additional CSS

    .main-navigation ul#primary-menu li.current-menu-item > a, .main-navigation ul#primary-menu li:hover > a {
    color: #3a2dfd;
}

@media screen and (min-width: 1024px){
 #masthead .main-navigation ul#primary-menu > li.current-menu-item > a{
  color: #3a2dfd;
 }
}

@media screen and (min-width: 1024px){
 #masthead .main-navigation ul.nav-menu > li > a:hover{
  color: #4dfd2d;
 }
}

.btn:hover, .btn:focus {
    background-color: #fd832d;
    color: #fff;
}

    You can replace color code(#fd832d) as per your requirement.

    Hope this helps.

    If you have any queries further, let us know.

    Thank you.

    June 30, 2020 at 5:07 am #127453
    Lavita
    Participant

    Hello,

    This really helps for the main navigation menu. Thank you.
    Could you create a CSS code to replace all pink in one go?

    Because now there still is a lot of pink elements in the website, see printscreen below:

    https://paste.pics/9FSWG

    Hope you can help me again, thanks a lot!

    July 1, 2020 at 7:49 am #127591
    wensolutions
    Keymaster

    Hello,

    Please provide us with specific link of the page where you are willing to change the pink color text to other color so that we can provide you with custom CSS as we are unable to find the page where you are willing to change the color of text.

    Regards.

    July 6, 2020 at 4:57 am #127880
    Lavita
    Participant

    Hello,

    Offcourse, see the following links and scroll down:

    https://heffo.nl/
    https://heffo.nl/?page_id=2
    https://heffo.nl/?page_id=22
    https://heffo.nl/?page_id=57
    https://heffo.nl/?p=8

    July 6, 2020 at 7:23 am #127886
    wensolutions
    Keymaster

    Hello,

    Please add following given CSS code in Additional CSS section by going to Admin Panel > Appearance > Customize > Additional CSS

    .home .btn{
  border: 2px solid #fafd2d;
}

.widget_media_audio .mejs-button.mejs-playpause-button.mejs-play>button:before, .widget_media_audio .mejs-button.mejs-volume-button.mejs-mute>button:before{
  color: #2332de;
}

.widget_media_audio .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current{
  background-color: #181ede;
}

input[type="submit"] {
   border: 2px solid #255cda;
}

input[type="submit"]:hover{
 background-color: #151bd0;
}

.backtotop {
    background-color: #151bd0;
}

.single .posted-on a {
  background-color: #151bd0;
}

    You can replace color code(#151bd0) as per your requirement.

    Hope this helps.

    If you have any queries further, let us know.

    Thank you.

    July 7, 2020 at 10:10 am #128167
    Lavita
    Participant

    Great this works, thanks a lot!

    July 7, 2020 at 11:43 pm #128235
    wensolutions
    Keymaster

    Hello,

    Glad we could help you.

    Regards.

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