Box Shadow Implementation Problem

[Alan Vende]

Forum URL: psychic-psyghtings.proboards.com

I am working on a custom MP for my FAQ page. I am attempting to put a shadow on the box. The code I have is as follows:

Red: HTML that the CSS is affecting.
Blue: CSS for the box around the red HTML.
Green: JS that affects the HTML divs (Default, switch v1 and switch v2).

HTML

<div class="default">
$[user]<br />
$[user.group.name]<br />
$[user.group.stars]<br />
$[user.custom_title]<br />
$[user.warning.bar]<br />
$[user.avatar]<br />
$[user.personal_text]

<div class="info">
Posts: <span class="float-right">$[user.posts]</span>
<br />Likes: <span class="float-right">$[user.likes]</span><br /><br />
<div class="online">$[user.is_online]</div><br />
Last Online: $[user.last_online]<br />
<br />
<div class="admin-staff">
Staff Member
</div>
<br />
<div class="mp-pm">
<a href="$[user.pm_href]" alt="PM $[user.name]">Send PM</a> | <a href="http://psychic-psyghtings.proboards.com/page/Alan_Vende">About Me</a>
</div>
<br />
<div class="btr-pp">
<a href="http://psychic-psyghtings.proboards.com/page/PPR"><p align="center">Psychic Psyghtings Radio Host</p></a>
</div>
<br />
<div class="admin-badges">
$[user.badges]
</div>
</div>
</div>
<div class="switch v1">
$[user]<br />
$[user.group.name]<br />
$[user.group.stars]<br />
$[user.custom_title]<br />
$[user.warning.bar]<br />
$[user.avatar]<br />
$[user.personal_text]
<div class="mp-text">
<p><em>Do you have a question about the rules?<br /><br /> If so, please send a message to either <a href="http://psychic-psyghtings.proboards.com/conversation/new/1">Alan Vende</a>, <a href="http://psychic-psyghtings.proboards.com/conversation/new/25">SkyFire</a>, or <a href="http://psychic-psyghtings.proboards.com/conversation/new/40">MSG</a>.</em></p>
</div>
</div>
<div class="switch v2">
$[user]<br />
$[user.group.name]<br />
$[user.group.stars]<br />
$[user.custom_title]<br />
$[user.warning.bar]<br />
$[user.avatar]<br />
$[user.personal_text]
<div class="mp-text">
<p><em>Do you have a question that's not located in the FAQ?<br /><br /> If so, please send a message to either <a href="http://psychic-psyghtings.proboards.com/conversation/new/1">Alan Vende</a>, <a href="http://psychic-psyghtings.proboards.com/conversation/new/25">SkyFire</a>, or <a href="http://psychic-psyghtings.proboards.com/conversation/new/40">MSG</a></em></p>
</div>
</div>
<div class="switch v3">
$[user]<br />
<em>Steve Irwin Memorial</em><br />
<br />
<div class="si-mp-text">
<p><strong>Steve Irwin</strong> was a Crocodile Hunter. He was born on February 22, 1962 and passed away on September 4, 2006.</p>
</div>
</div>

<div class="short-black-banner">
$[user.group.name]
</div>

CSS

/* Default MP CSS */
.mini-profile.admin-mp {
background-color: #0099FF;
color: #2f4e00;
}
.mini-profile.admin-mp .staff_diamond {
position: absolute;
top: 16px;
right: 2px;
}

.mini-profile.admin-mp .admin-staff {
display: table;
margin: 0 auto;
color: #000000 !important;
background-color: #0099FF;
box-shadow: 5px 3px 5px #302B54;
font-size: 10px;
font-weight: bold;
border: 1px solid #000000;
padding: 3px;
text-align: center;
width: 139px;
}
.mini-profile.admin-mp .btr-pp {
border: 1px solid #000000;
border-radius: 25px;
padding: 5px;
background-color: #0099FF;
}
.mini-profile.admin-mp .btr-pp:hover {
background: url(//images.proboards.com/v5/gradients/nav-tree-active.png) repeat;
}
.mini-profile.admin-mp .admin-user {
background-color: #000000;
width: 100px;
}

.mini-profile.admin-mp .admin-badges {
background-color: #000000;
}

/* Black Group Tag */
.mini-profile.admin-mp .short-black-banner {
font-size: 7px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
background-color: #111;
box-shadow: 0px 0px 2px #000;
background-image: url(http://images.proboards.com/v5/gradients/sexy.png);
color: #fff;
text-shadow: 2px 2px 2px #000;
border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
padding: 3px 6px;
position: absolute;
top: 0px;
right: 0px;
}

.mini-profile.admin-mp .admin-badges {
background-color: #000000;
border-radius: 25px;
}

.mini-profile.admin-mp .online {
font-style: italic;
}


.mini-profile.mp-variant .mp-text {
display: block;
border: 1px solid #000000;
border-radius: 10px;
background-color: #0099FF;
color: #000000;
padding: 10px;
text-align: left;
height: 115px;
box-shadow: 2px 2px 2px #0099FF !important;
}
.mini-profile.mp-variant .si-mp-text {
display: block;
border: 1px solid #000000;
border-radius: 10px;
background-color: #0099FF;
color: #000000;
padding: 10px;
text-align: left;
height: 100px;
box-shadow: 2px 2px 2px #0099FF !important;
}
/* Hide alternate mini-profile HTML by default */
.mp-variant .switch { display: none; }

/* Hide default mini-profile HTML when mini-profile changes */
.mp-variant.switched .default { display: none; }

JS

// Default JS
// Staff Badge
if(user.group){
if(user.group.name == "Head Administrator" || user.group.name == "Administrator" || user.group.name == "Global Moderator" || user.group.name == "Moderator"){
$(this).append('<div class="staff_diamond"><a href="http://psychic-psyghtings.proboards.com/thread/755/new-badges-on-mini-profiles"><img src="http://storage.proboards.com/6033396/i/z0ia563wclNdTJSvDxFq.png"></a></div>');
}
}

// Add class to mini-profile to use in CSS
$(this).addClass('admin-mp');

// Make group tag short
if(user.group){
if(user.group.name == "Head Administrator")
$(this).children('.short-black-banner').html('Admin');
}

// Add unique class to reference this mini-profile in CSS:
$(this).addClass('mp-variant');

// Show v1
if($(this).parents('#post-8').length)
$(this).addClass('switched').children('.v1').show();

// Show v2
if($(this).parents('#post-1784').length)
$(this).addClass('switched').children('.v2').show();

// Show v3
if($(this).parents('#post-2230').length)

$(this).addClass('switched').children('.v3').show();

I'm wondering why, even after I put the !important; declaration after the color for the box shadow, that it doesn't appear. Does anyone have any clue as to why? I can't find an error in my coding that could make this happen. When I put in box-shadow: 2px 2px 2px #888888 !important; it works and is able to be executed, but when I put the dark blue, it doesn't execute.

I partially don't understand why it doesn't because that blue is the same blue that I have for the coded Staff Member badge on my MP.

Any ideas as to why? Thank you for your help!

[Brian]

Your box-shadow color is #0099FF which is the same color as your mini-profile background. The shadow is there, but it's blending in.

I'd recommend utilizing a different shadow color. Anything black or gray will typically show the best over any brighter color.

[Alan Vende]

I don't understand how it's the same color because I thought it was the same Hex value as the shadow on my staff banner. That's what I thought I copied. How does that one show up then?

Sorry, very confused with it since, as I said, I thought it was the same as the blue/black on the staff banner shadow.

Thank you for that, though - I didn't realize they were the same.

[Brian]

The staff banner shadow is completely black.

text-shadow: 2px 2px 2px #000;

Versus the text box which isn't.

box-shadow: 2px 2px 2px #0099FF !important;

[Alan Vende]

Oct 19, 2015 11:43:54 GMT -8 Brian said:

The staff banner shadow is completely black.

text-shadow: 2px 2px 2px #000;

Versus the text box which isn't.

box-shadow: 2px 2px 2px #0099FF !important;

My admin banner is this:

.mini-profile.admin-mp .admin-staff {
display: table;
margin: 0 auto;
color: #000000 !important;
background-color: #0099FF;
box-shadow: 5px 3px 5px #302B54;
font-size: 10px;
font-weight: bold;
border: 1px solid #000000;
padding: 3px;
text-align: center;
width: 139px;
}

It's in the Custom MP Creator Plugin. I found the problem: I wasn't using the right Hex value. My staff banner is in the Custom Mini-Profile Creator Plugin while my other staff member's is not.

Thanks so much, Brian. It's showing up now!