XF 1.3 Stack Alert Position

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.
 
In EXTRA.css:

Code:
#StackAlerts
{
    bottom: 0px!important;
    left: 0px!important;
}

That should do it - the !important may or may not be required (I haven't tested this).
 
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.webp

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


Code:
#StackAlerts
{
    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.webp
 
Last edited:
Back
Top Bottom