5 ways to style your post signature

Let’s finish up our signature mini-series with 5 examples of how you can style your signature, using any of the three methods mentioned last week!

Start by adding the following code either with your signature plugin, simple hooks, or functions file:

<div class="post-signature">Lauren</div>

1. Styling text: script font, right aligned, large and brightly colored

To accomplish something like this, all we need to do is add a quick style to our style.css sheet, which will target the ‘post-signature’ class that we attributed to our inserted div.

@import url(http://fonts.googleapis.com/css?family=Great+Vibes);
.post-signature {
    font-family: 'Great Vibes';
    font-size: 36px;
    color: #BF2847;
    text-align: right;
}

2. Adding social media icons

Now, if we want embellish our signature a little bit, let’s go back into the code and insert some social media icons. Start by adding a little more HTML using your preferred method:

Now let’s re-style our signature a little to see it a different way:

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
.post-signature {
    font-family: 'Open Sans Condensed';
    font-size: 40px;
    color: #404040;
    font-weight: 300;
}

3. Using an image

To use an image, we’ll just place the code in using any of our methods and call it a day! The nice thing about using an image is that we can make it exactly how we want: different colored letters, crazy backgrounds, etc. Sure, with a little effort, we could do that with CSS. But what about if we want to rotate our text just a little? Now we’re talking!

4. Using an image as a background

Another great use of an image is to actually create your own signature and really give your posts a little piece of you. I created mine in Illustrator, and luckily this isn’t how it really turns out!

When adding an image signature as a background, we can remove the “Lauren” from our HTML:

<div class="post-signature"></div>

In our CSS, we’ll give our div a height (so the whole image can appear) and assign our signature as the background image.

.post-signature {
    background: url('IMG_URL') no-repeat right top;
    height: IMG_HEIGHT;
}

Now when someone visits our post they can’t highlight our image – instead it will appear as if it’s part of the page!

5. Combining it all: styled text, social icons, background image, and even some extras!

Our HTML insert should be the same as the original, containing our text. Add the social media HTML from above, as well. Now we’ll use CSS to style that text AND add a background image to it.

.post-signature {
    font-family: 'Great Vibes';
    font-size: 48px;
    color: #BF2847;
    background: url('IMG_URL') no-repeat left top;
    height: IMG_HEIGHT - PADDING_TOP;
    padding-top: 90px;
    padding-left: 35px;
}

Use padding to move the text wherever you want it, so that it can be positioned over your image artfully. Notice that the height attribute is the image height MINUS the amount of top padding. These two heights combined with determine the actual height of our div, and we don’t want a bunch of white space wasted at the bottom!

Using similar logic, we can position our social sharing icons by changing the margins.

.social-signature {
    margin-top: -55px;
    margin-left: 80px
}

I sincerely hope you’ve learned something today, and that you can take these examples to enhance your page! If you have any questions, please let me know in the comments!

pssst.. Check out our sister brands!

Small Plugins: optimized custom blocks

Creator Theme: DIY version (coming soon)