ActiveRain Signatures - Part 2 - HTML extra control

Education & Training with Tech Training for You!

In this series of articles, we're looking at how to use the signature option in ActiveRain. AR gives you the opportunity to create a signature, or footer, that will display at the bottom of each of your blog posts. If you missed the first article, you can click that link to go back and see it. To recap - a signature is a nice way to leave your reader with a concise and interesting snippet about WHO you are, WHAT you do and give them a way to connect with you further (by some combination of tel, email, or links to your website or other social pages)

In the first article, we looked at an updated signature that I had worked on with Michele Miller to create. In that signature, I did a couple of things that I'd like to show you more about in this article and the next article. Please note, I realize that this article will be for the more "techy" readers but I will try and keep it simple enough so than you can give it a try if you are inclined to. (and if you are not inclined, no worries - signatures can be created without knowing this stuff - but if you WANT more control, this will be one way. The other way would be to use an external editor like Scribefire or KompoZer but that is an entirely different article series coming soon)

We're going to need to switch into HTML view in order to gain access to more settings. You will find an HTML view button on the top toolbar of the signature editor box. HTML is really quite straightforward when you stop and look at it. It is a set of defined codes that control how text will appear. In this article we'll be looking at the first of two HTML codes -  paragraphs (in the next article we will look at the codes for creating tables. You can see an example of the HTML editing view below.

In our signature example, we created a top bar of our footer that had a blue background. This visually separated the footer from the body of text. Below you will see the finished signature with the header bar that we introduced last time.

In order to do a background color, we have to go into HTML mode and do some CSS style settings. HTML mode is initially intimidating but stop and look and I will help you understand. It is simply a set of defined codes that wrap around some content text. For instance, a paragraph of text is wrapped inside a

and a

code. Furthermore, HTML can be styled for appearance with what is known as CSS attributes. CSS stands for cascading style sheet. Normally, this is used to create a uniform appearance of all elements across all pages of a website, but we can use it also in simple form in what is called "in-line styling"

Let's create this

Sample Text Goes Here

Inside the opening tag we will put this reference -
style="background-color: blue"
We can also add to this that the color of the text should be white. We separate multiple properties with a semicolon
style="background-color: blue; color: white"
Finally, we add a little padding space so the edge of the box is not right against the text. The abbreviation px stands for pixels. The final HTML code then looks like this


Some Text Goes Here

Certain colors can called by name such as blue, white, red, green, etc. Any color in the spectrum can be chosen but when you stray from named colors you have to use a hexadecimal RGB code. You can go to a website like this one (HTML Color Picker) to have it give you a color code. When you have it, you simply insert it into the style callout like style="background-color: #112233" (if you are curious this is an RGB coding where the 11 is the R-Red value, the 22 is the G-Green value, the 33 is the B-Blue value) Note that you need to use the # symbol when you are calling out color by number, but not when calling by name.

Of course, not every signature needs to have this colored background type header. However it gives you an idea that you can use if you like it. And now you know how to do it!

These are the next two articles in this series...
Part 3 is looking at how to create tables to help with layout of elements
Part 4 will be another case study where I is another 'makeover' of a AR signature footer

Posted by

Hi there! Thanks for checking out my blog today. I'm a tech guy living in New York City but I love that I can reach so many via means of the web. In my blog posts and tutorial videos, you'll get many new takeaway points that you'll be able to apply. By following my blog (button below), you will be able to see my new posts in your "following" newsfeed. If you enjoyed this post also be sure and click "like". It helps me see that my content is hitting the mark!

My blog home page lists my most recent posts, so if you feel like reading more, that's the place to go next!

Click to  



Re-Blogged 1 time:

Re-Blogged By Re-Blogged At
  1. Praful Thakkar 03/16/2017 05:00 PM
ActiveRain Community
Active Rain Newbies
Tech Corner
Addicted to Active Rain
activerain signature

Post a Comment
Spam prevention
Spam prevention
Show All Comments
Wayne B. Pruner
Oregon First - Tigard, OR
Tigard Oregon Homes for Sale, Realtor, GRI

Thanks again Craig. This is next on my to do list.

Oct 21, 2010 06:32 PM #56
Frank Rubi
Frank Rubi Real Estate, LLC - Metairie, LA

Craig, Ok just updating my signature with the bar. You guidance is appreciated. So much to learn. Thanks!

Oct 27, 2010 03:19 AM #57
Maria Marriott
Executive Properties - Roseville, CA
Realtor -

Craig: Finished reading this one and will work on the signature...Hopefully it will come out nice. Thanks again!

Oct 30, 2010 04:26 AM #58
Dennis & Terri Neal
RE/MAX, Big Bear - Big Bear Lake, CA
Your Home Sold in 45 Days or We Se

Another TO DO item for my schedule. Thanks for the tips.

Nov 12, 2010 09:41 AM #59
Deborah Bly
RE/MAX Space Center - League City, TX
RE/MAX Realtor

Little by little signature is getting better. We have gone from non existent to down right ugly to...well it's getting there. 

Jan 05, 2011 03:03 PM #60
Kristal Kraft
The Berkshire Group Realtors - Denver, CO
Selling Metro Denver Real Estate - 303-589-2022

Craig,  You tutorials are great, very easy to understand and follow.  Thanks for taking the time to do them.


Jan 20, 2011 03:46 PM #61
Lisa Borders - REALTOR
RE/MAX Crossroads - Lincolnton, NC
RE/MAX Crossroads

Craig, Thanks for posting on AR....I am learning so much from your post.

Feb 24, 2011 10:52 AM #62
Craig Daniels
Tech Training for You! - Staten Island, NY
Technology Instructor/Project Consultant

thanks everybody - very glad to see you here

Feb 25, 2011 02:07 AM #63
Bisendra Melaram
Brita Realty Corp. 718-909-0233 - South Ozone Park, NY

Keeps getting better Craig!  It's a good thing for me that we met at RainCamp... who knows if I would have come across all this great information that you've taken the time to share with us all.

Apr 11, 2011 03:05 PM #64
Jeremy Joslin
Coldwell Banker Residential Brokerage - South Windsor, CT
Professional Real Estate Marketing and Sales

your instructions are very easy to follow and this adds a nice look to her signature.

May 07, 2011 02:33 PM #65
Daniel H. Fisher (704) 617-3544 - Charlotte, NC
MCRP - Charlotte Real Estate, NC or SC

nice tutorial. thanks!

May 30, 2011 06:43 AM #66
Barbara-Jo Roberts Berberi, MA, PSA, TRC - Greater Clearwater Florida Residential Real Estate Professional
Charles Rutenberg Realty - Clearwater, FL
Palm Harbor, Dunedin, Clearwater, Safety Harbor

Here goes nothing..............crossing my fingers and hoping I don't have to go backward too many times to get it right!

Jun 18, 2011 04:13 AM #67
Barbara-Jo Roberts Berberi, MA, PSA, TRC - Greater Clearwater Florida Residential Real Estate Professional
Charles Rutenberg Realty - Clearwater, FL
Palm Harbor, Dunedin, Clearwater, Safety Harbor

wow, don't know what on earth I did, but although I got that color bar and the words inserted correctly, my page suddently went super W-I-D-E!!! Always something!

Jun 18, 2011 05:16 AM #68
Nancy Pav
Century 21 Redwood Realty - Ashburn, VA
Nancy Pav, Your "GottaHave" Realtor

Thanks for the tip.  I'm working on updating my signature and this is very helpful.

Sep 19, 2011 06:37 AM #69
Ken Cash
CB Select Real Estate at Lake Tahoe - 775.691.3855 - - Incline Village, NV
Lake Tahoe Lake Front Homes, Luxury Homes, Condomi

Wow...  Thanks for the tips.  I doubt I will remember in a month but I did go and apply what I learned here and it does make a difference.   Thanks again..

Sep 20, 2011 10:02 AM #70
Roger Steiner
RSVP Real Estate - Seattle, WA
Seattle & West Seattle Property Marketing

Craig, I was able to create a red bar with text in it, but now I can't seem to get my cursor below it to type in my name, etc. If I hit enter, I get another red bar. I thought I tried switching out of HTML, is that what I'm supposed to do? Btw you must be an extremely patient guy to put up w/ thousands of agents ;-)

Sep 22, 2011 01:07 PM #71
Mykel Martin
(909) 476-9600 ~ - Rancho Cucamonga, CA
Realty Masters & Associates

This is a great Tutorial Series.  Thanks so much for providing it.  It beats the heck out of going to and trying to decipher their how-to's! 

OK, I think I got the bar, can't wait for the table...

Oct 03, 2011 01:56 PM #72
Rachell Lara & A List Properties
eXp Realty / 619.316.7445 - San Diego, CA
A List Properties - San Diego Neighborhood Experts

Craig, thanks for the post and the HTML tutorial, it is really fun, but I might just know enough to be dangerous.

Nov 12, 2012 11:57 AM #73
James Loftis - West Palm Beach, FL

Great information, thanks for sharing with all of us. What about the facebook Icon,

How can that be set up in the signature?

Mar 15, 2014 03:45 PM #74
Nathan Gesner
American West Realty and Management - Cody, WY
Broker / Property Manager

Great information, Craig Daniels . Thanks for sharing!

Mar 17, 2017 04:31 AM #75
Post a Comment
Spam prevention
Show All Comments

What's the reason you're reporting this blog entry?

Are you sure you want to report this blog entry as spam?


Craig Daniels

Technology Instructor/Project Consultant
Ask me a question
Spam prevention

Additional Information