Change the colours of the Polls Widget

For some reason, the polls widget does not have settings for its colours in the configuration dialog. It seems to pick up its colors from template variables instead.

Find or Add the variables

The variable that the polls widget uses for its text color is sidebar.text.color - if this variable already exists in your skin, you will find it in the group that it belongs to.

If it doesn't already exist, add it by copying this into the <b:skin> section of your blog's template (Template => Edit HTML).

 
  <Group description="Poll Widget" selector="widget.Poll">
     <Variable name="sidebar.text.color" description="Text Color" type="color" default="#2288bb"  value="#2288bb"/>
     <Variable name="sidebar.link.color" description="Link Color" type="color" default="#2288bb"  value="#2288bb"/>
   </Group>
Add new variables if they are not already present


Configure the variables

Once the variables have been added to the template, you can configure them visually using the template designer (Template => Customize => Advanced).

Configure the new variables under the Advanced section.

Output

The widget's appearance with the changes


Note: The font for the widget is picked up from a body.font variable. Find or add that as a type='font' variable to customize the font.

Happy Polling!

Comments

  1. Anonymous10 March 2017 at 21:46

    Hi! Anyway to add a: border & background to the poll gadget

    Thank you Luke for this post - much appreciated

    ReplyDelete
    Replies
    1. Luke11 March 2017 at 16:23

      Not within the iframe that it produces, but if you head to
      blogger.com -> (your blog) -> Theme -> Customize -> Advanced -> Add CSS
      You can throw in something like:
      .widget.Poll { border: 1px solid; padding: 20px; }
      Hope that helps.

      Delete
    2. Anonymous22 March 2017 at 00:34

      Hi! Sorry for the late reply.

      Thank you so much for your advice

      Very much appreciated!

      Take Care,
      Peter

      Delete

Post a Comment

Popular posts from this blog

Rotate my Blogger images

Image
Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!
Read more

Remove the header image for posts in Emporio

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!
Read more

Get nicer thumbnails for my Post snippets

I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator . Note: This post leverages the techniques described in the article about  Responsive images for Google photos . A note: The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work. Creating a responsive, resized Thumbnail The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image. <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ /> In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes...
Read more