XF 1.3 Stack Alert Position

Neil E. · Sep 22, 2014

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.

Chris D · Sep 22, 2014

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

Neil E. · Sep 22, 2014

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

Black border 0px, blue is more visible.
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.