Backstage - OOC Forums
General Discussion => Web Development and Site Suggestions => Topic started by: Nakatre Read on 21 Apr 2010, 20:31
-
Running a SMF board as well, and I was wondering if anyone knew how you display your avatar next to the "Hello, Nakatre Read" thing at the top? Is it theme-specific or is there an option or codeline for it somewhere?
Thanks in advance!
-
That's theme specific; most themes are set up to display the avatar there, but some themes are designed with a more 'sleek' look in mind and leave that snippet of code out.
The bit of code is usually found in index.template.php and will look like this:
if (!empty($context['user']['avatar']))
echo '
<div id="db-avatar">'.$context['user']['avatar']['image'].'</div>';
Typically, that area of the main index page is called the "User Area". For Backstage's default theme, the user area looks like (pay attention to the //commented lines):
<div id="userarea">';
if (!empty($context['user']['avatar']))
echo '
<div id="db-avatar">'.$context['user']['avatar']['image'].'</div>';
if ($context['user']['is_logged'])
{
echo '
<ul>
<li><b>', $txt['hello_member'], ' ', $context['user']['name'],'</b></li>';
// Only tell them about their messages if they can read their messages!
if ($context['allow_pm'])
echo '
<li>' ,$txt[152], ' <a href="', $scripturl, '?action=pm">', $context['user']['messages'], ' ', $context['user']['messages'] != 1 ? $txt[153] : $txt[471], '</a>', $txt['newmessages4'], ' ', $context['user']['unread_messages'], ' ', $context['user']['unread_messages'] == 1 ? $txt['newmessages0'] : $txt['newmessages1'],'</li>';
// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<li><b>', $txt[616], '</b></li>';
// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '
<li>', $context['unapproved_members'] == 1 ? $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="', $scripturl, '?action=viewmembers;sa=browse;type=approve">', $context['unapproved_members'] == 1 ? $txt['approve_member'] : $context['unapproved_members'] . ' ' . $txt['approve_members'], '</a> ', $txt['approve_members_waiting'], '</li>';
echo '
<li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';
echo '
</ul>';
}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo '
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/sha1.js"></script>
<form action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" style="margin: 0px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<b>Username: </b><br />
<input class="loginput" type="text" name="user" size="17" /><br/>
<b>Password: </b><br />
<input class="loginput" type="password" name="passwrd" size="17" />
<input class="logbutton" type="submit" value="', $txt[34], '" /><br /><td valign="middle" align="left">
<label for="cookieneverexp"><b>', $txt[508], ': </b>
<input type="checkbox" name="cookieneverexp" id="cookieneverexp" checked="checked" class="check" /></label>
</td>
<input type="hidden" name="hash_passwrd" value="" />
</form>';
}
echo '
</div>
Dunno how familiar you are with this stuff (I'm a novice myself, really), but in php (probably other languages too), beginning a line with // tells the browser to ignore that line. Any time you see a // it's a developer's comment for the information of anyone who looks at the code later to know wtf they're looking at, if needbe. Even though most of the User Area doesn't have anything to do with the avatar, I left it in just to illustrate the way it's arranged in the index.template.php file.
In this case, some of the sections of that code block are pretty self-explanatory:
if (!empty($context['user']['avatar'])) is pretty clearly saying if a user has an avatar, so by context we can infer that the next bit of code is for displaying the avatar.
if ($context['user']['is_logged']) obviously is checking to see if they're logged in and if so, the following code calls for the "Hello Nakatre", etc.
These SMF templates (most of them) are pretty modular in the way the code is arranged; you might even be able to just copy/paste the avatar code snippet above and insert it into your forum's index.template.php right before the 'logged in?' check. It goes without saying, though, any edit you make (no matter how small), backup that file first so if you break it you can just re-upload a working file and everything's okay again.
-
Okay that helped a lot. I found the piece of code in the index.template.php file, and obviously the string of code for the avatar wasn't there at all. Instead of User Area it was called Welcome, though.
But then there was another problem. After inserting the avatar code above the logged in code, the spacing was all wrong. The avatar did show up, but it somehow pushed the "Hello, Nakatre" box away and out of sight.
I'm not really good at PHP at all, so I have no idea what I can do to make it look right.
-
Hm.. what's the name of your smf theme; I'll download a copy and see if I can figure it out. In the meantime, search http://www.simplemachines.org/community/index.php for similar help requests - I'm not sure what might cause the avatar piece to push the rest of the user/welcome stuff away like that right off hand.
-
My SMF theme is caled Overview, from Dzinerstudio
-
Right, so. Try replacing your index.template.php and style.css files in that theme's directory with the attached files. OR, you can manually edit same in the following ways (don't forget to backup the existing files in case of mishap!):
In index.template.php, find:
<div id="welcome">';
Add after:
if (!empty($context['user']['avatar']))
echo '
<div id="db-avatar">'.$context['user']['avatar']['image'].'</div>';
In style.css find:
#header {
position: relative;
height: 171px;
overflow: hidden;
background: #343434 url(images/header-bg.gif) repeat-x;
}
#headerleft {
height: 171px;
background: url(images/header-left.gif) 0 0 no-repeat;
position: relative;
}
#headerright {
height: 171px;
background: url(images/header-right.gif) 100% 0 no-repeat;
position: relative;
}
Replace with:
#header {
position: relative;
height: 200px;
overflow: hidden;
background: #343434 url(images/header-bg.gif) repeat-x;
}
#headerleft {
height: 200px;
background: url(images/header-left.gif) 0 0 no-repeat;
position: relative;
}
#headerright {
height: 200px;
background: url(images/header-right.gif) 100% 0 no-repeat;
position: relative;
}
After that, add:
#db-avatar {
float: right;
padding: 0px 0px 10px 5px;
}
Still in style.css, find:
#welcome {
font-size: 1.0em;
color: #fff;
font-family: tahoma, sans-serif;
float: right;
padding: 10px 0 0 0;
text-align: right;
}
Replace with:
#welcome {
font-size: 1.0em;
color: #fff;
font-family: tahoma, sans-serif;
padding: 10px 0 0 0;
text-align: right;
}
EDIT: The avatar bit pasted in with a quirk; edited so it looks cleaner in the post though it shouldn't have a negative bearing if it were pasted into the index.template.php as it was.
EDIT2: There was also a minor change on the #welcome css entry.. included in the manual instructions now, sorry :oops:
[attachment deleted by admin]
-
For the end result, you can go into your profile to Look and Layout preferences and set your theme to Overview (it doesn't have any of the forum's other index template modifications, just the basic index.template.php and style.css from the original download, with the exception of adding the avatar to the Welcome area up top)
-
Yes! That's awesome! Thank you so much.
There was however still one issue. The avatar shows up correctly but the welcome text (Hello blabla you have 3234 messages) was aligned to the right, making it overlap the top grey area of the forum. I looked into the stylesheet.css and fixed it like this:
#welcome {
font-size: 1.0em;
color: #fff;
font-family: tahoma, sans-serif;
float: center;
padding: 20px 30px 0 0;
text-align: right;
}
Basically changing the Float from 'right' to 'center', causing the text to spread evenly and covering only the orange part. What I didn't notice was what exactly the sizechange of the headings did (from 171 to 200px) but it looks okay to me :)
Thanks again Havo <3
-
What I didn't notice was what exactly the sizechange of the headings did (from 171 to 200px) but it looks okay to me :)
Thanks again Havo <3
When I was testing it, the header area being set to a height of 171 pixels was cutting off the bottom of the avatar. I suspect that if you allow for a greater height dimension on avatars it may still cut off taller images, but aside from that it should stay working as desired.
Happy I could help :)
-
Nerds...
/me flees....... \o\
-
Nerds...
No u! :lol:
-
Shush and go make theater.eve-inspiracy.com, codemonkey.
-
Lorebook first imo (haven't forgotten, been buseh! :( )
-
Lorebook first imo
Wait, what?
-
Myyona has agreed to let us add the Lorebook to eve-inspiracy; I just need to set it up and get back to Myyona asap :)
-
/me flees....... \o\
Have you thought of just...putting this in your sig?
-
Won't work in-game. /me does the nyer nyer dance....... \o)... \o/....(o/... o//.... \\o.... /o\
-
Just take Bacch's avatar and get over with it already! :P
(http://img329.imageshack.us/img329/7868/onoz6008040ev7ag3.gif)