Name Icon (V 1.1.2)

[Todge]

Apr 23, 2022 13:59:35 GMT -8 Timebomb007 said:

Hi, Todge . Is it possible to rename or remove "Select your Team Icon" as well as add a space between username and image in Mini-Profile? Thanks.

Edit: Images I’ve tried add below the username, not to the right as it’s set in the plugin settings.

You can remove the 'Select you Team Icon' from the dropdown by adding this to your forums CSS Stylesheet..

#iconDiv u { display: none; }
#iconDiv br:first-of-type { display: none; }

As for the images being placed in the wrong place.. Have you changed the layout of your mini-profile?

[Timebomb007]

Apr 24, 2022 16:38:17 GMT -8 Todge said:

Apr 23, 2022 13:59:35 GMT -8 Timebomb007 said:

Hi, Todge . Is it possible to rename or remove "Select your Team Icon" as well as add a space between username and image in Mini-Profile? Thanks.

Edit: Images I’ve tried add below the username, not to the right as it’s set in the plugin settings.

You can remove the 'Select you Team Icon' from the dropdown by adding this to your forums CSS Stylesheet..

#iconDiv u { display: none; }
#iconDiv br:first-of-type { display: none; }

As for the images being placed in the wrong place.. Have you changed the layout of your mini-profile?

Thanks. Yes. Forum URL: pondfriends.boards.net

Mini Profile template:

SPOILER: Click to show

<div class="$[miniprofile_class]">

$[user]<br />

{if $[user.is_guest]}Guest<br />{/if}

{if $[user.group.id] == "1"}

$[user.group.name]<br />

{elseif $[user.group.stars]}

$[user.group.name] <br />

$[user.group.stars]<br />

{else}$[user.rank.name]<br />

$[user.rank.stars]<br/>{/if}

<br />

<center>{if $[user.avatar]}

<div class="avatar">$[user.avatar]</div>

       {/if}</center>

{if $[user.personal_text.message]}

$[user.personal_text]

{/if}

{if $[user.is_member]}<br />

<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}

           <br /> <a href="/user/$[user.id]/recent">Recent Posts</a>

           <br /> <a href="/user/$[user.id]/recent_threads">Recent Threads</a>

{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}

</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}

   <br /> <a href="/conversation/new/$[user.id]"><img src="http://i.imgur.com/83H21Tc.png"></a>

</div>[/spoiler]

[Todge]

Thank you.

If I put your mini-profile template into my test forum, everything appears to work fine, BUT, I do have a newer version that I haven't added to the library, so can you please try version 1.1.1 and let me know if it works.

If it doesn't, I will need to see it in action on your forum, in that case, I'd need access to a guest friendly thread where the plugin has been used. I will not need to post anything, just to take a look.

[Timebomb007]

Apr 26, 2022 4:36:20 GMT -8 Todge said:

Thank you.

If I put your mini-profile template into my test forum, everything appears to work fine, BUT, I do have a newer version that I haven't added to the library, so can you please try version 1.1.1 and let me know if it works.

If it doesn't, I will need to see it in action on your forum, in that case, I'd need access to a guest friendly thread where the plugin has been used. I will not need to post anything, just to take a look.

Hi. Still happens with 1.1.1. United States flag is showing underneath instead of to the right of my name. Thread: pondfriends.boards.net/thread/9590/test

[Todge]

Apr 26, 2022 15:41:40 GMT -8 Timebomb007 said:

Apr 26, 2022 4:36:20 GMT -8 Todge said:

Thank you.

If I put your mini-profile template into my test forum, everything appears to work fine, BUT, I do have a newer version that I haven't added to the library, so can you please try version 1.1.1 and let me know if it works.

If it doesn't, I will need to see it in action on your forum, in that case, I'd need access to a guest friendly thread where the plugin has been used. I will not need to post anything, just to take a look.

Hi. Still happens with 1.1.1. United States flag is showing underneath instead of to the right of my name. Thread: pondfriends.boards.net/thread/9590/test

Ah-ha..

The issue is with the width of the icon, there's not enough room beside your name to add it, and as you have selected to add it to the right of your name, it is being pushed onto the next line.

There are a few work-arounds to fix that.. You could widen the mini-profile to add room, or reduce the size of the display names in the mini-profile for the same reason, but the easiest way is to reduce the size of the icon.

You can do this by adding this to your forum's CSS Styling..

.team_icon { width: 40px; }

Change the number to one that suits you.

[Timebomb007]

Thanks, Todge. That makes sense.

[Todge]

<p>No worries..

</p>

[Timebomb007]

Todge: Is it possible to add an extra space before my username and flag, not affecting everyone else? There’s extra blue at the beginning of my username from the Display Name Styles plugin. pondfriends.boards.net/thread/9604/test

[Todge]

Apr 29, 2022 16:58:12 GMT -8 Timebomb007 said:

Todge : Is it possible to add an extra space before my username and flag, not affecting everyone else? There’s extra blue at the beginning of my username from the Display Name Styles plugin. pondfriends.boards.net/thread/9604/test

You can try adding this to your CSS Styling..

.mini-profile .user-1 { margin-left: 2px; }

And change the number to suite.

[Hylian]

Is there a way I can have it show up anywhere beside the mini profile?

[Todge]

Jan 24, 2023 23:06:32 GMT -8 Hylian said:

Is there a way I can have it show up anywhere beside the mini profile?

Not with the plugin as-is.

Where are you wanting it to appear?

[Hylian]

Jan 25, 2023 10:37:31 GMT -8 Todge said:

Jan 24, 2023 23:06:32 GMT -8 Hylian said:

Is there a way I can have it show up anywhere beside the mini profile?

Not with the plugin as-is.

Where are you wanting it to appear?

I'm trying to make the mini profile pictures to be like Twitter and other sites with the "ring/circle" CSS effect around your avatar.. unfortunately I ran into a issue to where the "Name Icon" won't appear within the circle or by it...   So I came to the creator for maybe a suggestion.

[Hylian]

Right now I have the layout code as such on the Mini Profile wrapper..
<style>p {
// layout
position: relative;
max-width: 0em;

// looks
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
 box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
}

p::before {
// layout
content: '';
position: absolute;
width: 0;
height: 0;
bottom: 100%;
left: 1.5em; // offset should move with padding of parent
border: .75rem solid transparent;
border-top: none;

// looks
border-bottom-color: #fff;
filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}

// dressing
html {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
line-height: 1.5;
font-weight: 300;
color: #192229;
background: linear-gradient(135deg, #F4F2F3, #BFC6D0);
}


       </style>
$[user.miniprofile]
{if $[user.avatar]}
   <div class=".mini-profile.avatar">
   <div class="avatar">$[user.avatar]</div>
$[user]
   {/if}
     
{if $[user.personal_text.message]}
       <p>$[user.personal_text]</p><br />
{/if}
{if $[user.is_member]}
<div class="info">
💬 Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
           <a href="$[user.follow_button.href]"> <button>Follow</button></a>
{foreach $[user.mini_custom_field]}


             </div>
           {/foreach}
{if $[user.is_online]}<br /><span class="italic">🙂 Member is Online</span>{/if}



SPOILER: Click to show

[Todge]

Jan 25, 2023 11:33:07 GMT -8 Hylian said:

Right now I have the layout code as such on the Mini Profile wrapper..
<style>p {
// layout
position: relative;
max-width: 0em;

// looks
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
 box-shadow:0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
}

p::before {
// layout
content: '';
position: absolute;
width: 0;
height: 0;
bottom: 100%;
left: 1.5em; // offset should move with padding of parent
border: .75rem solid transparent;
border-top: none;

// looks
border-bottom-color: #fff;
filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}

// dressing
html {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
line-height: 1.5;
font-weight: 300;
color: #192229;
background: linear-gradient(135deg, #F4F2F3, #BFC6D0);
}


       </style>
$[user.miniprofile]
{if $[user.avatar]}
   <div class=".mini-profile.avatar">
   <div class="avatar">$[user.avatar]</div>
$[user]
   {/if}
     
{if $[user.personal_text.message]}
       <p>$[user.personal_text]</p><br />
{/if}
{if $[user.is_member]}
<div class="info">
💬 Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
           <a href="$[user.follow_button.href]"> <button>Follow</button></a>
{foreach $[user.mini_custom_field]}


             </div>
           {/foreach}
{if $[user.is_online]}<br /><span class="italic">🙂 Member is Online</span>{/if}



SPOILER: Click to show

Try adding this to your mini-profile CSS..

.team_icon { position: relative; top: 50%; left: 80%; }

and change the numbers to suite..