Adding Signature Limitations Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums

    Adding Signature Limitations

    Shadow
    Shadow
    Shadow
    Manager
    Manager


    Male Posts : 16217
    Reputation : 1831
    Language : French, English
    • Post n°1

    Important Adding Signature Limitations

    Post by Shadow November 18th 2013, 5:07 pm

    Adding Signature Limitations

    This tutorial will help you automatically resize users signatures if they're too big. This prevents large images from stretching or otherwise breaking your forum.

    Example:
    Adding Signature Limitations Exempl10

    Applying Signature

    For this tuto to take active effect you must have signatures active on your forum.
    Administration Panel > Users & groups > Users > User options

    Find the User Settings table and allow signatures for either groups or all members.
    Adding Signature Limitations Tuto10

    When you have that done, you can then apply your signatures under your profile settings.
    Profile > Preferences > Always attach my signature
    +
    Profile > Signature

    Identifying Forum Version

    First thing we need to do is find the CSS code for your forum version. To check your forum version navigate to..
    Administration Panel > Display > Skins > Choose a theme > Version

    Find General and look to Change version that will display your current version.

    Adding Signature Limitations Ex18

    Installing CSS

    Now that you know your forum version we can install the resize CSS for your forum. Find the correct CSS code for your forum version and navigate to..
    Administration Panel > Display > Pictures and Colors > Colors > CSS stylesheet

    Place this in your CSS if your forum version is phpbb2, phpbb3, or Invision:
    Code:
    .signature_div img{
    max-width: 500px !important;
    max-height: 200px !important;
    }
    Place this in your CSS if your forum version is punbb:
    Code:
    .sig-content img{
    max-width: 500px !important;
    max-height: 200px !important;
    }
    Once you have paste the code in your CSS, be sure to save the changes by clicking the submit button. If you've done the recent steps correctly your forum should now resize images larger than 500px width or 200px height. You can modify the size if you want images to be smaller or larger. Read Explanation for more information on the properties used in this tutorial.

    Explanation

    max-width: Sets the maximum width for an element.
    max-height: Sets the maximum height for an element.
    min-width: Sets the minimum width for an element.
    min-height: Sets the minimum height for an element.
    width: Sets the width for an element.
    height: Sets the height for an element.

    All properties above can be defined in px, cm, %, ect..  

    You can also use :hover to increase the size when the mouse is hovered over the image.

    Hover Example:
    Code:
    .signature_div img:hover{
    max-width: 100% !important;
    max-height: 100% !important;
    }
    With the CSS above when the mouse hovers over the signature image, the image will show its full dimensions.


    This tutorial was written by Ange Tuteur
    No possible reproduction without our agreement, pursuant to article L122-1 of the intellectual property code.
    • Back to top