1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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)

Discussion in 'Tips and Guides [Archive]' started by Shelley, Oct 9, 2010.

  1. Shelley

    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.
     

    Attached Files:

  2. Robert F Schmitz

    Robert F Schmitz Well-Known Member

    Very sharp. Thanks, installed.
     
  3. Shelley

    Shelley Well-Known Member

    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;
    
     

    Attached Files:

    ArnyVee, Two Worlds and SneakyDave like this.
  4. ArnyVee

    ArnyVee Well-Known Member

    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
     
  5. Shelley

    Shelley Well-Known Member

    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. :)
     
  6. ArnyVee

    ArnyVee Well-Known Member

    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 :)
     
  7. Shelley

    Shelley Well-Known Member

    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. :)
     
  8. ArnyVee

    ArnyVee Well-Known Member

    That worked, thank you Shelley :)
     
  9. Shelley

    Shelley Well-Known Member

    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. :)
     

    Attached Files:

    vbtwist likes this.
  10. ArnyVee

    ArnyVee Well-Known Member

    I was going to mention that in my previous post, but forgot to. Thanks! :)
     
  11. Robert F Schmitz

    Robert F Schmitz Well-Known Member

    Just a note for Beta 3, Message Content is now Message Elements
     
    ArnyVee and Shelley like this.
  12. CyberAP

    CyberAP Well-Known Member

    And again very nice Shelley!
     
  13. Shelley

    Shelley Well-Known Member

    First post in this thread documentation/tip has been updated on how to accomplish this for the latest version beta 3
     
  14. Susannah

    Susannah New Member

    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.
     
  15. Brogan

    Brogan XenForo Moderator Staff Member

    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;
     
    Shelley likes this.
  16. Susannah

    Susannah New Member

    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.
     

Share This Page