Mini-Profile Help. (customizing question)

[Former Member]

Forum URL: (private)

Hello! New here with coding and such. I have looked around the support for codes, found a few--- but, I am wondering if I can get some help with, making the mini-profile look like this? I have used Photoshop to give the idea of what I am after.



^ The above, I want the group name to be at the top, display name under it and removal of the stars without so much space in between the display name and avatar, and if possible the background to the group changes depending on the group colors? If this make sense? I found a code on here that did the 'online/post' part, but other than that, I can't do the rest. I would also like to control the outer border's thickness.

I want to keep avatars at 100x100.

[Nori]

Evening Sllvn ^^

I whipped something up quick that is fairly close to what you have, is just minus any specific font styles.


In the Layout Templates -> Mini-Profile, replace the entire thing with this code:

SPOILER: Click to show

<div class="$[miniprofile_class]">
<div class="blk-block user-type">
    {if $[user.group]}
$[user.group.name] <br />
{elseif $[user.rank]}
$[user.rank.name] <br />
   {elseif $[user.is_guest]}
    Guest<br />
   {elseif $[user.is_deleted]}
    <em>Deleted Member</em><br />
   {/if}
   </div>
   
   $[user]

{if $[user.custom_title]}$[user.custom_title]<br />{/if}
$[user.warning.bar]
<br />
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}

{if $[user.is_member]}
<div class="info">
           <div class="blk-block">
               {if $[user.is_online]} Online {else} Offline {/if} <br />
           </div>
Posts: $[user.posts]
{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}
</div> <br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>


At the bottom of your CSS Style Sheet (Advanced Styles & CSS) put this:

SPOILER: Click to show

/* Mini Profile Styles */

.mini-profile, .even .mini-profile {
   width:124px;
   background: #FFF;
   border-radius:0px;
   border:1px solid #ADADAD;
   padding: 0px;
   
   text-align:center;
}
.blk-block { background:#000; padding: 3px 0px; text-transform:uppercase; color:#fff; }

div.mini-profile a, .even div.mini-profile a { text-transform:uppercase; letter-spacing:2px; color: #ADADAD; }

.mini-profile .avatar-wrapper { padding-top:5px; width:100px; height:100px; }
.mini-profile .avatar, .mini-profile .avatar-wrapper img { max-width:100px; max-height:100px; }

.mini-profile .info, .even .mini-profile .info { width:100px; margin:0px auto; border:3px solid #EEE; padding-bottom:1px; text-align:center; }

/* End Mini Profile Styles */


Then, ctrl+f your CSS style sheet for '.left-panel' and change the width to 132px for both times it comes up (posts & messages).



Feel free to edit whatever you like to fit your vision. I did this a bit rushed before I head off to make food so hope I didn't make any blunders but the support home's here if I did xD

Have a great night.

[Former Member]

UPDATE 2: Okay, I think I fixed it now. ^^

Thanks again for all your help. I really do appreciate it.

[Nori]

Oh perfect! I saw your first update before I headed out to class. Glad you got it all worked out ^^

Cheers!