Hi,
I tried changing the script around, here is what I got:
in /minestatus/templates/partials/online.phtml search for:
<?php if (isset($instance['show_minotars']) && $instance['show_minotars']) : ?>
select the whole paragraph up (not including) to:
<?php echo $args['after_widget']; ?>
Replace with this:
<?php if (isset($instance['show_minotars']) && $instance['show_minotars']) : ?>
<div class="MCplayer"><img style="float:left;margin: 0 5px 5px 0;" src="https://minotar.net/avatar/<?php echo $player; ?>/25">
<span class="MCplayerText"><?php echo $player; ?></span></div>
<!-- <div style="clear:both"></div> -->
<?php else: ?>
<span>- <?php echo $player; ?></span><br>
<?php endif; ?>
<?php endforeach; ?>
</span>
<div style="clear:both"></div>
<?php endif; ?>
</p>
and also add these lines to your css file:
.MCplayer {
float:left;
}
.MCplayer:hover .MCplayerText {
display:block;
}
.MCplayerText {
float:left;
display:none;
position:absolute;
margin-top:30px;
}
Thread Starter
mx5510
(@mx5510)
That works perfectly! The only problem is that the text is almost unreadable so there should be a background.
yeah i left the background out of the example, i’m just using:
color:#FFF;
background:rgba(0,0,0,0.6);
you could also add some padding and rounded corners 😉
Thread Starter
mx5510
(@mx5510)
Sorry about my lack of coding knowledge but how do I add padding and rounded corners?
.MCplayerText {
float:left;
display:none;
position:absolute;
margin-top:30px;
padding:5px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
color:#FFF;
background:rgba(0,0,0,0.6);
}
like this for example.
Thread Starter
mx5510
(@mx5510)
What is moz-border-radius and webkit-border-radius? I also just noticed that the popup makes it harder to move your mouse over the heads that are behind it. Is there any way around that?
those are vendor prefixes, google them 😉
you can offset the box by changing the margin around
Thread Starter
mx5510
(@mx5510)
I’d rather not change the offset position as I like how it’s just below the head. Any other way?
Sorry, no idea comes to mind. If you just set it so, the heads behind it stick out half way, it should work. So depending on your font size, try adding more margin-top. I’m sure there is a better way out there to do this, but this is one of the faster ways I believe.
Thread Starter
mx5510
(@mx5510)
Thanks so much! This is how mine ended up to be.
float:left;
display:none;
position:absolute;
margin-top:20px;
color:#dadada;
font-weight:bold;
background:rgba(0,0,0,0.8);
border:2px groove #0abcc3;
border-radius: 10px;
padding:0px 8px;
I have one last question though. How would I make it so that a colored border is around a head who belongs to a certain player without messing up the alignment of the grid?
replace my snippet from above with:
<?php if (isset($instance['show_minotars']) && $instance['show_minotars']) : ?>
<div class="MCplayer"><img style="float:left;margin: 0 5px 5px 0;" id="MCStatus<?php echo $player; ?>" src="https://minotar.net/avatar/<?php echo $player; ?>/25">
<span class="MCplayerText"><?php echo $player; ?></span></div>
<!-- <div style="clear:both"></div> -->
<?php else: ?>
<span>- <?php echo $player; ?></span><br>
<?php endif; ?>
<?php endforeach; ?>
</span>
<div style="clear:both"></div>
<?php endif; ?>
</p>
add a line in your css for every player you want to have a colored border:
#MCStatus<PLAYER> { border:1px solid #F00;}
Replace <PLAYER> with the username, usernames are cAsE sEnSiTiVe 😉
hope this helps you 🙂
Thread Starter
mx5510
(@mx5510)
Looks like there isn’t enough room for the 1px border and the heads get scattered?
Thread Starter
mx5510
(@mx5510)
Never mind I googled and found using outline instead of border doesn’t take up space. Thanks again!
oh yeah make the heads that have a border smaller with
width and height in your css
Thread Starter
mx5510
(@mx5510)
Is there a way I can contact you another way such as Skype? I may have more requests and might be able to pay for work later.
