Premium Theme Support › Themes Harbor › Appetite

Social Media Icons

  • Author
    Posts
  • #157920
    goodimprov
    Member

    Hi!

    A recent update changed how the social media icons behaved so they no longer change color when I hover.
    I used to use this code:

    /* Main – Social Media Menu Style */
    #colophon .social-list li a:hover::before {
    color: #FFFFFF;
    border-color: #FFFFFF;
    transition: background-color 350ms ease-in-out;
    }

    #colophon .social-list li a::before {
    transition: background-color 350ms ease-in-out;
    }

    #toggle-sidebar .social-list li a:hover::before {
    color: #FFFFFF;
    border-color: #FFFFFF;
    transition: background-color 350ms ease-in-out;
    }

    #toggle-sidebar .social-list li a::before {
    transition: background-color 350ms ease-in-out;
    }

    #colophon .social-list li.menu-item-138 a:hover::before {
    background-color: #E1306C;
    }

    #toggle-sidebar .social-list li.menu-item-138 a:hover::before {
    background-color: #E1306C;
    }

    #colophon .social-list li.menu-item-137 a:hover::before {
    background-color: #1DA1F2;
    }

    #toggle-sidebar .social-list li.menu-item-137 a:hover::before {
    background-color: #1DA1F2;
    }

    #colophon .social-list li.menu-item-136 a:hover::before {
    background-color: #3B5998;
    }

    #toggle-sidebar .social-list li.menu-item-136 a:hover::before {
    background-color: #3B5998;
    }

    #colophon .social-list li.menu-item-782 a:hover::before {
    background-color: #FF0008;
    }

    #toggle-sidebar .social-list li.menu-item-782 a:hover::before {
    background-color: #FF0000;
    }

    #colophon .social-list li.menu-item-4098 a:hover::before {
    background-color: #7D7D7D;
    }

    #toggle-sidebar .social-list li.menu-item-4098 a:hover::before {
    background-color: #7D7D7D;
    }

    I’d like to have the social media icons on the bottom of the main page and on the sidebar change color when hovered over.

    Thanks!
    – Dan

    The blog I need help with is: (visible only to logged in users)

    #157927
    goodimprov
    Member
    Original poster

    Okay, a quick update on my progress.

    I’ve found that:

    :root {
    –color-primary-dark: COLOR ;
    –color-primary-base: COLOR;
    –color-secondary-base: COLOR;
    –color-secondary-light: COLOR;
    –color-secondary-lighter: COLOR;
    –color-secondary-lightest: COLOR;
    –color-accent-dark: COLOR;
    –color-accent-base: COLOR;
    –color-accent-light: COLOR;
    –color-white: COLOR;
    –color-red: COLOR;
    }

    (with COLOR being substituted for the color hex code I want) will change some default colors. It’s still not what I want but I can at least get rid of the yellow accents on things on my site. I just need to figure out how to change the icons on hover now.

    Thanks!

    #157952
    tarasdashkevych
    Theme Author

    Hi,

    “Okay, a quick update on my progress. I’ve found that…”
    A new version of the theme comes with more flexible colors. Now it’s much easier to change default colors using a custom CSS and global colors.

    —

    Please use this custom CSS instead of the custom CSS you’ve posted in your initial post:

    
/* Main – Social Media Menu Style */
#colophon .social-list li a:hover,
#toggle-sidebar .social-list li a:hover {
color: #FFFFFF;
border-color: #FFFFFF;
transition: background-color 350ms ease-in-out;
}

#colophon .social-list li.menu-item-138 a:hover,
#toggle-sidebar .social-list li.menu-item-138 a:hover {
background-color: #E1306C;
}

#colophon .social-list li.menu-item-137 a:hover,
#toggle-sidebar .social-list li.menu-item-137 a:hover {
background-color: #1DA1F2;
}

#colophon .social-list li.menu-item-136 a:hover,
#toggle-sidebar .social-list li.menu-item-136 a:hover{
background-color: #3B5998;
}

#colophon .social-list li.menu-item-782 a:hover,
#toggle-sidebar .social-list li.menu-item-782 a:hover{
background-color: #FF0008;
}

#colophon .social-list li.menu-item-4098 a:hover,
#toggle-sidebar .social-list li.menu-item-4098 a:hover{
background-color: #7D7D7D;
}

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • The topic ‘Social Media Icons’ is closed to new replies.