Restyle alert bubble?

[RobParker]

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]

Should style in the style properties:

Header and Navigation: Alert Balloon Alert Arrow, usually adjust the top px.

 

[RobParker]

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]

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.

 

[RobParker]

I just noticed how it is on here and yep, we want it exactly like that

 

[Russ]

I just noticed how it is on here and yep, we want it exactly like that

just remove that position absolute, we also use display: none on the arrow.

 

[RobParker]

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

#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

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

Any suggestions?

 

[Russ]

Try adjusting the line-height to 16px
could also try a margin-bottom on it as well. Try the line-height first though.

 

[RobParker]

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]

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)

Try something along the lines of:

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

Or play with some padding on it, that will adjust the text only inside the bubble.

 

[RobParker]

Cheers

 

[Russ]

Cheers

That work for you? Just double checking

 

[RobParker]

Not tried it yet but I'll let you know.

 

[RobParker]

Are you sure you meant moderator bar? That didn't seem to do anything

 

[RobParker]

Actually I think just taking away the font size restriction (10px) means it's consistent with the other alerts and fits better.

 

[RobParker]

 

[Russ]

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.