Mini Profile Template Trouble

[Kuroya]

Right. I'm sure this is entirely stupid, but I've been wrestling with this off and on for three days straight, and I've not been able to really find the source of the problems, so with any luck, some more experienced coders can find my issue and help me fix it.

I'm running into a couple issues with my custom mini-profile template that I'm developing on a test site so that members won't have to look at all the broken stuff while I try to fix problems with it. Right now, my main problems are as follows:

1. With the opacity currently on the mini-profile, I cannot click on either of the links for some odd reason. When I had it on a slide, hovering the mouse over any values placed in the custom fields would cause it to slide back, if that helps figure out the problem.

2. I have put in the correct span styles to incorporate the Monetary System plugin values in the empty box on the mini-profile. It is set to display on the mini-profile as well, but for some reason, it refuses to display. This is the main problem that I wish to fix since if I can get the money to display, I can transfer the template onto the forum it's intended for and tinker with the details on the test site until I perfect it for re-application.

3. Although a more minor detail and one that can be disregarded if it's unable to be fixed, I'd like to make the silvery boxes display with no leftover from the avatar. If I could get that to happen, I would probably make the opacity of the avatar a little higher so that it's not so washed out.

Anyway, I have the coding located below, thanks in advance to anyone who tries to help.

SPOILER: Click to show

<style type="text/css">

.mptotal {
width: 150px;
height: 365px;
border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
background-color: #252525;
text-align: center;
}

.mpname {
text-transform: uppercase;
width: 120px;
height: 42px;
padding-top: 5px;
font-family: 'courier new';
text-align: left;
font-size: 17px;
margin-left: 15px;
}

.mpavvie {
width: 150px;
height: 300px;
vertical-align: center;
transition: .8s;
overflow: hidden;
margin-top: -300px;
}

.mpgavvie {
width: 150px;
height: 300px;
vertical-align: center;
overflow: hidden;
margin-top: -300px;
}

.mpavvie:hover {
transition: .6s;
opacity:0.135;
}

.mpunder {
width: 150px;
height: 300px;
vertical-align: center;
text-align: center;
overflow: hidden;
}

.mpbox {
width: 100px;
height: 16px;
font-family: 'petit formal script';
letter-spacing: 2px;
background-color: #dadada;
color: #404040;
border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}

.mpmon {
width: 100px;
height: 75px;
background-image: url('http://i1157./p587/YamiKuroya/Defaultsmall_zps5e297891.png');
overflow: hidden;
border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
}

.mpgroup {
width: 120px;
height: 16px;
font-size: 13px;
font-family: lobster;
color: rgb(43, 133, 166);
text-transform: lowercase;
text-align: right;
padding-top: 1px;
margin-left: 15px;
letter-spacing: 2px;
}
</style>

<div class="mptotal"><div class="mpname">$[user]</div>

<table><tr><td height="300px" width="10px"></td><td align="center"><div class="mpmon">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "POKEMORPH"}<img src="$[user.mini_custom_field.value]" />{/foreach}</div>

<br><div class="mpbox"><span class='money_text'></span> <span class='money_symbol'></span> <span class='money_amount'></span></div>

<br><div class="mpbox">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "PLAYER"}$[user.mini_custom_field.value]{/if}{/foreach} </div>

<br><div class="mpbox">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "BIO"}<a href="$[user.mini_custom_field.value]">BIO</a>{/if}{/foreach}</div>

<br><div class="mpbox">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "TRACKER"}<a href="$[user.mini_custom_field.value]">TRACKER</a>{/if}{/foreach} </div></td></tr></table>

{if $[user.avatar]}<div class="mpavvie">
$[user.avatar]</div>{/if}
{if $[user.is_guest]}{if $[user.avatar]}<div class="mpgavvie">
$[user.avatar]</div>{/if}{/if}

<div class="mpgroup">{if $[user.is_guest]}Interloper{/if}
{if $[user.group]}$[user.group.name]{/if}</div>

</div>

[Former Member]

Could you link to a live preview of the code?

[Kuroya]

Oh, yeah, sorry. A live preview of the coding for both guest, which I like how it is, and members, which is where I'm having the issues, is located here.

[Alanna 🥀🖤]

Try this layout instead for your links:

<a href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "CUSTOM FIELD"}$[user.mini_custom_field.value]{/if}{/foreach}">LINK</a>

[Kuroya]

Just tried it, the template page said that it was broken, and the links were still un-clickable, so I swapped it back to what it was before. ;~; Thanks for trying to help though.

[Alanna 🥀🖤]

The template page will say it is broken but it is not. For the links not being clickable, that is because they are not the top layer. Try adding z-index: 100; to their classes.

[Kuroya]

Added the z-index with the layout for the links, still no change.

[Alanna 🥀🖤]

Forgot to mention z-index only works when pared with position:relative;.

[Kuroya]

Thank you so much, that solves that problem! When I hover over the values for the mini-profile, the avatar stops going opaque, but I think I can live with that. Now to try to figure out why the money isn't working...

[Alanna 🥀🖤]

Money isn't working because your template is missing the very important Mini Profile class.

[Kuroya]

Thank you so much! I can't believe I missed that.

[Alanna 🥀🖤]

No problem.