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.

Adding Signature Limitations

Go down

Important Adding Signature Limitations

Post by Shadow Mon 18 Nov - 18:07

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.

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:
.signature_div img{
max-width: 500px !important;
max-height: 200px !important;
Place this in your CSS if your forum version is punbb:
.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.


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


Male Posts : 16217
Reputation : 1831
Language : French, English

Back to top Go down

Back to top

- Similar topics

Permissions in this forum:
You cannot reply to topics in this forum