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