#1
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?
 

Russ

Pixel Exit Staff
#2
Should style in the style properties:

Header and Navigation: Alert Balloon Alert Arrow, usually adjust the top px.
 
#3
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.
 

Russ

Pixel Exit Staff
#4
You can do it like we do on here and simply remove the position: aboslute on it, you may need to add some padding afterwards.
 
#7
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?
 

Russ

Pixel Exit Staff
#8
Try adjusting the line-height to 16px
could also try a margin-bottom on it as well. Try the line-height first though.
 
#9
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.
 

Russ

Pixel Exit Staff
#10
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.
 

Russ

Pixel Exit Staff
#17
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.