Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 20, 2019 at 9:32 am #1111863
    MadRhino

    Good morning,

    I’m using a custom style for my social media sharing icons and I love it. Now, on my new site, there will be a few pages with a black page background. How would I need to go about changing the color of the initial stage of these icons from black to white on just a single page?

    I linked you to both pages “Be social” below so you can see what I mean.

    Many thanks for your time and help.

    June 21, 2019 at 3:55 am #1112174
    Rikard

    Hey MadRhino,

    If you want the sharing icons to be white on that page only then you can try this in Quick CSS:

    .postid-11447 .av-share-link a {
    color: #fff;
}

    Best regards,
    Rikard

    June 23, 2019 at 12:42 pm #1112701
    MadRhino

    Thanks for getting back to me, Rikard,

    Unfortunately this doesn’t work for me. Maybe, I should have made it clearer that I’m using a somewhat customized code for these social sharing icons:

    #top #wrap_all .av-share-link,
    #top .av-share-box ul {
    border: 0;
    }

    #top #wrap_all .av-share-link a{
    color: black;
    font-size: 27px;
    }

    #top #wrap_all .av-share-link:hover a{
    background: none;
    color: #22b3ed;
    }

    Now, this works and looks great on pages with a white page background, but on a portfolio page, which has a black background, I will need these icons to be white. The way I look at this, to make this happen, only the second instance needs changing, but no matter where I try to fit in the snippet with the post ID, it won’t change.

    Many thanks for looking into this again

    June 23, 2019 at 6:34 pm #1112725
    Mike

    Hi,
    Thanks for the feedback, in order to target only pages with a black background we will need to find something unique to them, so in this case you say that they are portfolio pages, so we will use the class single-portfolio like this:

    #top.single-portfolio .av-share-link a {
    color: #fff !important; 
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    June 23, 2019 at 7:40 pm #1112735
    MadRhino

    Hey Mike, your idea to apply the style to all portfolio pages is just awesome. Takes another headache out of the equation …

    Your code works as well. Many thanks for that. I added another instance for the hover state so I won’t loose the blue hover effect.

    Many thanks again. You can close this thread now.

    June 23, 2019 at 8:39 pm #1112745
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Custom Styling of Social Media sharing icons on a single page’ is closed to new replies.