How to Add Background Color to Sidebar Widget Titles


A reader has requested this tutorial to add background color to sidebar titles. By default, Blogger only allows to change the font & color of sidebar widget titles. So, I'll try to make it as simple as possible & you'll be able to change the background color from the Template Designer.


Note: Tutorial has been updated on 06/18/2016.

Steps!


  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. A new window will open. You'd have to click the Proceed button to start editing.
  6. Blogger Proceed Button
  7. Find the following code:
       <Group description="Gadgets" selector="h2">
         <Variable name="widget.title.font" description="Title Font" type="font"
            default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
         <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
         <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
       </Group>

REPLACE the above code with the following one:
      <Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
         default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
     <Variable name="widget.title.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
   </Group>


  • After that, find the following code:
    div.widget h2.title {
      margin: 0 0 1em 0;
    
      font: $(widget.title.font);
      color: $(widget.title.text.color);
    }



  • REPLACE the above code with the following code:
    div.widget h2.title {
      margin: 0 0 1em 0;
      font: $(widget.title.font);
      color: $(widget.title.text.color);
      background-color: $(widget.title.background.color);
    }


  • Click Save template and then Close button.



  • Blogger Save Template Close Buttons

    Change Widget Title Background Color in Blogger Template Designer



    After finishing the tutorial, you can easily change the background from Blogger Template Designer. Open 'Template Designer' & select 'Advanced' from the left. Then select 'Gadgets' and you'll see the option to change background of the sidebar widget titles.

    9 comments:

    1. It's very helpful tutorial,I tried it and got success.

      ReplyDelete
    2. I'm getting this error : Invalid variable declaration in page skin: Variable is used but not defined. Input: widget.alternate.text.color

      How to I solve this?

      ReplyDelete
      Replies
      1. Hi Mei, this is an old tutorial. I'm updating the tutorials one by one.

        Regards,
        Bilal

        Delete

    Note: All comments will be moderated.