How to Redesign Your Active Rain Blog!

Update: I have been contacted by Active Rain asking me to remove my customized AR blog. They discovered a potential flaw where some ActiveRain pages (that show posts from multiple users) could be altered. I have already contacted them with a fix for this. I will be speaking with them today and will keep you updated.

You have probably heard the buzz about the ability to totally customize your Active Rain blog. Visit my recent Active Rain post if you haven’t yet seen an example. It turns out; Active Rain gives you amazing flexibility in the look and feel of your blog. You don’t have to have to be a part of any special beta program. You can do this with any Active Rain blog.

How Does It Work?

Let’s talk about how this is done. No, there is no “hacking” or anything like that involved. You are simply modifying the CSS (a.k.a. the Style Sheet). I have actually been adding Style Sheet modifications to my post for quite a while. In fact, Jeff Turner of Real Estate Shows, grabbed my code and published it in the comment section of this post back in October of last year. That’s how this whole thing got started. In the beginning, I simply used my modified CSS to make simple changes to the look of my headlines, links, etc. But last night, it hit me. If I can make those changes via CSS, I bet I could also use CSS to make even more changes! A quick side note. I really commend ActiveRain for making this feature available! There are so many possibilities that can be done with this!

The Basics of CSS

Okay, I am getting a little ahead of myself. Let’s take a step back for a second. Most websites use CSS to control the look and feel of a Web site. By adding a new Style Sheet, you can “trump” the existing Style Sheet to create a new look. You just need to target the specific areas of the Web site that you want to modify. So how do you target these specific areas? That’s easy. Each section of the site has a unique ID. For example, the top portion of the ActiveRain website has an ID called “header” (pretty logical). Their Style Sheet sets various parameters of how that header should look. If you want to change these parameters, simply add a new Style Sheet and target the header. Because your Style Sheet comes after AR’s Style Sheet, you are able to overwrite their instructions and add your own.

Do It Yourself

I knew that this may be a little technical for some people so I decided to create a quick tutorial (below) on how you can do it.

First, Login to ActiveRain. If you don’t have an ActiveRain account, then read this first, then setup your own account.

On the left hand side, select (Post). Write your blog entry the way you would normally, just be sure you set your Visibility to “Draft.” Now save your blog entry by selecting “Post Blog Entry” at the bottom of the page. Now go back and select “edit” to edit your post.

This is where things get interesting. In order to make the Style Sheet modifications, you have to be in HTML mode. With that in mind, click the HTML tab.

You should now see your blog post in HTML view. Scroll all the way down to the bottom of your blog and add the follow piece of code.

This tells the browser that you want to make Style Sheet modifications. Now, any edits need to go inside those two tags. For example, let’s say I want to change the background color of the site from white to yellow (for the sake of everyone’s eyes, please do not actually do this!)

Your Style Sheet would look like this…

body {background-color:yellow;}

Like I said earlier, you can even target specific sections of the site. In order to find these ID names, I suggest using the FireBug plugin for Firefox. It will tell you the name of the ID as well as the current style applied to that ID.

Okay, now that I have told you how to do this, please, proceed with caution! Let’s not turn ActiveRain into another MySpace with everyone’s blog having spinning backgrounds and pink Comic Sans font!

My Code

In case you need some inspiration, here is the Style Sheet used to achieve my Active Rain blog design. Feel free to grab and modify this code. All I ask is that you link to this post so other AR members can benefit from this!

<p>body {width:950px; margin:auto; background:url(http://www.dakno.com/blogpics/arback.jpg) fixed top center; }</p> <p>#header, #footer {background-color:#99c523;} #header {background-color:#fff; padding-bottom:60px; margin-top:30px; padding-top:100px; background:#FFFFFF url(http://www.dakno.com/blogpics/daknotop.jpg) no-repeat scroll -32px 0px; border:0px; margin-top:0px; }</p> <p>.footerText {color:#ffffff; }</p> <p>td {background:#ffffff}</p> <p>#footer td {background:transparent!important;} .site_button {border:0px; background:url(http://www.dakno.com/blogpics/arbutton.gif); height:60px; width:180px; padding-top:10px;}</p> <p>#logo {position:relative; top:-10px; left:330px; width:950px;}</p> <p>#member_count {display:none;}</p> <p>.nav {padding:4px;0px!important; text-align:center!important; background:#99C523; width:930px; border:1px solid #2f4165!important; margin-left:5px; }</p> <p>h2 { color:#356D9E!important; font-family:Trebuchet MS,Arial,Helvetica,sans-serif; font-size:24px!important; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:0pt; line-height:24px; margin:9pt 0pt 0px; padding:6px 0pt 0px; } h3 { color:#356D9E!important; font-family:Trebuchet MS,Arial,Helvetica,sans-serif; font-size:20px!important; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:0pt; line-height:24px; margin:9pt 0pt 0px; padding:6px 0pt 0px; }</p> <p>a { color:#356D9E; text-decoration:underline; }</p> <p>p{ margin-top:2px!important;}</p> <p>a:hover { color:#ffffff; text-decoration:none; background:#356D9E; border 1px solid #DDA603 }</p>

There still may be a few bugs to work out with my style but I think it will give you the general concept.