[MOD] Smiley align to display a nice text

[spirulez]

(french translation)

Hi!

Undoubtedly you noticed that smileys cause sometimes shifts in messages.
Why? Quite simply because images are posted by default on the text's base line. How to cure it? Simple.

We will define two new CSS classes. First of all, edit your style.css contained in your topic directory $SMFDir/Theme/<your_theme>/style.css (that can be done in the admin interface).

Add where you want in this file the classes message and smiley.

Code Select Expand

/* modif : SmileysAlign */
.smiley
{
vertical-align: middle;
border: 0;
}

.message
{
line-height: 165%;
overflow: auto;
width: 100%;
}
/* modif : SmileysAlign */
Save your file.

Notice that this case is given for smileys with 18 pixels high maximum. You can reduce these 165% if your pack installed is smaller. On the other hand, if you increase this %, the effect will not be pretty visually: leading out must be in a reasonable fork.
18 px: a good boy this smiley
38 px: definitely to high!

Open now: $SMFDir/Sources/Subs.php
Search:

Code Select Expand

$smileytocache[] = '<img src="' . $modSettings['smileys_url'] . '/' . $user_info['smiley_set'] . '/' . $smileysto[$i] . '" alt="' . htmlspecialchars($smileysdescs[$i]) . '" border="0" />';

And remplace by:

Code Select Expand

$smileytocache[] = '<img src="' . $modSettings['smileys_url'] . '/' . $user_info['smiley_set'] . '/' . $smileysto[$i] . '" alt="' . htmlspecialchars($smileysdescs[$i]) . '" class="smiley" />';
Save your file.

Now open finally: $SMFDir/Sources/Subs.php
Search:

Code Select Expand

<div style="overflow: auto; width: 100%;">', $message['body'], '</div>

And remplace by:

Code Select Expand

<div class="message">', $message['body'], '</div>
Save your file again.

That's just it. If somebody has a little ftp space, I could add a preview of this modification. Good code;)

Oh, if you appreciated this small modification, thanks to have a look at my sign, I need your help

[EDIT: See image attached - Meriadoc]