[WordPress] Blog Design Tips: How to customize the Jetpack email subscription widget

This is probably my first WordPress-related blog design tip. I had this over at my main blog but decided that, since this is design-related, I should post it here.

Before I decided to leave Feedburner, I was playing with the idea of adding the Jetpack email subscription widget to my blog. Those who use the widget may know that the style of that widget is pretty basic, so I set out to customize it a little bit. You know, make the widget label follow my template's style for widget titles and background colors and what not. It took me a little while to find a solution. Had to do a little trial-and-error until I got results. Eventually I ended up with a simple yet customized email subscription widget like the one on the right below.

From plain to not-so-plain! Yayyyy. 

So, how did I manage to do this?

First thing I did was go to Google! I found a few tutorials but they involved going into the source files and editing the code from there. I'm not really comfortable with that so I decided to try and see if I can simply add a code in Edit CSS under Appearance. By the way, you have to activate the Custom CSS module in Jetpack to get this feature. Anyway, I figured I just needed to find the identifier for the widget and its elements, like the title, content, etc. and start from there. I did go to the source files - I looked for it via the File Manager of my hosting account - just to see if I could find the identifiers, but I couldn't find the right one so I resorted to one of the things I do when I want to take a look at a blog's code. I opened my blog on another tab on my browser, found the email subscription widget, right-clicked on it and selected "Inspect Element." This opens a new window showing CSS codes and stuff.

Right-click on the widget and select 'Inspect element' to see this.

If you look at the screencap above, the highlighted line refers to where the code for the Jetpack email subscription widget starts. The texts in parentheses after "class" are identifiers and I just had to figure out which ones to use. After a little trial and error, I finally found the identifiers I needed: subscribe-blog-blog_subscription-2  and widget-title label . First I worked on the widget content. I went to Edit CSS and added this code to customize the widget content:

#subscribe-blog-blog_subscription-2 {
background: #F9F9F9;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px dashed #CCCCCC;
}

I hit Preview and it looked like this:  

It looked alright so I hit Save Stylesheet. Then I went to Editor to take a look at my theme Stylesheet and find the style for the widget titles. I copied the code and went back to Edit CSS where I pasted the code right below the code I just added for the widget content.

 It looked something like this:

.widget-title {
font-family: 'Raleway', sans-serif;
font-size: .9rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 20px;
color: #444;
}

So, basically that's just the code for all the widget titles. I added the word "label" so that it would refer to the title of the Jetpack widget (if you look at the screencap again, you'll see "label" below "widget-title"). I added the word "label" next to "widget-title" and added a few more lines for background color and padding (see blue text below).

.widget-title label {
font-family: 'Raleway', sans-serif;
font-size: .9rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 20px;
color: #444;
background: #FCDFFF;
padding: 15px;
}

I hit Preview again and this is what it looked like.

I wanted the widget title to look like a sticky tape kind of thing so I added this to the code for the widget content: margin-top: -20px; to make it move closer to the title and this one to the widget-title label: margin-left: 10px; to make the title move to the right. So then I had codes that looked like this:

#subscribe-blog-blog_subscription-2 {
background: #F9F9F9;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px dashed #CCCCCC;
margin-top: -20px;
}

.widget-title label {
font-family: 'Raleway', sans-serif;
font-size: .9rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 20px;
color: #444;
background: #FCDFFF;
padding: 15px;
margin-left: 10px;
}

I hit Preview again and this is what it looked like.

You can make your own adjustments to the codes, like font-family, padding and margins, as well as the colors. I made a few more adjustments to mine to make the widget title look centered.

So that's how I customized by Jetpack email subscription widget -- before I decided to ditch the widget and Feedburner and use Mailchimp instead.

I don't know if this is the best way to do it or if it makes the site quirky in some way. If you know of a better way to customize the widget, maybe you can give us tips! :)