Recreating the Sleek, Orange Subscribe Box on Blogussion

I get a few emails every once in a while asking me how I created the glorious orange subscribe box you see in the sidebar.

The subscribe box we have in place here really stands out with the colors chosen, and makes finding subscription options a lot easier.

Today, I’m going to show you how to design and code it. Really, it’s very simple. All we are designing is a background image with some text and icons on it, and to code it — all it is is creating a few classes. I will explain everything in better detail than this of course!

Requirements for following this tutorial

To design, all you need today is Photoshop, and a basic understanding of a few tools and how they work. The tools used are as follows:
- Gradient + Fill Tool
- Rectangular Marquee Tool
For coding, you should have a text editor and an FTP program to upload your files.

Really simple little setup we have here, so let’s begin.

Designing the Box in Photoshop

Step 1: Creating the template

Start off by creating a box, let’s say with the dimensions 300×220. After that, select the paint bucket tool and fill it with the hex color #F86D12.

After you have your box, go to your top menu, select Layer ? Layer Style ? Gradient Overlay and put in the following settings to create that white shine you see on the top of the box:

Click the image for full view.

Creating a tiny indent

This is an effect I like to add to many of the textures I create for the web. A simple one pixel solid white line to the top of the image can really give the texture a huge push.

So create a new layer, zoom in a little bit and draw a 1px solid white line across the top of the image. Set the layer to Overlay and adjust the opacity if you feel it’s too bright.

By now you should have a simple orange background with a shine on top, and a 1px indent. We’re making progress!

Step 2: Adding Content

Alright, so we now have the background of the box finished, now it’s time to add some content to it.

I always work down, I create the heading, write the short description, then I created the input boxes to signup for our RSS Feed.

Just some basic settings I did to create these things:

Heading (“Subscribe” text)

Font: Myriad Pro
Color: #000
Drop Shadow Settings (Layer ? Layer Styles ? Drop Shadow):

Click the image for full view

Input Box

Tool: Rounded Rectangle
Layer Style: Gradient Overlay, Inner Glow, Drop Shadow

RSS Icon

The RSS icon I used is part of the free icon set by Function. I simply changed the color by adjusting the Saturation level, and added a small circle beneath the icon to give it a shadow.

Coding the Box

Coding this box is really simple. All we’re doing is placing text in a container, replacing one line of text with an image, putting a background image into an input box and making an icon break out of a box (may get tricky).

Step 1: Setting up the layouts

I will give you the basic outline of both the HTML we are going to work with and the CSS. Here you go.

<div id="feed">
 <h3>Subscribe</h3>

 <p>Feed pitch here.</p>

 <form>
 [email code here]
 </form>
 <span class="icon"></span>
</div>

And our CSS code will look like:

#feed {
          background: #f86d12 url(path/to/image.png) repeat-x;
          padding: 1em; /* may need adjusting */
          position: relative; /* this is used for the RSS icon, explained later in this tutorial */
}

	#feed h3 { ... }

	#feed p { ... }

	#feed input { ... }

	#feed .icon { ... }

Step 2: Setting up the H3 Heading

Because we made an image for the heading within our H3 tag, we want to replace the text we have with that image. It’s a very simple trick to do too. Right now, focus on your #feed h3 { ... } line in your CSS and add the following to it:

#feed h3 {
          background: url(path/to/image.png) no-repeat;
          height: xpx;
          text-indent: -9999px;
          width: xpx;
}

Nothing complicated there. Basically, that line is says to add a background image with a height of “x” and a width of “x” to the H3 tag within the container marked as feed. Then, we have the line that makes it work, text-indent: -9999px; which will make the text disappear and only display the image.

If you don’t understand how it works, remove the text-indent property from the line and look at the H3 tag to understand.

Step 3: Styling the input box

I didn’t include my input code in the template I gave you, but usually whenever you have code for an input box, it will look like this:

<form action="http://domain.com/">
 <input type="text" value="Enter your email address" />
 <input type="submit" value="Subscribe Now!" />
</form>

So, if you look in your CSS, there is a line that we will use to target input forms. We are now working in #feed input. Here is the CSS you can use:

#feed input {
          background: url(path/to/image.png) repeat-x;
          padding: 0.7em;
}

Not much going on here. Basically, we apply a background image to the input box and give it a little padding so the text isn’t smashed up inside.

Step 4: Adding the “breaking out” icon

One of the coolest things about the sidebar here are the icons that break out of the box in each little panel. In the CSS we are using #feed .icon to style.

So I will start out with the basic styles, just to make the icon show up:

#feed .icon {
          background: url(path/to/image.png) no-repeat;
          height: xpx;
          width: xpx;
}

After that, you should get an icon to show up, but with no formatting.

Now, there are a couple of ways you can make the icon break out of the box, and I will teach you the absolute positioning way to do it. I think this way is much easier, and a good way to introduce some of you novice coders to a very useful CSS method.

Add these lines to #feed .icon:

position: absolute;
right: -10px;
top: 5px;

Now, the icon will have moved from the bottom left of the box to the top right of the box. You may need to adjust the number of pixels you shift the icon to, but that’s really the jist of it.

Click for full size image

There you have it!

All in all, that was a very simple tutorial to do. Creating the box in Photoshop is very easy, and coding it is almost easier. Now, with a little tweaking you can make the subscribe box your own and add your own content into it.

How did I do?

I am interested in hearing what you guys thought of the tutorial. I don’t write tutorials often, so I am looking for feedback on how I can improve the way I explain things like this to you. So be honest with me, did you like how this tutorial came out? Could you follow it easily? Was everything explained well? Let me know, because I have plenty of other tutorial ideas I would love to start writing here!

Go to top

rss, subscribe, tutorial

Published: October 16, 2009
Filed in: Blog Design
Read the summary

Article by Alex

Visit Alex's blog

I'm the 17 year old blogger & designer behind Blogussion. I live in New Jersey (but root for the New England Patriots), and am a Junior in High School. You can check out my rarely updated personal(ish) blog, Asnio, or connect with me on Twitter.

Possibly Related Articles

46 Discussions

Kate Foy October 16, 2009 at 2:35 am

Now how did you know I was looking for just such a feed box? Terrific tutorial and well laid out, step by step so even a newbie could have a go with confidence. Many thanks Alex.

Blog Categories

Popular Tags

Recreating the Sleek, Orange Subscribe Box on Blogussion

Require­ments for fol­low­ing this tutorial

Design­ing the Box in Photoshop

Step 1: Cre­at­ing the template

Cre­at­ing a tiny indent

Step 2: Adding Content

Head­ing (“Sub­scribe” text)

Input Box

RSS Icon

Cod­ing the Box

Step 1: Set­ting up the layouts

Step 2: Set­ting up the H3 Heading

Step 3: Styling the input box

Step 4: Adding the “break­ing out” icon

There you have it!

How did I do?

Article by Alex

Possibly Related Articles

From Planning to Earning

← Previous Article

Next Article →

From Planning to Earning

Popular

Active Discussions

Random Articles

Contribute a Post

About Alex