News:

Wondering if this will always be free?  See why free is better.

Main Menu

Mini Profiles on SMF

Started by Tarissa, October 13, 2012, 02:18:57 PM

Previous topic - Next topic

Tarissa

I am sure I'm not the first, but have searched everywhere and cannot find a place where this is directly addressed.  I would like to create a custom look for the mini-profiles on my SMF forum.  I know it's possible, because it was done on this theme: http://custom.simplemachines.org/themes/index.php?lemma=2485 and shown here.  I don't want mine to be quite so fancy and am actually looking for something a bit more simple like this: http://rgrpg.b1.jcink.com/index.php?showtopic=304&st=0&#entry453.

My problem is that I can't figure out where on Earth I can go and what I need to alter to be able to customize the look of the mini profiles on my forum.

I am using SMF 2.0.2 with the Helios Multi theme.

Any help would be appreciated. Thank you!

Arantor

It's in the code in Display.template.php - but even the normal theme has all of it already, it's just not wrapped up in fancy borders and backgrounds (which mostly serve to make it much larger than it needs to be)

Can't really help you unless you say what you're trying to do - just saying that you want to create a custom look is fine but until we know *how* you want to customise it we can't do any more than point you in the right file.

Tarissa

That's why I linked to a forum that has the kind of mini profile look that I'm going for, since it illustrates far more clearly than describing it.

However, what I'm wanting is to be able to color the table and cells for the mini profile the way I want, and to have places thave have two cells in one row and others that span both.  Basically it would just be a customized table code with simple HTML.  I just don't know where I need to put it or how I need to work around what's there.

Arantor

So... what *exactly* do you want? Instead of saying 'sort of like these other sites but not quite', how about explaining exactly what you're trying to do...?

The layout is complicated because there are lots of permutations based on features that are enabled at any given time.

Tarissa

Hm... Let me throw something together in Photoshop. Give me a couple of minutes.

Tarissa

Okay, that took more than a minute. lol  So, I would be happy if I could just do something pretty much exactly like this http://i.imgur.com/knMcT.jpg .  However, if it was possible I would ideally like to be able to do something more like this: http://i.imgur.com/voYU5.jpg

Oops, the second title up from the bottom on the Trek one says Player Name, but should say Custom.

Tarissa

If someone could just direct me to right area and/or give me some guidance on how I would go about creating even the simple table I would very much appreciate it.

Arantor

Well, as I already said it's in your theme's Display.template.php, specifically inside the <div class="poster"> section.

Tarissa

I don't have a display.template.php for this theme...   

Arantor

Then it'll be Themes/default/Display.template.php.

Tarissa

That template does not exist in this theme. If it did, it would have been the first place I looked.

It has BoardIndex.template.php, GenericMenu.template.php, index.template.php, Settings.template.php, style.css, Themes.template.php  and a couple other small files.  There is no display.template.php here, which is largely what is causing me the problems.

That and I am not sure how to edit the code when I get there to make tables around it.

Arantor

Like I said, it's in the *default* theme. Your theme does not have the Display template, but it must be getting it from *somewhere*, so it gets it from the default theme, which is located in your forum's Themes/default folder.

Tarissa

Alright. my bad.  I didn't notice that you were referencing the default theme. 

I'm really asking someone to let me know the basics of how I might edit this, or to link me to someplace that they talk about it.  I went, I looked, and I'm a pretty smart girl, but without any reference I have no real clue how I would go about starting to edit this.  I even looked at the code of the skin that I referenced in my first post and see some differences, but don't understand them. It references something I can't see anywhere else.

So, basically, I still don't really know how. I don't need a whole tutorial or anything, but a basic explanation of what I do or where I can look for help is all that I'm looking for.

Antechinus

Ok, so you want the name up top, followed by the avatar. That's easy. Then you want a custom image. That's easy too (you just set one group star in admin, with link to the appropriate image).

Then you want four custom fields under a title (custom title?) and then their name again and then a custom image and rearranged default content (postcount, etc) and then a custom heading and then three images.

Umm, you seriously need to learn PHP and CSS and HTML, if you don't already know them. It's the sort of thing where you would need to be able to look at the default template and css and almost instantly understand what you were looking at with every line. You need to be fluent with tearing templates apart and recoding them your way for fun. That's the level of coding knowledge you are talking about. :)

Short version is that I very much doubt you will find a suitable tutorial. Sorry. You may find someone who will do it for you. If you're prepared to persevere and have a go, you can most likely get people to help you along your way. It may well drive you nuts though. :D

Start by asking yourself this: why do you want such a complex result? What do you expect to gain from it? For the same amount of work, is there another alternative that may perhaps be even better?

Tarissa

I am very good at taking examples and editing the hell out of them and making them work for me. xD  But admittedly, not so much at what you are talking about.

Really, it's because I keep seeing it on other forums and I think it looks really cool.  Apparently it's super easy on every forum BUT SMF. lol I was hoping that at least the simple table design would be easy enough on SMF since someone created a much more complicated one for the theme I linked to, but if not then it's probably not worth the effort.  I have looked for alternatives, but to no avail.  I doubt my members care THAT much.  It was just a neat touch that's popping up all over similar forums that I was hoping to emulate.

Thank you for responding.

Antechinus

It's not a table. The markup is primarily lists inside a div. It's probably no harder on SMF than with any other software, but the point is that it does require you to be able to write markup and css, and to test the results and debug them in a range of browsers. Like I said, it may drive you nuts if you're not a reasonably proficient coder.

It's quite possible to get that result, but it's unlikely that anyone will just magically hand you the whole lot already sorted, so you will need a fair amount of determination. Breaking it down:



Assuming the background/frills can be done with one large background image, you can more or less go with default markup until you get down to the four custom fields under the player title. Then, you need to set the li's for that area to half width. Best way would be to set a custom class on them in the markup, and then do the css to suit. What is going to be in those four fields? Images? Text? How much text? Will you allow for people who aren't using standard text sizes in their browsers, or will you force them to your preferred size?

Underneath that you have indicated a custom image at the left, with stacked text content at the right. How will this work? There doesn't seem to be enough space for the text shown and the numbers/dates that will be associated with it.

What about the three images at the bottom? Are they static badges? Are they linked somewhere? What's their function?

Tarissa

To be honest, since this is the more complicated one, I would probably try the other first since it's more of a bunch of table commands.... unless you're saying they would be equally complicated.   In that case, sure, I'd like to do the one you showed.

The frills would be the background image, yes.  I suppose I would then just have to line up the text within them... perhaps enable something so that anyone with more information The custom fields are all text except the ones in white which say they are images.  The images would be about the sizes listed.  I'm not too worried about creating the custom fields.  I don't think that will be hard.  The custom images there won't need much, if any, special coding either.  I do want to take the titles out/alter the titles on a few of those fields for the reason you mentioned where there won't be enough room in some places. 

I am definitely capable of setting CSS needed.  All except the background image, which I'm not certain how I would put it on. What do you mean when you say the 'markup'?  The default display template?

I'm going to go look more closely at whats there and see what I might be able to figure out.

The images at the bottom are going to be very small badges.

Antechinus

#17
Don't use tables. Srsly. Table-based markup is evil, unless you are actually presenting tabular data (a spreadsheet, for example). Lists and divs are much better.

The easiest way to do the background image would be to set it on the .poster div, which wraps all the other stuff.

Markup is the template itself, or more specifically the html components of the template.

ETA: This is the default template/markup for the areas that interest you:

// This would be Line 239 of a default file. I've snipped most of the template and just left the actual default user area.
// Show information about the poster of this message. (The class="poster" div is the one you would set your main background image on).
echo '
<div class="poster">
<h4>';

// Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
echo '
', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';

// Show a link to the member's profile.
echo '
', $message['member']['link'], '
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';

// Show the member's custom title, if they have one.
if (!empty($message['member']['title']))
echo '
<li class="title">', $message['member']['title'], '</li>';

// Show the member's primary group (like 'Administrator') if they have one.
if (!empty($message['member']['group']))
echo '
<li class="membergroup">', $message['member']['group'], '</li>';

// Don't show these things for guests.
if (!$message['member']['is_guest'])
{
// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
echo '
<li class="postgroup">', $message['member']['post_group'], '</li>';
echo '
<li class="stars">', $message['member']['group_stars'], '</li>';

// Show avatars, images, etc.?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
<li class="avatar">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</li>';

// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<li class="postcount">', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';

// Is karma display enabled?  Total or +/-?
if ($modSettings['karmaMode'] == '1')
echo '
<li class="karma">', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '</li>';
elseif ($modSettings['karmaMode'] == '2')
echo '
<li class="karma">', $modSettings['karmaLabel'], ' +', $message['member']['karma']['good'], '/-', $message['member']['karma']['bad'], '</li>';

// Is this user allowed to modify this member's karma?
if ($message['member']['karma']['allow'])
echo '
<li class="karma_allow">
<a href="', $scripturl, '?action=modifykarma;sa=applaud;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.' . $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $modSettings['karmaApplaudLabel'], '</a>
<a href="', $scripturl, '?action=modifykarma;sa=smite;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $modSettings['karmaSmiteLabel'], '</a>
</li>';

// Show the member's gender icon?
if (!empty($settings['show_gender']) && $message['member']['gender']['image'] != '' && !isset($context['disabled_fields']['gender']))
echo '
<li class="gender">', $txt['gender'], ': ', $message['member']['gender']['image'], '</li>';

// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<li class="blurb">', $message['member']['blurb'], '</li>';

// Any custom fields to show as icons?
if (!empty($message['member']['custom_fields']))
{
$shown = false;
foreach ($message['member']['custom_fields'] as $custom)
{
if ($custom['placement'] != 1 || empty($custom['value']))
continue;
if (empty($shown))
{
$shown = true;
echo '
<li class="im_icons">
<ul>';
}
echo '
<li>', $custom['value'], '</li>';
}
if ($shown)
echo '
</ul>
</li>';
}

// This shows the popular messaging icons.
if ($message['member']['has_messenger'] && $message['member']['can_view_profile'])
echo '
<li class="im_icons">
<ul>
', !empty($message['member']['icq']['link']) ? '<li>' . $message['member']['icq']['link'] . '</li>' : '', '
', !empty($message['member']['msn']['link']) ? '<li>' . $message['member']['msn']['link'] . '</li>' : '', '
', !empty($message['member']['aim']['link']) ? '<li>' . $message['member']['aim']['link'] . '</li>' : '', '
', !empty($message['member']['yim']['link']) ? '<li>' . $message['member']['yim']['link'] . '</li>' : '', '
</ul>
</li>';

// Show the profile, website, email address, and personal message buttons.
if ($settings['show_profile_buttons'])
{
echo '
<li class="profile">
<ul>';
// Don't show the profile button if you're not allowed to view the profile.
if ($message['member']['can_view_profile'])
echo '
<li><a href="', $message['member']['href'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/icons/profile_sm.gif" alt="' . $txt['view_profile'] . '" title="' . $txt['view_profile'] . '" />' : $txt['view_profile']), '</a></li>';

// Don't show an icon if they haven't specified a website.
if ($message['member']['website']['url'] != '' && !isset($context['disabled_fields']['website']))
echo '
<li><a href="', $message['member']['website']['url'], '" title="' . $message['member']['website']['title'] . '" target="_blank" class="new_win">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/www_sm.gif" alt="' . $message['member']['website']['title'] . '" />' : $txt['www']), '</a></li>';

// Don't show the email address if they want it hidden.
if (in_array($message['member']['show_email'], array('yes', 'yes_permission_override', 'no_through_forum')))
echo '
<li><a href="', $scripturl, '?action=emailuser;sa=email;msg=', $message['id'], '" rel="nofollow">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . '" />' : $txt['email']), '</a></li>';

// Since we know this person isn't a guest, you *can* message them.
if ($context['can_send_pm'])
echo '
<li><a href="', $scripturl, '?action=pm;sa=send;u=', $message['member']['id'], '" title="', $message['member']['online']['is_online'] ? $txt['pm_online'] : $txt['pm_offline'], '">', $settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/im_' . ($message['member']['online']['is_online'] ? 'on' : 'off') . '.gif" alt="' . ($message['member']['online']['is_online'] ? $txt['pm_online'] : $txt['pm_offline']) . '" />' : ($message['member']['online']['is_online'] ? $txt['pm_online'] : $txt['pm_offline']), '</a></li>';

echo '
</ul>
</li>';
}

// Any custom fields for standard placement?
if (!empty($message['member']['custom_fields']))
{
foreach ($message['member']['custom_fields'] as $custom)
if (empty($custom['placement']) || empty($custom['value']))
echo '
<li class="custom">', $custom['title'], ': ', $custom['value'], '</li>';
}

// Are we showing the warning status?
if ($message['member']['can_see_warning'])
echo '
<li class="warning">', $context['can_issue_warning'] ? '<a href="' . $scripturl . '?action=profile;area=issuewarning;u=' . $message['member']['id'] . '">' : '', '<img src="', $settings['images_url'], '/warning_', $message['member']['warning_status'], '.gif" alt="', $txt['user_warn_' . $message['member']['warning_status']], '" />', $context['can_issue_warning'] ? '</a>' : '', '<span class="warn_', $message['member']['warning_status'], '">', $txt['warn_' . $message['member']['warning_status']], '</span></li>';
}
// Otherwise, show the guest's email.
elseif (!empty($message['member']['email']) && in_array($message['member']['show_email'], array('yes', 'yes_permission_override', 'no_through_forum')))
echo '
<li class="email"><a href="', $scripturl, '?action=emailuser;sa=email;msg=', $message['id'], '" rel="nofollow">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . '" />' : $txt['email']), '</a></li>';

// Done with the information about the poster... on to the post itself.
echo '
</ul>
</div><!-- /poster -->


And this is the corresponding css:

/* poster and postarea + moderation area underneath */
.post_wrapper
{
float:left;
width:100%;
}
.poster
{
float: left;
width: 15em;
}
.postarea, .moderatorbar
{
margin: 0 0 0 16em;
}
.postarea div.flow_hidden
{
width: 100%;
}

.moderatorbar
{
clear: right;
}
/* poster details and list of items */
.poster h4, .poster ul
{
padding: 0;
margin: 0 1em 0 1.5em;
}
.poster h4
{
margin: 0.2em 0 0.4em 1.1em;
font-size: 120%;
}
.poster h4, .poster h4 a
{
color: #c06002;
}
.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li
{
display: inline;
}
.poster li.stars, .poster li.avatar, .poster li.blurb, li.postcount, li.im_icons ul
{
margin-top: 0.5em;
}
.poster li.avatar
{
overflow: hidden;
}
.poster li.warning
{
line-height: 1.2em;
padding-top: 1em;
}
.poster li.warning a img
{
vertical-align: bottom;
padding: 0 0.2em;
}

Tarissa

Yes, sorry I didn't respond earlier. I'd already started experimenting with some really good results.  I was struggling to position the background image the way I wanted, but came up with a few ideas to try in the future.  What css file did you find the poster data in? I was creating my own in the theme's style.css, but didn't find the one with the original post data. Is it referenced from the default theme also?

Antechinus

The poster stuff is in the 2.0.x default theme index.css. It starts on Line 1916. Any custom theme has to call its own files. Templates can be called from default, but not index.css (well,  it's theoretically possible but is never done afaik).

Usually, custom themes for 2.0 will just copy the default theme index.css and either edit it in some places, or just add the custom bits to the end of the file. Either way works. The first way makes for a smaller file. The second way is less work (until you get confused about which declaration is controlling your element).

FireDitto

This Tutorial is really great for editing the mini profiles! You can do so much with them, especially alongside the Custom Profile Fields.
Second Pass Weyr<br />An AU Pernse RPG<br /><br />SMF 2.0.6 with SP 2.3.5

Advertisement: