RobParker

Registered
As I've moved things into the user bar and reduced it's height a bit, the default alert bubble doesn't really fit any more.

I've used firebug to move it down next to the Alerts text and remove the arrow but I've not necessarily done it the best way so thought I'd see how you'd recommend to do it?
 
Bringing it lower puts it over the Alerts text. I was hoping to just have it as a red square next to the link, however, then on mobile screens it's off the side so needs some other positional stuff doing.
 
Screen Shot 2013-10-15 at 22.04.47.png


I want to move it up very slightly to it's more aligned next to the Alerts text but I can't see to make it move.

I thought it'd be this

Code:
#xenBase_userBar .visitorTabs .itemCount {
background-color: #E03030;
color: #FFFFFF !important;
font-size: 10px;
font-weight: bold;
right: 3px;
top: -8px;
}

But changing the top value doesn't do anything at all.

This bit seems to move the box but not the number

Code:
#xenBase_userBar .itemLabel, #xenBase_userBar .itemCount {
display: inline-block;
height: 16px;
line-height: 18px;
}

Any suggestions?
 
Yep, the line height was 16 originally. I adjusted it to 18 and it moved the box up but not the text. 20px seems to be an ok value for the box positioning but the text doesn't move.

Without access(that'll be the next step:D)

Try something along the lines of:

Code:
#moderatorBar .itemCount .Total
{
line-height: 16px;
}

Or play with some padding on it, that will adjust the text only inside the bubble.
 
I'll put in some fixes for the bubbles on the next release, and I used moderator bar because we kept the default css there even though it's using a userbar in the moderator bar.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back