• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Change alerts popup to go down, rather than up (over inbox, alerts)

Phases

Active member
#1
Title says it all.

I've looked around, tried using inspect element - which I use very often, but I'm either just missing it or its more complicated that expected.

I would like the Inbox and Alerts popups that tell how many unread, to go under then text rather than over.

Can anyone help? Appreciate any assistance..
 

Sheldon

Well-known member
#2
Code:
#navigation .pageContent .navTabs .navLink .itemCount .arrow {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #E03030 rgba(0, 0, 0, 0) #000000;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 3px 1px;
    bottom: 16px;
    height: 0;
    line-height: 0;
    position: absolute;
    right: 4px;
    text-shadow: none;
    transform: rotate(180deg);
    width: 0;
}
#navigation .pageContent .navTabs .navLink .itemCount {
    background-color: #E03030;
    border-radius: 2px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    min-width: 12px;
    padding: 0 2px;
    position: absolute;
    text-align: center;
    text-shadow: none;
    top: 19px;
    right: 0px
    white-space: nowrap;
    word-wrap: normal;
    z-index: 9999;
}
Screenshot_2.png
 

Shelley

Well-known member
#3
Here's also the code to have them directly underneath. Slightly modified.

Code:
.navTabs .navLink .itemCount {
top: 21px;
right: 15px;
z-index: 5000;
line-height: 12px;
height: 14px; }

.navTabs .navLink .itemCount .arrow {
transform: rotate(180deg);
top: -3px;
right: 5px; }
Screenshot_28.png
 

xIsabel38

Well-known member
#6
Here's also the code to have them directly underneath. Slightly modified.

Code:
.navTabs .navLink .itemCount {
top: 21px;
right: 15px;
z-index: 5000;
line-height: 12px;
height: 14px; }

.navTabs .navLink .itemCount .arrow {
transform: rotate(180deg);
top: -3px;
right: 5px; }
View attachment 61580
I put that code into Extra CSS and while it did turn the arrows upward, they didn't center. Was there something I messed up?
 

Shelley

Well-known member
#7
I put that code into Extra CSS and while it did turn the arrows upward, they didn't center. Was there something I messed up?
I forgot to mention that you'll have to adjust the right: and top: values if your navbar is a custom navbar that is more than the default xenforo height.
 

xIsabel38

Well-known member
#8
Alright well, I gave it a try but regardless it's not important now anyway, at least now they are pointing upward. Thanks so much for that.