1. 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)

Discussion in 'Styling and Customization Questions' started by Phases, Nov 20, 2013.

  1. Phases

    Phases Active Member

    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..
  2. Sheldon

    Sheldon Well-Known Member

    #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;
    Phases likes this.
  3. Shelley

    Shelley Well-Known Member

    Here's also the code to have them directly underneath. Slightly modified.

    .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; }
    Russ and Phases like this.
  4. xIsabel38

    xIsabel38 Well-Known Member

    Is this put into extra.css?
  5. Shelley

    Shelley Well-Known Member

    Yeah, The extra.css template.
    xIsabel38 likes this.
  6. xIsabel38

    xIsabel38 Well-Known Member

    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?
  7. Shelley

    Shelley Well-Known Member

    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.
  8. xIsabel38

    xIsabel38 Well-Known Member

    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.
  9. Phases

    Phases Active Member

    Thanks so much guys!
  10. Russ

    Russ Well-Known Member

    Very clean way of doing it :D nice Shelley.
    Shelley likes this.

Share This Page