Add image in index page user area

[Paul_Pauline]

Hi guyz.

How would I go about adding an image, (Maybe a small animated gif) in the user info area.

The place I am refering to is on the right hand side, directly opposite the avatar as shown in the attached image.

Thanks, Paul.

[Chas Large]

You need to add a Table Data (Column) in the UpShrinkHeader are of the Index.template.php file.

Find this area of the code:

Code Select Expand

<input type="submit" value="', $txt[34], '" /><br />
<span class="middletext">', $txt['smf52'], '</span>
<input type="hidden" name="hash_passwrd" value="" />
</form>';
}

echo '
</td>
</tr>
</table>
</td>
</tr>
</table>';

echo '

Add in a pair of <td> and </td> tags and in between the last </td> and </tr> tags and add something like the link below in between those new tags.

Code Select Expand

<a href="http://www.simplemachines.org/community/index.php"><img src="http://www.simplemachines.org/community/Themes/smsite2/images/site/smsite_logo.jpg?rc2.1.1" alt="Simple Machines Community Forum" /></a>

So the end result looks like

Code Select Expand

<input type="submit" value="', $txt[34], '" /><br />
<span class="middletext">', $txt['smf52'], '</span>
<input type="hidden" name="hash_passwrd" value="" />
</form>';
}

echo '
</td>
<td>
<a href="http://www.simplemachines.org/community/index.php"><img src="http://www.simplemachines.org/community/Themes/smsite2/images/site/smsite_logo.jpg?rc2.1.1" alt="Simple Machines Community Forum" /></a>
</td>

</tr>
</table>
</td>
</tr>
</table>';

echo '

You should then have the image placed at the right hand end like the attachment below.

Obviously this will be hard coded to the template and you may need to modify other themes to the same. You could add references and place the link in the language files thus making it more flexible.

[Paul_Pauline]

Hi Chas.

You just got added to my hero list   

Works perfectly, many thanks, Paul   

[Chas Large]

You're welcome and I'm embarrassed.

[Paul_Pauline]

Morning Chas   

Could I just trouble you with a small niggle  ..........

Is it possible to get rid of the grey border/frame that is placed around the image ?

It is there in all themes, including the default, (It's there on the example you posted yourself too)

I'm assuming there is some code that is making it show like that, rather than letting the uploaded image fill the box 

Thanks, Paul.

[Chas Large]

Morning Paul,

To change the border is in effect to change the background of the box that the image sits in, the border is the blank space seen around the image. You need to add a class to the <TD> tag we created. So into that tag add class="windowbg2" so it looks like

Code Select Expand

<td class="windowbg2">

This will set the background to the same colour as the text box for "show unread posts since last visit" etc.

There is however padding of 8px set by the table structure. I.e., the space around the image. If you want to remove this then you'll need to create your own unique class in the style.css file. I did the following:

Opened style.css and found the code for windowbg2

Code Select Expand

.windowbg2
{
color: #000000;
background-color: #F6F6F6;
}


I copied and pasted this further down and renamed the class windowbg6 - you can call it pretty much anything you like. I added the 0px padding, which sets a zero border round all of the contents of the class.

.windowbg6
{
   color: #000000;
   background-color: #F6F6F6;
   padding: 0px;
}

Finally changed the name in the <TD class="windowbg6"> in Index.template.php to match the new class, uploaded the files and the result is as you see attached.

This shows a small border top and bottom because of the image size, you may need to change your image to meet the actual size of the box which is governed by the avatar size set in your forum settings.

[Paul_Pauline]

Hi Chas.

That worked great, i'm happy to leave the padding now it's the same colour.

I had made my image the same size as my avatar settings as I realised that dictated the size of the box.

Now the next question is can you do the same trick with the avatar ?

I hadn't noticed till just now that the avatar border is a light blue colour on all default based themes, I think it would look better if that also matched   

I bet you're sorry you started this now   

Thanks, Paul.

[Chas Large]

OK Paul,

same sort of thing here. in index.template.php look for

Code Select Expand

if (!empty($context['user']['avatar']))
echo '
<td class="windowbg" valign="middle">', $context['user']['avatar']['image'], '</td>';

echo '

and change the class to windowbg2

Code Select Expand

if (!empty($context['user']['avatar'])) // Change to windowbg2 for avatar background / border
echo '
<td class="windowbg2" valign="middle">', $context['user']['avatar']['image'], '</td>';

echo '

I added in a remark // so I could see where I made the change.

Next !

[Paul_Pauline]

Cheers Chas   

You came to the rescue again !

I just wish I understood even a tiny amount of the things you guyz do 

Thanks for your time and detailed explanations 

BTW; when you said  "Next"  ................

You probably saw this topic running, the only reason I didn't mark it solved was because Kat said to leave it open, it's an IE issue apparently, and probably not worth worrying about !

http://www.simplemachines.org/community/index.php?topic=367202.20

Thanks again, Paul.

[Chas Large]

Hi Paul,

Glad to have helped fix that problem for you.

I'm not an IE lover and tend to avoid all things IE like the plague. It's never been a good browser, doesn't meet standards and won't render many sites correctly. I make my sites work on FF, Opera, Chrome & Safari. If it don't work in IE then I try and persuade users to change browser rather than reformat to make it work on the worst browser on the market.

Sorry for the rant but I doubt I can help you with that one. Basic SMF, HTML, CSS and a little PHP yes. IE no.

Regards.

Chas.