• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Signature Separator (Images)

Shelley

Well-known member
This tip will remove the dashed line seperator from posts and replace it with an image to separate your content data from your signature data which I feel on a cosmetic scale looks and feels better. This is for those using beta 3.

Firstly, Log into your Admincp >>Appearance >> Style Properties >> Message Elements >> Signature and paste in the following code into the Additional CSS box:

Code:
            background-image: url(styles/default/xenforo/icons/xensignature_seperator.png);
            background-repeat: no-repeat;
            font-size: 9pt;
            margin-top: 5px;
            padding: 8px 0 0;

Ensure that you upload the image xensignature_seperator.png to your icons folder styles/default/xenforo/icons

Once you've pasted the code into the Additonal CSS box y0u'll notice that the existing dashed line is still present simply remove that instance from the drop down and your all done.
 

Attachments

An update to the first post. For those of you using beta 2 you can now have the signature separator without the need to make any template edits and go straight to the Style Properties.

Log into your Admincp >> click the Appearance Tab >> Style Properties >> Message Content >> Signature and enter the following code into the Additonal CSS box. :)

Code:
background-image: url(styles/default/xenforo/icons/xensignature_seperator.png);
background-repeat: no-repeat;
font-size: 9pt;
margin-top: 5px;
padding: 8px 0 0;
 

Attachments

  • sig_seperator.webp
    sig_seperator.webp
    9.9 KB · Views: 132
Shelley, first of all I want to thank you for sharing! These graphical 'touches' on our sites really bring things to life.

So, I need your artistic opinion on two things. :)

It was all feeling a little bit tight above and below the separator. I figured out that making the margin-top 20px that I can separate the 'body' of the post from the sig field a bit. Now, should I separate the separator from the sig area a little bit? It's a little too close for comfort from what I can tell.

Example: http://www.teeveetown.com/forum/threads/dexter-avatars.34/

Also, I wanted to go about having a custom separator done and was thinking of a clever separator to have. Given that my site is Television Show related, would a series of small televisions or small television antennae work? I was thinking along the lines of something like these decorative dividers, but none really catch my eye: http://www.graphics-4free.com/dividers4.html

Thoughts? :D
 
You could always add some padding-top & padding-bottom pending on the amount of space you want. Looking at your example I would definitely add & increase the padding-bottom: and remove the border-top: 1px dashed @primaryLighterStill; that's the dashed line running above it. :)

Custom dividers would be nice I think your onto the right track regarding some kind of antenna it would fit in with the theme of your site. Bare in mind, the padding may need adjusting accordingly with different images. :)
 
Shelley, I tried to add "padding-bottom: 20px;" and "padding-bottom: 20px 0 0;" at the end of the add'l css and nothing happened. Am I doing it incorrectly?

Thanks for the tip on removing the dashed line :)
 
Try removing the line padding: 8px 0 0;

And add the following:

padding-top: 20px;
padding-bottom: 20px;

Ensure that you remove the padding 5px from the box above or you could try just setting the top and bottom padding in the boxes and removing the padding in the additonal css box. try both and let me know how you go with that. :)
 
That worked, thank you Shelley :)

You're welcome arny btw your forum is looking really nice great job on it.

On another note use the signature in the attachment as the ones i posted have a 2px gap on the left (people probably won't notice it) I did so I'll update the separator pack shortly. For now, because i use the same one as you i can post that now. :)
 

Attachments

  • xensignature_seperator.webp
    xensignature_seperator.webp
    196 bytes · Views: 72
An update to the first post. For those of you using beta 2 you can now have the signature separator without the need to make any template edits and go straight to the Style Properties.

Log into your Admincp >> click the Appearance Tab >> Style Properties >> Message Content >> Signature and enter the following code into the Additonal CSS box. :)


Just a note for Beta 3, Message Content is now Message Elements
 
First post in this thread documentation/tip has been updated on how to accomplish this for the latest version beta 3
 
Hi Shelly,

Nice little tip, thanks!
I can't seem to figure out how to centre the image once I've got it in there ... my brain appears to be halted in progress LOL. Help would be much appreciated! :)
Ta!

Edit : Thought I'd better say, I added in the
Code:
background-position:center;
code, but that removed the image. I'm guessing some kind of conflict but really I have no idea why it wouldn't work. ;) I've lost a lot of my coding knowledge over the last few years.
 
You can do all of that with one line using a single background declaration, like so:

Code:
background: url('styles/default/xenforo/icons/xensignature_seperator.png') center top no-repeat;
 
Thanks Brogan, that got it! Very happy with the result, too. Very swish. ;)
Funny, I feel like I know you guys without hardly being here myself. Jo, who's here a fair bit, is my carer as well as a senior staff member on our forum, so I'm often around while she's posting on here... just am not able to be here much by myself.
 
Top Bottom