Pages

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.

Can I Apply This Tutorial on Any Template?


Currently, you can apply this tutorial only on 'Simple' Blogger template. If you're using any other Blogger template or custom template, please be careful.

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.bg.color" description="Title Background Color" type="color" default="#999999" value="#999999"/>
       </Group>
  8. After that, find the following code:
    h2 {
      margin: 0 0 1em 0;
    
      font: $(widget.title.font);
      color: $(widget.title.text.color);
      text-transform: uppercase;
    }

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

  9. In this step, find this code:
    .widget .zippy {
      color: $(widget.alternate.text.color);
      text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
    }
    REPLACE the above code with the following one:
    .widget .zippy {
      text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
    }

  10. The background color of sidebar widget titles is also applied to the date above posts. So, we need to do a little more coding. Find the following code:
    .date-header span {
      background-color: $(date.header.background.color);
      color: $(date.header.color);
      padding: $(date.header.padding);
      letter-spacing: $(date.header.letterspacing);
      margin: $(date.header.margin);
    }

    REPLACE the above code with the following one:
    .date-header span {
      color: $(date.header.color);
      padding: $(date.header.padding);
      letter-spacing: $(date.header.letterspacing);
      margin: $(date.header.margin);
    }
    
    h2.date-header {background:$(date.header.background.color);}

  11. Click Save template and then Close button.

  12. 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.

8 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