ActiveRain Signatures - Part 2 - HTML extra control

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

Hello! My name is Craig Daniels and I'm glad you stopped by Craig's Classroom! I hope you learned something new today here in my ActiveRain blog. If you did, there is that 'like' button below that makes me glad everytime I get a click :) Also, there's one more click to consider... By subscribing to my blog, you'll be able to see my future posts in your newsfeed (learn more). Check out my Blog Cover Page to see an index to my posts. Caution: I give abundant takeaways and I can keep you busy in 'homework' for quite a while! Check out my Profile Page to learn more about this tech guy and the various tech services that I provide.