remodeling mini profile

[m a r i]

Hello! I'm looking to remodel my mini-profile to make it look sleek, but simple. Something sort of like THIS, possibly? The designs I've seen going around the support forum I also really like. I'm just not sure how to design one myself, or where to find a remodel I would like. I've checked Adoxography, this forum, and Slightly Insane already so I'm not sure where to look.

So basically I'm just looking for resources for building a mini-profile or even already existing mini-profiles that I could use.

[Brian]

Hi, m a r i.

That one should be easy enough to manually duplicate.

Go to Themes > Layout Templates > Mini-Profile and find this section.

SPOILER: Click to show

{if $[user.is_member]}
    <div class="info">
        Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
        {foreach $[user.mini_custom_field]}
         <br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
        {/foreach}
        {if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
    </div><br />
{/if}

Change it to this.

SPOILER: Click to show

{if $[user.is_member]}
    <div class="info">
        <div class="item online">{if $[user.is_online]}Online{else}Offline{/if}</div>
        <div class="item posts">Posts: $[user.posts]</div>
        {if $[user.gender]}<div class="item gender">$[user.gender.image]</div>{/if}
        {foreach $[user.mini_custom_field]}
         <div class="item custom"><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span></div>
        {/foreach}
    </div><br />
{/if}

Next, go to Themes > Advanced Styles & CSS and click on the Mini-Profiles section. Change the Border Color to whatever color you want, the Border Radius to 0px and the Text Align to center. Save that, then click on the Style Sheet tab. Copy this to the bottom of the style sheet.

@mini_info_border: 5px solid @container_inner_border_color;
@mini_online_background: #366396;
@mini_online_text_color: #fff;
.mini-profile, .even .mini-profile { border-width: 15px 1px; }
.mini-profile .info, .even .mini-profile .info { border: @mini_info_border; text-align: center; }
.mini-profile .info .item { border-bottom: @mini_info_border; border-bottom-width: 1px; }
.mini-profile .info .item:last-child { border-bottom-width: 0; }
.mini-profile .info .online { text-transform: uppercase; letter-spacing: 2px; border-bottom: 0px; background: @mini_online_background; color: @mini_online_text_color; }

Once that's done your mini-profile should look very similar to the one you linked.