Customizing SMF > Graphics and Templates

Attempting to put "Personal Text" on Profile page under the avatar

(1/1)

rickmastfan67:
Right now, I'm trying to attempt to duplicate how the "Personal Text" was placed under the Avatar in 1.1.16 in 2.0 for a theme.  So, I start out by copying the "Profile.template.php" file to the theme I'm working on (based off the *Core* theme) from the *default* theme since *core* uses the same file.  I then find the section that mentions the "Personal Text" and copy the string and put it in the same area as the avatar strings as such:

--- Code: (Profile.template.php) --- <div id="basicinfo">
<div class="windowbg">
<span class="topslice"><span></span></span>
<div class="content flow_auto">
<div class="username"><h4>', $context['member']['name'], ' <span class="position">', (!empty($context['member']['group']) ? $context['member']['group'] : $context['member']['post_group']), '</span></h4></div>
', $context['member']['avatar']['image'], $context['member']['blurb'], '
<ul class="reset">';

--- End code ---
So, then I went to look at my profile to see if it worked.  That little bit of coding did work on one of the views (see worked.png attached), but not the other (see didntwork.png attached).

Now, what I'm attempting to do on the "didntwork.png" picture is to get the "Personal Text" to either be centered under the avatar there, or at least be right justified under the avatar instead of having it being shown right beside the username.

Does anybody have any suggestions on how to possibly do this?  Is my coding above fine and I have to look at trying to get this to work via the CSS file somehow?

Any help would be greatly appreciated.  Thanks. :)

rickmastfan67:
Alright, I JUST figured it out. ;D

So, for those that want to do this in any Curve or Core theme, listen up! ;)

1) Copy the "Profile.template.php" file from the "\Themes\default" folder into your custom theme.
2) Open that newly copied "Profile.template.php" file in your editor (I recommend "Notepad ++").
3) Find the following code:
--- Code: --- ', $context['member']['avatar']['image'], '
--- End code ---
& then replace it with the following:
--- Code: --- <div class="blurb">', $context['member']['avatar']['image'], $context['member']['blurb'], '</div>
--- End code ---
3a) If you don't want the "Personal Text" to show up a second time under the "Custom Title" line on your profile page, find the following code and delete it from your custom "Profile.template.php" file.  If you do want it to, just ignore this step.

--- Code: --- if (!empty($context['member']['blurb']))
echo '
<dt>', $txt['personal_text'], ': </dt>
<dd>', $context['member']['blurb'], '</dd>';

--- End code ---

4) Now open up your "index.css" file in your custom theme's css folder.
5) Find the following code: (NOTE: the Margin numbers may be different depending if the theme was built off the "default Curve" theme or the "Core" theme.)

--- Code: ---#basicinfo img.avatar
{
display: block;
margin: 10px 0 0 0;
}

--- End code ---
Replace with:

--- Code: ---#basicinfo img.avatar
{
display: block;
margin: 10px 0 10px 5px;
}

--- End code ---
Then find:

--- Code: ---#main_admsection #basicinfo img.avatar
{
float: right;
vertical-align: top;
}

--- End code ---
and replace with:

--- Code: ---#main_admsection #basicinfo .blurb
{
float: right;
text-align: center;
margin-right: 8px;
margin-top: 40px;
}
#main_admsection #basicinfo .blurb img.avatar
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -44px;
margin-bottom: 5px;
}

--- End code ---

That should allow you get the Avatar and the Personal Text together on the right side of the screen just like in the 1.1.x profiles.

If you have any questions, I'd be happy to answer them. :)

Navigation

[0] Message Index