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

XF 1.3 Stack Alert Position

Discussion in 'Styling and Customization Questions' started by Neil E., Sep 22, 2014.

  1. Neil E.

    Neil E. Active Member

    Is there a way to define where the popup is located? I'd like to have it fixed at the extreme bottom left corner of the screen (like the ajax progress indicator is fixed at the extreme top right of the screen).

    I don't like the way the stack alert obscures the Redactor box.
  2. Chris D

    Chris D XenForo Developer Staff Member

    In EXTRA.css:

        bottom: 0px!important;
        left: 0px!important;
    That should do it - the !important may or may not be required (I haven't tested this).
  3. Neil E.

    Neil E. Active Member

    Thanks Chris. I didn't go as easily as I expected. The bottom left location wasn't much better, so I changed to top left. I like how it looks when it is configured to match the appearance of the progress indicator. The only part that is driving me nuts is the blue border. I can't seem to get rid of it. I haven't been able to remove the shadow either, although I want the shadow to stay. Using a black border doesn't cover the blue. There must be another element hidden there. [Paging Shelley]

    Black border 1px, blue is there, but not easy to see. Shadow appears to be gray (OK).
    Stack Alert 1.jpg

    Black border 0px, blue is more visible.
    Stack Alert 2.jpg

        top: -5px !important;
        left: 0px !important;
        position: fixed !important;
    /* ~position alert at top left corner of screen~ */
    #StackAlerts .stackAlertContent
        background-image: none !important;
        background-color: #000000 !important;
        border-top: 1px solid #000000 !important;
        border-right: 1px solid #000000 !important; 
        border-bottom: 1px solid #000000 !important; 
        border-left: 1px solid #000000 !important; 
        border-radius: 0px 0px 5px 0px !important;
        color: #ffffff !important;
    /* ~alert notification popup~ */

    Adding a larger radius to the bottom right corner (desired) shows the problem with the blue.
    Stack Alert 3.jpg
    Last edited: Sep 22, 2014

Share This Page