Social Media Icon Color

  • Posted in : Renovatio
  • sm-solutions
    Participant

    Can you please explain me why, in some pages, the social media icons I place on the Copyright widget are are all black and white, and I try to change their size or color and they don’t change on the homepage I created with the Demo-1, but on other pages I had already created they change color and size? I like them to be all the same, as part of the default theme design.

    Thank you

    serkan
    Moderator

    Hi,
    I will forward this topic to our developer and i will keep you updated.
    Thanks

    ahmetsali
    Keymaster

    Hi, that’s awkward, default block style css is absent on some pages, you can fix it by adding this custom CSS code to Appearance > Customize > Additional CSS field;

    
    .wp-block-social-links {
        background: none;
        box-sizing: border-box;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        text-indent: 0
    }
    
    .wp-block-social-links .wp-social-link a,.wp-block-social-links .wp-social-link a:hover {
        border-bottom: 0;
        box-shadow: none;
        text-decoration: none
    }
    
    .wp-block-social-links .wp-social-link svg {
        height: 1em;
        width: 1em
    }
    
    .wp-block-social-links .wp-social-link span:not(.screen-reader-text) {
        font-size: .65em;
        margin-left: .5em;
        margin-right: .5em
    }
    
    .wp-block-social-links.has-small-icon-size {
        font-size: 16px
    }
    
    .wp-block-social-links,.wp-block-social-links.has-normal-icon-size {
        font-size: 24px
    }
    
    .wp-block-social-links.has-large-icon-size {
        font-size: 36px
    }
    
    .wp-block-social-links.has-huge-icon-size {
        font-size: 48px
    }
    
    .wp-block-social-links.aligncenter {
        display: flex;
        justify-content: center
    }
    
    .wp-block-social-links.alignright {
        justify-content: flex-end
    }
    
    .wp-block-social-link {
        border-radius: 9999px;
        display: block;
        height: auto;
        transition: transform .1s ease
    }
    
    @media (prefers-reduced-motion:reduce) {
        .wp-block-social-link {
            transition-delay: 0s;
            transition-duration: 0s
        }
    }
    
    .wp-block-social-link a {
        align-items: center;
        display: flex;
        line-height: 0;
        transition: transform .1s ease
    }
    
    .wp-block-social-link:hover {
        transform: scale(1.1)
    }
    
    .wp-block-social-links .wp-block-social-link.wp-social-link {
        display: inline-block;
        margin: 0;
        padding: 0
    }
    .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited {
        color: currentColor;
        fill: currentColor;
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link {
        background-color: #f0f0f0;
        color: #444
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-amazon {
        background-color: #f90;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-bandcamp {
        background-color: #1ea0c3;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-behance {
        background-color: #0757fe;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-bluesky {
        background-color: #0a7aff;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-codepen {
        background-color: #1e1f26;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-deviantart {
        background-color: #02e49b;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-dribbble {
        background-color: #e94c89;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-dropbox {
        background-color: #4280ff;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-etsy {
        background-color: #f45800;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-facebook {
        background-color: #0866ff;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-fivehundredpx {
        background-color: #000;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-flickr {
        background-color: #0461dd;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-foursquare {
        background-color: #e65678;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-github {
        background-color: #24292d;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-goodreads {
        background-color: #eceadd;
        color: #382110
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-google {
        background-color: #ea4434;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-gravatar {
        background-color: #1d4fc4;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-instagram {
        background-color: #f00075;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-lastfm {
        background-color: #e21b24;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-linkedin {
        background-color: #0d66c2;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-mastodon {
        background-color: #3288d4;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-medium {
        background-color: #000;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-meetup {
        background-color: #f6405f;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-patreon {
        background-color: #000;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-pinterest {
        background-color: #e60122;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-pocket {
        background-color: #ef4155;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-reddit {
        background-color: #ff4500;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-skype {
        background-color: #0478d7;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-snapchat {
        background-color: #fefc00;
        color: #fff;
        stroke: #000
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-soundcloud {
        background-color: #ff5600;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-spotify {
        background-color: #1bd760;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-telegram {
        background-color: #2aabee;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-threads {
        background-color: #000;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-tiktok {
        background-color: #000;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-tumblr {
        background-color: #011835;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-twitch {
        background-color: #6440a4;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-twitter {
        background-color: #1da1f2;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-vimeo {
        background-color: #1eb7ea;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-vk {
        background-color: #4680c2;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-wordpress {
        background-color: #3499cd;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-whatsapp {
        background-color: #25d366;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-x {
        background-color: #000;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-yelp {
        background-color: #d32422;
        color: #fff
    }
    
    :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-youtube {
        background-color: red;
        color: #fff
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link {
        background: none
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link svg {
        height: 1.25em;
        width: 1.25em
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-amazon {
        color: #f90
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-bandcamp {
        color: #1ea0c3
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-behance {
        color: #0757fe
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-bluesky {
        color: #0a7aff
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-codepen {
        color: #1e1f26
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-deviantart {
        color: #02e49b
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-dribbble {
        color: #e94c89
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-dropbox {
        color: #4280ff
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-etsy {
        color: #f45800
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-facebook {
        color: #0866ff
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-fivehundredpx {
        color: #000
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-flickr {
        color: #0461dd
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-foursquare {
        color: #e65678
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-github {
        color: #24292d
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-goodreads {
        color: #382110
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-google {
        color: #ea4434
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-gravatar {
        color: #1d4fc4
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-instagram {
        color: #f00075
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-lastfm {
        color: #e21b24
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-linkedin {
        color: #0d66c2
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-mastodon {
        color: #3288d4
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-medium {
        color: #000
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-meetup {
        color: #f6405f
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-patreon {
        color: #000
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-pinterest {
        color: #e60122
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-pocket {
        color: #ef4155
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-reddit {
        color: #ff4500
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-skype {
        color: #0478d7
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-snapchat {
        color: #fff;
        stroke: #000
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-soundcloud {
        color: #ff5600
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-spotify {
        color: #1bd760
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-telegram {
        color: #2aabee
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-threads {
        color: #000
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-tiktok {
        color: #000
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-tumblr {
        color: #011835
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-twitch {
        color: #6440a4
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-twitter {
        color: #1da1f2
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-vimeo {
        color: #1eb7ea
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-vk {
        color: #4680c2
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-whatsapp {
        color: #25d366
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-wordpress {
        color: #3499cd
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-x {
        color: #000
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-yelp {
        color: #d32422
    }
    
    :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-youtube {
        color: red
    }
    
    .wp-block-social-links.is-style-pill-shape .wp-social-link {
        width: auto
    }
    
    :root :where(.wp-block-social-links .wp-social-link a) {
        padding: .25em
    }
    
    :root :where(.wp-block-social-links.is-style-logos-only .wp-social-link a) {
        padding: 0
    }
    
    :root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link a) {
        padding-left: .66667em;
        padding-right: .66667em
    }
    
    .wp-block-social-links:not(.has-icon-color):not(.has-icon-background-color) .wp-social-link-snapchat .wp-block-social-link-label {
        color: #000
    }
    
    sm-solutions
    Participant

    I added those CSS and the icons now display uniform in all pages. But I customised their appearance, gave the background color to transparent and the icon color to black, and they are no longer showing.

    ahmetsali
    Keymaster

    Hi, I just checked your footer and I can see the social icons (black and white) on your footer, I guess you have sorted it out.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register