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.

18 thoughts on “How to Redesign Your Active Rain Blog!

  1. Brad – Great tip! I just left a comment on ActiveRain, but I liked the post so much that I decided to leave a note here too. I recently built my 1st website using CSS for most of the design. I love the freedom that CSS gives you. My website is not quite live yet, so it is not the site in my link above. Anyway, I just wanted to say thanks and drop a line.

  2. Good stuff! Now I am thinking it might be fun to redo my AR site and blog there again. Maybe or maybe not. Just the same thanks for the tips! It’s always nice to read your techie material.

  3. Just wondering if there is a way to bookmark your post? I can’t look at this now, but don’t want to lose it either! Thanks for sharing this info…

  4. Brad, I don’t know how to thank you. I just went to your “easy to do” link and it was just as you described: EASY! Thank you SO much for taking the time to do this for us.

  5. I gave it my best shot but somehow what I copied didn’t work on AR. Perhaps, there is more of a bug than originally thought.

    I do love this and am crazy about the grass and the blue sky. Just love it.

Leave a Reply

Your email address will not be published. Required fields are marked *