The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Tutorial] Adding Signature Limitations

View previous topic View next topic Go down

[Tutorial] Adding Signature Limitations

Post by Leviosa on November 18th 2013, 5:11 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:
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.
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.

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.


Leviosa
Administrator
Administrator

Female Posts : 15386
Reputation : 1563
Language : French, English

http://help.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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