Change Social Media Icon Colour in Widget Area

  • I have changed my social media icon widget (It’s bigger and I had the option to center them) – but I lost my colours.
    I will copy the CSS I have in my custom CSS editor below. Does anyone know why it’s not working on my new widget and what I need to do to fix it?

    /*—— Start sidebar styling——*/
    @import url(https://fonts.googleapis.com/css?family=Niconne);
    .widget {
    background: transparent url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAADCAIAAADqcT3hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACVJREFUeNpifPfuHcMoIA4w/v//fzQUiAQs79+/Hw0FIgFAgAEAJqEIm4nV/SwAAAAASUVORK5CYII=”) repeat-x scroll 0 24px;
    text-align: center;
    }
    .widget-title {
    background: #fff;
    display: inline-block;
    font-family: “Niconne”;
    font-size: 24px;
    text-align: center;
    text-transform: lowercase;
    color: #ffb5c4 !important;
    margin-bottom: 0;
    padding: 0 12px;
    }
    .widget-title::before, .widget-title::after { display: none; }
    .widget ul, .widget ol { text-align: initial; }
    .front-widget-area .widget ul > li, .front-widget-area .widget ol > li, .sidebar-widget-area .widget ul > li, .sidebar-widget-area .widget ol > li {
    border-bottom: 1px dashed #eee;
    border-top: 0;
    font-family: serif;
    }
    .widget ul > li, .widget ol > li { padding: 8px 0; }
    .widget a, .widget a:visited { color: #92ead9; }
    .widget a:hover, .widget a:focus { color: rgba(255, 181, 196, 0.7); }
    /*—— End sidebar styling——*/
    /* Social icons */
    ul.social {
    margin: 0;
    height: 36spx;
    text-align: center;
    }
    ul.social li { display: inline-block; border-bottom: none; margin: 0; padding: 0; }
    a.social-icon {
    background: #e4e4e4;
    display: inline-block;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: #ffffff;
    }
    a.social-icon:hover {
    color: #fff;
    -webkit-transition: background 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out;
    -ms-transition: background 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
    }
    a.social-icon:visited {
    color: #fff;
    }
    .social-icon .icon {
    font-size: 18px;
    line-height: 36px;
    }

    .category .page-header .page-title { display: none; }

Viewing 8 replies - 1 through 8 (of 8 total)

  • Instead of pasting in your CSS, it’s more helpful to include a link to your site. We can always view the CSS directly from the site. And then we can see why your CSS isn’t working. Thanks.

    Thread Starter krystaelliott

    (@krystaelliott)

    oh, sorry! it’s allthatglitters.ca

    OK, so when you say you “lost your colors,” what exactly do you mean? The color of the social media icons, or is there some other element that should be a different color? If you had custom CSS that was for a particular widget, and you change widgets, then there’s a high probability that the rules for the previous widget won’t apply to the current one.

    The icons for the current widget are actual image files, so you can’t change their colors. However, you could probably substitute a Font Awesome icon for what is currently being displayed, and you can change the color of the Font Awesome icons.

    Thread Starter krystaelliott

    (@krystaelliott)

    ok, that makes sense. Damn! Would it be easier to find a widget that I can change the colours of?

    Thread Starter krystaelliott

    (@krystaelliott)

    or would you know how I can make the old ones (I will switch back now) larger and centered?

    Why don’t you go ahead & switch back and I can take a look.

    OK, add these rules to the end of your custom CSS:

    .widget_wpcom_social_media_icons_widget .genericon {
   font-size: 36px;
}

#wpcom_social_media_icons_widget-2 ul {
   display: table;
   margin: 0 auto;
}

    The first rule sets the icon size. You can adjust the font-size as you’d like.

    The second rule should center them.

    Thread Starter krystaelliott

    (@krystaelliott)

    That worked so perfectly! Thank you so much ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Change Social Media Icon Colour in Widget Area’ is closed to new replies.