Mini-Profile Issues

[• Ambrose •]

Forum URL: areion.boards.net

I understand that this might need to be moved to the Coding section of PBS, but I have to ask you to please not do that because I really need help on this! I actually have a few threads in that section that have yet to be replied to and it's been months. Well, for this specific forum, I have been trying to work at it since I first started to add it, a little over a year ago, and I still can't figure it out. I even had a friend who tried to come and help me but even then it was just a jumble of boxes that didn't appear in the mini-profile right. She's been long gone now and so I'm taking up the slack trying to fix it.

I found another code that looked easier and so far I followed it to the best of my understanding... Then came the CSS and, ultimately, the Layout Template parts... This is what I used: support.proboards.com/thread/491844/original-hover-profile-colors-staff

As far as I can see, the CSS part is working okay except for one thing; the Ghost group doesn't have that border around it, though it should. I'm planning to add more groups too, so I want to make sure the CSS would work. For Guests, can they also have a border?

The Layout Templates are the worst part of this code because I cannot, for the life of me, get the boxes arranged properly...

I also want it a specific way if that's possible;

Students should not have Occupation or Subject showing in their mini-profile.

Mentors (Professors in the Potterverse) shouldn't have Year and House showing. I'm not really worried about the Age bit but it helps.

Other staff (Caretakers, Doctors, Librarians, etc.) should only have Age and Occupation showing, if that's possible, along with Blood Status, Sexual Orientation, and Relationship Status.

Lastly, the Ghosts are not students nor are they mentors... I am not sure what they should have, maybe a box that says they are deceased? Much like with the Guests, where it would just say they are a Guest.

Also, this little thing aggravates me because I can't figure out where it came from, since there's nothing showing up except a couple of dashes -- there's a dropdown button in the mini-profile when you hover over it. There shouldn't be anything like that.

The custom field names are showing in the profile but they aren't showing in the mini-profile.

Also, not sure why but it shouldn't show that House on the bottom (if you peruse the screenshot I send of my character.)


LAYOUT TEMPLATE

<!-- Mini-Profile by Nick of Fidelius -->
<div class="{if $[user.group.name] == "Administrator"}
admin
{elseif $[user.group.name] == "Moderator"}
moderator
{elseif $[user.group.name] == "Cronus"}
cronus
{elseif $[user.group.name] == "Artemis"}
artemis
{elseif $[user.group.name] == "Eros"}
eros
{elseif $[user.group.name] == "Hecate"}
hecate
{elseif $[user.group.name] == "Osiris"}
osiris
{elseif $[user.group.name] == "Mentor"}
mentor
{elseif $[user.group.name] == "Caretaker"}
caretaker
{elseif $[user.group.name] == "Librarian"}
librarian
{elseif $[user.group.name] == "Doctor"}
doctor
{elseif $[user.group.name] == "Nurse"}
nurse
{elseif $[user.group.name] == "Cook"}
cook                                    
{elseif $[user.group.name] == "Head"}
head
{elseif $[user.group.name] == "Deputy Head"}
deputyhead
{/if}">

<div class="$[miniprofile_class]" style="width:200px;height:400px;">
<div class="profilehead"><div style="padding-top:15px;text-shadow: 1px 1px 1px #000; color: #ffffff;">$[user]{if $[user.custom_title]}<br />$[user.custom_title]{/if}
</div> </div>
<div style="width:100%;height:300px;background-image: url('http://storage.proboards.com/5598878/i/V4FVmNuKAkTX5MxkH7M9.png');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Hover Image"}background-image:url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;text-align:center;clear:both;"><div class="pphover"><div class="ppinside">
<div style="height:5px;clear:both;"></div>
<div style="max-width:150px;max-height:150px;margin-left:auto;margin-right:auto;">$[user.avatar]</div>

<section class="ac-container">
<!-- <label><input name="accordion-1" type="radio" /><div class="leifbox" style="width:180px;height:20px;text-align:center;margin-left:10px;margin-top:-5px;line-height:20px;font-size:12px;">In Character</div></label> -->
<article class="ac-small article-show">
<!-- In Character -->
<!-- CUSTOM BOX ONE -->
<div class="leifbox">
<span class="magicalability" title="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Magical Abilities"}$[user.mini_custom_field.value]{/if}{/foreach}">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Blood Status"}$[user.mini_custom_field.value]{/if}{/foreach}</span>
</div>
<!-- END CUSTOM BOX ONE-->
<!-- CUSTOM BOX TWO -->
<div class="leifbox">
<span title="Age">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Age"}$[user.mini_custom_field.value]{/if}{/foreach}</span> <span title="Year">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value]{/if}{/foreach}</span>
</div>
<!-- END CUSTOM BOX TWO-->
<!-- CUSTOM BOX THREE -->
<div class="leifbox">
<span title="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Age"}$[user.mini_custom_field.value] year{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value] at{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "House"}$[user.mini_custom_field.value]{/if}{/foreach}</span>
</div>
<!-- END CUSTOM BOX THREE-->
<!-- CUSTOM BOX FOUR -->
<div class="leifbox">
<span title="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Blood Status"}$[user.mini_custom_field.value] year{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Sexual Orientation"}$[user.mini_custom_field.value] at{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Relationship Status"}$[user.mini_custom_field.value]{/if}{/foreach}</span>
</div>
<!-- END CUSTOM BOX FOUR-->
<!-- CUSTOM BOX FIVE -->
<div class="leifbox">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Occupation"}<span title="$[user.mini_custom_field.value]">Job</span>{/if}{/foreach}
</div>
<!-- END CUSTOM BOX FIVE -->
<!-- CUSTOM BOX SIX -->
<div class="leifbox">

<!-- drop test-->

<form name="theash">
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" style="width:75px;height:18px;margin-top:1px;border:0px;">
<option selected="selected"> ------</option>
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Application"}<option value="$[user.mini_custom_field.value]">APP</option>{/if}{/foreach}
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Plotter"}<option value="$[user.mini_custom_field.value]">PLOT</a>{/if}{/foreach}
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Tracker"}<option value="$[user.mini_custom_field.value]">TRACKER</a>{/if}{/foreach}

</select>
</form>

</div>
<!-- END CUSTOM BOX SIX -->

<!-- End In Character -->
</article>
<!-- <label><input name="accordion-1" type="radio" /><div class="leifbox" style="width:180px;height:20px;text-align:center;margin-left:10px;margin-top:-15px;line-height:20px;font-size:12px;">Out of Character</div></label> -->
<article class="ac-medium">
<!-- Out of Character -->

<div class="leifbox" style="float:left;height:20px;text-align:center;margin-right:5px;margin-left:10px;line-height:20px;">
$[user.posts] posts
</div>
<div class="leifbox" style="float:left;height:20px;text-align:center;margin-right:10px;margin-left:5px;line-height:20px;">
$[user.likes] likes
</div><div style="clear:both;"></div>
<div class="leifbox" style="height:20px;text-align:center;margin-top:5px;margin-right:5px;margin-left:10px;line-height:20px;">
<img src="http://i.imgur.com/xrTtguD.png" style="width:15px;height:14px;" /> <span class="money_amount" title="Galleons"></span>

</div>
<div class="leifbox" style="height:20px;text-align:center;margin-top:5px;margin-right:10px;margin-left:5px;line-height:20px;">

{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Alias"}{if $[user.is_online]}<span style="color:#8ccf55;" title="Online">$[user.mini_custom_field.value]</span>
{else} <span title="Offline" style="color:#cf5558;">$[user.mini_custom_field.value]</span>{/if}{/if}{/foreach}



</div>

{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "MP3 Link"}
<div class="leifbox" style="float:left;width:180px;height:20px;text-align:center;margin-top:5px;margin-left:10px;line-height:20px;">
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100%" height="100%"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="wmode" value="transparent"/><param name="FlashVars" value="mp3=$[user.mini_custom_field.value]"/><br></object>
</div>
{/if}
{/foreach}

<!-- End out of Character -->

</article>

</section>


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

</div>
</div>

CSS

/* Start Mini-Profile CSS */

.ppinside { width:200px; height:300px; opacity:0;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
.ppinside:hover { width:200px; height:300px; opacity: 1; background-color:#52374d;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
.ppinside { width:200px; height:300px; margin:auto; text-align:center; }
.leifbox { width: 85px; height:20px; overflow:hidden; float:left; z-index:1; text-align:center; margin-left:10px;line-height:20px; margin-top:5px;}
div.leifbox { background-color: #212429; color: #ffffff; text-align:center; }
.leifbox select {
background: #212429;
width: 75px;
border: 0;
border-radius: 0;
height: 20px;
color: #e6e8e3;
}
.ac-container{
width: 100%;
margin: 5px auto 5px auto;
}
.ac-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
margin-left:-20px;
height: 20px;
cursor: pointer;
// text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 20px;
// font-size: 19px;
}
//.ac-container label:hover{ background: #5F512E; }
.ac-container input{ display: none; }
.ac-container article{
//background: rgba(37, 37, 39, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article.article-show{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
}
.ac-container article p{
font-style: italic;
color: #EFEFEF;
line-height: 23px;
font-size: 11px;
padding: 3px;

}
.ac-container article.article-show{ height: 90px; overflow:hidden; margin:auto; }

.profilehead {
width:100%;
height:50px;
text-align:center;
overflow:hidden;
background-color: #181818;
}

// the below is how you color your border :)
div.admin div.mini-profile { border: 4px solid #e5e5e5; }
div.moderator div.mini-profile { border: 4px solid #c5c5c5; }
div.cronus div.mini-profile { border: 4px solid #cd7f32; }
div.artemis div.mini-profile { border: 4px solid #228b22; }
div.eros div.mini-profile { border: 4px solid #db7093; }
div.hecate div.mini-profile { border: 4px solid #6f2da8; }
div.osiris div.mini-profile { border: 4px solid #394243; }
div.ghost div.mini-profile { border: 4px solid #a5f2f3; }
/* div.mentor div.mini-profile { border: 4px solid 000000; }
div.caretaker div.mini-profile { border: 4px solid 000000; }
div.cook div.mini-profile { border: 4px solid 000000; }
div.librarian div.mini-profile { border: 4px solid 000000; }
div.doctor div.mini-profile { border: 4px solid 000000; }
div.nurse div.mini-profile { border: 4px solid 000000; }
div.deputy headmistress div.mini-profile { border: 4px solid 000000; }
div.deputy headmaster div.mini-profile { border: 4px solid 000000; }
div.headmistress div.mini-profile { border: 4px solid 000000; }
div.headmaster div.mini-profile { border: 4px solid 000000; } */

/* End Mini-Profile Code */

Attachments:

[• Ambrose •]

Sorry for the double-post (can't edit anymore,) but I updated the Layout Template code since then and there are still some issues. For instance, I'm not sure how to make it so that certain fields show for certain groups (such as Students having only Houses and their Years showing while Mentors would have that they are Mentors and the subject they are teaching.) It also seems to cut off the two boxes at the bottom for some reason.

Lastly, I would like to add App Track Plot at the bottom but only as links, not as drop-down menus.

I still need to fix where that Hecate thing is, that Hecate thing should only be showing the player's alias and not act as a link either. I did change the CSS some to add a longer box for House and Subject (though Subject and Occupation have yet to be added to the Layout Template because I haven't figured out how to make sure they don't show on both.

<!-- Mini-Profile by Nick of Fidelius -->
<div class="{if $[user.group.name] == "Administrator"}
admin
{elseif $[user.group.name] == "Moderator"}
moderator
{elseif $[user.group.name] == "Cronus"}
cronus
{elseif $[user.group.name] == "Artemis"}
artemis
{elseif $[user.group.name] == "Eros"}
eros
{elseif $[user.group.name] == "Hecate"}
hecate
{elseif $[user.group.name] == "Osiris"}
osiris
{elseif $[user.group.name] == "Ghost" }
ghost
{elseif $[user.group.name] == "Mentor"}
mentor
{elseif $[user.group.name] == "Caretaker"}
caretaker
{elseif $[user.group.name] == "Librarian"}
librarian
{elseif $[user.group.name] == "Doctor"}
doctor
{elseif $[user.group.name] == "Nurse"}
nurse
{elseif $[user.group.name] == "Cook"}
cook                                    
{elseif $[user.group.name] == "Headmistress"}
headmistress
{elseif $[user.group.name] == "Deputy Headmistress"}
deputy headmistress                                                  
{elseif $[user.group.name] == "Headmaster"}
headmaster
{elseif $[user.group.name] == "Deputy Headmaster"}
deputy headmaster
{/if}">

<div class="$[miniprofile_class]" style="width:200px;height:400px;">
<div class="profilehead"><div style="padding-top:15px;text-shadow: 1px 1px 1px #000; color: #ffffff;">$[user]{if $[user.custom_title]}<br />$[user.custom_title]{/if}
</div> </div>
<div style="width:100%;height:300px;background-image: url('https://s26.postimg.cc/x8juqq6q1/Guest_Hover.png');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Hover Image"}background-image:url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;text-align:center;clear:both;"><div class="pphover"><div class="ppinside">
<div style="height:5px;clear:both;"></div>
<div style="max-width:150px;max-height:150px;margin-left:auto;margin-right:auto;">$[user.avatar]</div>

<section class="ac-container">
<!-- <label><input name="accordion-1" type="radio" /><div class="leifbox" style="width:180px;height:20px;text-align:center;margin-left:10px;margin-top:-5px;line-height:20px;font-size:12px;">In Character</div></label> -->
<article class="ac-small article-show">
<!-- In Character -->
<!-- CUSTOM BOX ONE -->
<div class="areionlong">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "House"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX ONE-->
<!-- CUSTOM BOX TWO -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Age"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX TWO-->
<!-- CUSTOM BOX THREE -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Race"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>    
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Blood Status"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX THREE-->
<!-- CUSTOM BOX FOUR -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Sexual Orientation"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Relationship Status"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX FOUR-->
<!-- CUSTOM BOX FIVE -->
APPPLOTTRACK
<!-- END CUSTOM BOX FIVE -->

<!-- End In Character -->
</article>
<!-- <label><input name="accordion-1" type="radio" /><div class="leifbox" style="width:180px;height:20px;text-align:center;margin-left:10px;margin-top:-15px;line-height:20px;font-size:12px;">Out of Character</div></label> -->
<article class="ac-medium">
<!-- Out of Character -->

<div class="leifbox" style="float:left;height:20px;text-align:center;margin-right:5px;margin-left:10px;line-height:20px;">
$[user.posts] posts
</div>
<div class="leifbox" style="float:left;height:20px;text-align:center;margin-right:10px;margin-left:5px;line-height:20px;">
$[user.likes] likes
</div><div style="clear:both;"></div>
<div class="leifbox" style="height:20px;text-align:center;margin-top:5px;margin-right:5px;margin-left:10px;line-height:20px;">
<img src="http://i.imgur.com/xrTtguD.png" style="width:15px;height:14px;" /> <span class="money_amount" title="Galleons"></span>

</div>
<div class="leifbox" style="height:20px;text-align:center;margin-top:5px;margin-right:10px;margin-left:5px;line-height:20px;">

{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Alias"}{if $[user.is_online]}<span style="color:#8ccf55;" title="Online">$[user.mini_custom_field.value]</span>
{else} <span title="Offline" style="color:#cf5558;">$[user.mini_custom_field.value]</span>{/if}{/if}{/foreach}



</div>

{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "MP3 Link"}
<div class="leifbox" style="float:left;width:180px;height:20px;text-align:center;margin-top:5px;margin-left:10px;line-height:20px;">
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100%" height="100%"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="wmode" value="transparent"/><param name="FlashVars" value="mp3=$[user.mini_custom_field.value]"/><br></object>
</div>
{/if}
{/foreach}

<!-- End out of Character -->

</article>

</section>


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

</div>
</div>

[Brian]

Jul 24, 2018 22:35:38 GMT -8 • Ambrose • said:

I understand that this might need to be moved to the Coding section of PBS, but I have to ask you to please not do that because I really need help on this! I actually have a few threads in that section that have yet to be replied to and it's been months.

I understand the reason you've posted this in the Support Board, but that doesn't change the fact that the Support Board is specifically for technical support and not design help. We simply do not have the time to fix every template issue that gets posted which is why ProBoards admin participation in the Coding & Development category is on a voluntary basis.

Diagnosing template issues ends up taking incredibly long not just because we have to identify the cause of the problem, but because we also have to sort through code that more often than not ends up not being formatted in the most ideal manner (there's a reason the editor automatically indents the next line after an HTML tag has been opened—indented code blocks are more readable than all of the tags bunched together since you can identify ancestors and children at just a glance).

I personally visit the boards in the Coding & Development category multiple times throughout my work day, but if a coding issue takes more time than I have available my other obligations will unfortunately take precedence.

[tis ✻ bry]

As someone who does occasional help here, usually, the factor that I use to determine whether I reply or not is the skill level--I'm an entirely self-taught coder, so there's a lot of things I don't grasp yet, and thus I'm not able to answer questions. As of late, that is in the last several weeks, I've been visiting this support forum and reading every new / updated thread here. I also feel that there are a few other users who do this as well, but who also might not know enough to understand, or like Brian, don't want to spend the time to work out a very complicated issue.

Alright, so that said, I'll do my best to help you here because I think this is within my realm. There are a lot of queries here, so just to be clear, in your first post you specified:

1) The border around the mini-profile for ghosts isn't working;
2) You would like a border for guests as well (which, yes, should be able to be done);
3) How to do the whole thing with the different membergroups = different custom fields displayed;
4) How to remove the dropdown that shouldn't be there;
5) Custom field names aren't showing in the mini-profile at all;
6) and there's an added word on the bottom ('Hecate', in your screenshot), which you don't want to necessarily remove, but change to a name only.

And then from your second post, you seem to have resolved some of these, so what we're left with is:

3), 6), and a new question,
7) Adding App / Plot / Track links where specified in the layout template code you've posted.

If you're still having any of the issues listed in your first post, let me know and I can help you with those too.

Alright, so using your css and html:

3) Different membergroups = different custom fields

The way to do this would be like the way you have your border colors based on membergroups set up at the very beginning of the template. So you'd place this following code immediately below <!-- In Character --> and go from there. You can place which boxes/custom fields you want for each set of membergroups within the corresponding if/elseif statement:

SPOILER: Click to show

{if $[user.group.name] == "Cronus" || $[user.group.name] == "Artemis" || $[user.group.name] == "Eros" || $[user.group.name] == "Hecate" || $[user.group.name] == "Osiris"}
<!-- PUT THE CODE FOR THE CUSTOM BOXES AND FIELDS YOU WANT FOR STUDENTS IN HERE -->
<!-- CUSTOM BOX ONE -->
<div class="areionlong">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "House"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX ONE-->
<!-- CUSTOM BOX TWO -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Age"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX TWO-->
<!-- CUSTOM BOX THREE -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Race"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Blood Status"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX THREE-->
<!-- CUSTOM BOX FOUR -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Sexual Orientation"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Relationship Status"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX FOUR-->
{elseif $[user.group.name] == "Mentor"}
<!-- PUT THE CODE FOR THE CUSTOM BOXES AND FIELDS YOU WANT FOR MENTORS HERE -->
<!-- CUSTOM BOX ONE -->
<div class="areionlong">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Subject"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX ONE-->
<!-- CUSTOM BOX TWO -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Age"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Occupation"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX TWO-->
<!-- CUSTOM BOX THREE -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Race"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Blood Status"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX THREE-->
<!-- CUSTOM BOX FOUR -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Sexual Orientation"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Relationship Status"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX FOUR-->
{elseif $[user.group.name] == "Caretaker" || $[user.group.name] == "Librarian" || $[user.group.name] == "Doctor" || $[user.group.name] == "Nurse" || $[user.group.name] == "Cook" || $[user.group.name] == "Headmaster" || $[user.group.name] == "Deputy Headmaster" || $[user.group.name] == "Headmistress" || $[user.group.name] == "Deputy Headmistress"}
<!-- PUT THE CODE FOR THE CUSTOM BOXES AND FIELDS YOU WANT FOR OTHER OCCUPATIONS HERE -->
<!-- CUSTOM BOX TWO -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Age"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Occupation"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX TWO-->
<!-- CUSTOM BOX THREE -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Race"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Blood Status"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX THREE-->
<!-- CUSTOM BOX FOUR -->
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Sexual Orientation"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<div class="areionshort">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Relationship Status"}$[user.mini_custom_field.value]{/if}{/foreach}
</div>
<!-- END CUSTOM BOX FOUR-->
{elseif $[user.group.name] == "Ghost"}
<!-- PUT THE CODE FOR THE CUSTOM BOXES YOU WANT FOR GHOSTS HERE -->
<!-- CUSTOM BOX ONE -->
<div class="areionlong">
Deceased
</div>
<!-- END CUSTOM BOX ONE-->
{/if}

The end of this should be immediately before:

<!-- CUSTOM BOX FIVE -->
APPPLOTTRACK
<!-- END CUSTOM BOX FIVE -->

These links can be outside the code because they show on all user mini-profiles, no matter what membergroup.

7) Add app / plot / track links

I'm not sure exactly how you want these displayed--each in their own separate box? Or would you be fine with having them all in one? In any case, I believe the basis of this would be something like this:

<a href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Application"}$[user.mini_custom_field.value]{/if}{/foreach}">APP</a> / <a href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Plotter"}$[user.mini_custom_field.value]{/if}{/foreach}">PLOT</a> / <a href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Tracker"}$[user.mini_custom_field.value]{/if}{/foreach}">TRACK</a>

6) Extra membergroup name at the bottom

That's caused by the $[user.group] variable you have on line 125 of the layout template code. Replace that line with this:

<div class="profilehead">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Alias"}{if $[user.is_online]}<span style="color:#8ccf55;" title="Online">$[user.mini_custom_field.value]</span>
{else} <span title="Offline" style="color:#cf5558;">$[user.mini_custom_field.value]</span>{/if}{/if}{/foreach}
</div>

Then, remove or change the duplicate alias field, found on lines 100-104.

[• Ambrose •]

tis ✻ bry, you have helped me immensely with this confounding code! There are still a couple of things that needs to be fixed, but so far your advice has worked well! The students are showing only their stuff and the mentors only theirs too! That's satisfying to me because now I know it can be organized.

So there are just a couple of issues left that I need to fix.

If you look carefully at one of the mini-profiles with the Student or Mentor, you'd see that two boxes at the bottom are basically split in half? This can be fixed, right?

I did want to try and put the links into a table of sorts (one row, three columns) so they are evenly spaced out, if that won't work then it's fine the way they are!

Then, lastly, for now, I need to change the display names so that it's showing like the Alias is. This is the font and styles I used for the Alias; font-family:Titillium+Web; font-size:14px; letter-spacing:1px; font-variant:small-caps;

I can't seem to find where the display names are supposed to be. I thought I did but it wasn't the right one.

I'm not sure if there was something I needed to add so that the Guests can have a border -- I might have missed that one?

[tis ✻ bry]

Awesome, I'm glad I could be of help.

Jul 25, 2018 11:42:14 GMT -8 • Ambrose • said:

If you look carefully at one of the mini-profiles with the Student or Mentor, you'd see that two boxes at the bottom are basically split in half? This can be fixed, right?

Yep! In your css, find and change this :

.ac-container article.article-show{ height: 90px; overflow:hidden; margin:auto; }

to this:

.ac-container article.article-show{ height:100px; overflow:hidden; margin:auto; }

Jul 25, 2018 11:42:14 GMT -8 • Ambrose • said:

I did want to try and put the links into a table of sorts (one row, three columns) so they are evenly spaced out, if that won't work then it's fine the way they are!

Sure! I'd go ahead and change that section in the layout template (It looks like you just have the three links and diamonds between them) to:

<table style="width:100%"><tr><td><div class="areion-mplinks"><a href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Application"}$[user.mini_custom_field.value]{/if}{/foreach}">APP</a></div></td><td style="padding-left:10px;"><div class="areion-mplinks"><a href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Plotter"}$[user.mini_custom_field.value]{/if}{/foreach}">PLOT</a></div></td><td style="padding-left:10px;"><div class="areion-mplinks"><a href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Tracker"}$[user.mini_custom_field.value]{/if}{/foreach}">TRACK</a></div></td></tr></table>

And then add this to your css:

.areion-mplinks {  padding:5px;background-color: #181818;text-align: center; }
.areion-mplinks a { font-family:Teko; font-size:18px; font-variant:small-caps; }

(Forgive me, I'm not very good with using all div tags in situations like this

Jul 25, 2018 11:42:14 GMT -8 • Ambrose • said:

Then, lastly, for now, I need to change the display names so that it's showing like the Alias is. This is the font and styles I used for the Alias; font-family:Titillium+Web; font-size:14px; letter-spacing:1px; font-variant:small-caps;

I can't seem to find where the display names are supposed to be. I thought I did but it wasn't the right one.

You can just fix this with css, honestly. Add this to your styles:

.mini-profile a.user-link { font-family: Titillium Web; letter-spacing: 1px;  font-variant: small-caps; }

Jul 25, 2018 11:42:14 GMT -8 • Ambrose • said:

I'm not sure if there was something I needed to add so that the Guests can have a border -- I might have missed that one?

Yes, this is totally possible ~ in keeping with the styling you have, change your first <div class="{if $[user.group.name] == "Administrator"}
admin
{elseif $[user.group.name] == "Moderator"}
moderator
{elseif $[user.group.name] == "Cronus"}
cronus..."> to:

SPOILER: Click to show

<div class="{if $[user.is_guest]}
guest
{else}
{if $[user.group.name] == "Administrator"}
admin
{elseif $[user.group.name] == "Moderator"}
moderator
{elseif $[user.group.name] == "Cronus"}
cronus
{elseif $[user.group.name] == "Artemis"}
artemis
{elseif $[user.group.name] == "Eros"}
eros
{elseif $[user.group.name] == "Hecate"}
hecate
{elseif $[user.group.name] == "Osiris"}
osiris
{elseif $[user.group.name] == "Ghost" }
ghost
{elseif $[user.group.name] == "Mentor"}
mentor
{elseif $[user.group.name] == "Caretaker"}
caretaker
{elseif $[user.group.name] == "Librarian"}
librarian
{elseif $[user.group.name] == "Doctor"}
doctor
{elseif $[user.group.name] == "Nurse"}
nurse
{elseif $[user.group.name] == "Cook"}
cook
{elseif $[user.group.name] == "Headmistress"}
headmistress
{elseif $[user.group.name] == "Deputy Headmistress"}
deputy headmistress
{elseif $[user.group.name] == "Headmaster"}
headmaster
{elseif $[user.group.name] == "Deputy Headmaster"}
deputy headmaster
{/if}{/if}">

And then add this to your css, with the rest of the border colors:

div.guest div.mini-profile { border: 4px solid #999 /*or whatever color you want the guest border to be*/; }

[• Ambrose •]

So far it looks great and I definitely appreciate your help!

Right now, there are just two more things...

How can I remove the App / Plot / Track bits from Guest profiles?

Also, I tried that thing with the Display Name and it didn't seem to work...

[tis ✻ bry]

Jul 25, 2018 14:02:56 GMT -8 • Ambrose • said:

How can I remove the App / Plot / Track bits from Guest profiles?

Probably the simplest way to do that is to surround the bit of code I gave you with:

{if $[user.is_member]}<table style="width:100%"><tr><td><div class="areion-mplinks"><a href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Application"}$[user.mini_custom_field.value]{/if}{/foreach}">APP</a></div></td><td style="padding-left:10px;"><div class="areion-mplinks"><a href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Plotter"}$[user.mini_custom_field.value]{/if}{/foreach}">PLOT</a></div></td><td style="padding-left:10px;"><div class="areion-mplinks"><a href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Tracker"}$[user.mini_custom_field.value]{/if}{/foreach}">TRACK</a></div></td></tr></table>{/if}

Jul 25, 2018 14:02:56 GMT -8 • Ambrose • said:

Also, I tried that thing with the Display Name and it didn't seem to work...

Hm, that's odd--what browser are you using? It works for me! Here are some screenshots of what I see:

[• Ambrose •]

tis ✻ bry, I'm using Firefox.

[tis ✻ bry]

Huh, that's really odd...I use chrome, but I pulled up my copy of firefox just now and it still works for me. Hm, you could try this:

On lines 44 and 45 of your mini-profile layout template, there should be:

<div class="profilehead"><div style="padding-top:15px;text-shadow: 1px 1px 1px #000; color: #ffffff;">$[user]{if $[user.custom_title]}<br />$[user.custom_title]{/if}
</div>

try this instead:

<div class="profilehead"><div style="padding-top:15px;text-shadow: 1px 1px 1px #000; color: #ffffff; font-family:Titillium+Web; font-size:14px; letter-spacing:1px; font-variant:small-caps;">
$[user]{if $[user.custom_title]}<br />$[user.custom_title]{/if}
</div>

Keep in mind that because of the way you have this set up, it will affect custom titles as well.

[• Ambrose •]

Oh, I don't want custom titles so that's all good.

But, unfortunately, that didn't work for me either...

[tis ✻ bry]

Huh, well, if that didn't work, I'm stumped then. The only thing left I can suggest doing is clearing your broswer's cookies and cache?

[• Ambrose •]

Hmm, I tried that as well. Maybe it's just my computer.

[• Ambrose •]

Sorry to bump this once again but now I have new issues.

We recently did a skin overhaul and I got most of the mini-profile code working. However, we lost the links (app/track/plot) and I can't figure out where to put it so that it's at the bottom. I also wanted to move the username (display name) to the bottom just above the links too, if possible.