ActiveRain Signatures - Part 2 - HTML extra control

By
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 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  

close

Re-Blogged 1 time:

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

Post a Comment
Spam prevention
Spam prevention
Show All Comments
Rainmaker
273,123
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
Ambassador
835,854
Frank Rubi
Frank Rubi Real Estate, LLC - Metairie, LA
FrankRubiRealEstate.com

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
Rainmaker
83,994
Maria Marriott
Executive Properties - Roseville, CA
Realtor - DBRealEstateTeam.com

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
Rainer
59,532
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
Rainmaker
129,437
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
Ambassador
814,342
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.

kk

Jan 20, 2011 03:46 PM #61
Rainer
69,334
Lisa Borders
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
Ambassador
418,923
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
Rainmaker
68,329
Bisendra Melaram
Brita Realty Corp. 718-909-0233 - South Ozone Park, NY
Realtor

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
Rainmaker
148,135
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
Rainer
244,525
Daniel H. Fisher
www.FisherHermanRealty.com (704) 617-3544 - Charlotte, NC
MCRP - Charlotte Real Estate, NC or SC

nice tutorial. thanks!

May 30, 2011 06:43 AM #66
Ambassador
2,067,833
Barbara-Jo Roberts Berberi, MA, PSA, TRC - Greater Clearwater Florida Residential Real Estate Professional
Charles Rutenberg Realty - Palm Harbor, 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
Ambassador
2,067,833
Barbara-Jo Roberts Berberi, MA, PSA, TRC - Greater Clearwater Florida Residential Real Estate Professional
Charles Rutenberg Realty - Palm Harbor, 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
Rainmaker
91,751
Nancy Pav
Long & Foster - 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
Rainer
324,527
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
Rainer
41,341
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
Rainmaker
550,366
Mykel Martin
(909) 476-9600 ~ WeLoveSellingRealEstate.com - Rancho Cucamonga, CA
The TCR Group at Realty Masters & Associates

This is a great Tutorial Series.  Thanks so much for providing it.  It beats the heck out of going to http://www.w3schools.com/html/ 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
Rainer
143,741
A List Properties of Keller Williams Realty Experts from Beaches to the Mountains
www.WhereToBuyInSanDiego.com 619.316.7445 - La Mesa, 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
Rainer
331,671
James Loftis
Real Estate 911 Inc - West Palm Beach, FL
Real Estate 911 Inc

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
Rainmaker
374,718
Nathan Gesner
American West Realty & 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?

Ambassador
418,923

Craig Daniels

Technology Instructor/Project Consultant
Ask me a question
*
*
*
*
Spam prevention

Additional Information