No announcement yet.

How to style custom widget background color

  • Filter
  • Time
  • Show
Clear All
new posts

  • How to style custom widget background color

    Hi All,

    I have created a new custom widget area but unable to find out what is the correct css id or class to use so that I can style it.

    ??????I did a search in this forum and the closest that I can find is this link, I followed the instructions in this link but still not able to style it the way I want:

    I am trying to change the background color of the custom widget I created in Dynamik Design, the custom widget I am working on is the social icons footer at the very bottom of this page

    I am trying to make the social media custom widget background to look gray , and below is the code I added to Dynamik Custom CSS, but it didn't work ,

    div#social_icons_footer.widget-area.dynamik-widget-area {
    background-color: #616161;}

    Can someone advise what I had done wrong?

    Many thanks in advance!

  • #2
    Try with only "background":

    div#social_icons_footer.widget-area.dynamik-widget-area {
    background: #616161;}


    • #3
      Make sure there is no caching/minifying going on. I somehow can´t find this rule above in your CSS, it should show up at least even when it´s overwritten by some other rule.
      Also run the CSS through an online validator and make sure there are no errors above the rule (if present) which would prevent it from working.


      • #4
        THANKS SiGa ! I found this url when I inspected the widget element .dynamik-widget-area using Google Chrome, I guess this means minifying is going on right now for my site?

        (domain name edited in case this post gets blocked) ... /wp-content/uploads/dynamik-gen/theme/dynamik-min.css?ver=1504368735

        What is the purpose of having CSS minifying enabled? this is just to make the site load faster? Just want to make sure other aspects of my site will not be affected if I disabled CSS minifying.

        Thanks !


        • #5
          No, you don´t need to deactivate Dynamik minifying, it doesn´t do any harm. It decreases the size of the CSS file and is good for speed.
          I meant to point to plugins you possibly have activated (any caching or minifying plugin? Server side caching, hosting?).
          The code I pointed out in #2, did it work? If not, did you validate CSS meanwhile?


          • #6
            Hi SiGa, I tried your code below and it is working now, thanks and have a great weekend !

            div#social_icons_footer.widget-area.dynamik-widget-area {
            background: #616161;}


            • SiGa
              SiGa commented
              Editing a comment
              Glad to hear, have a great weekend, too!