Xenforo Xen Overlays Cheatsheet

I thought I'd post a minified cheatsheet of the css that you can use in your Extra.css template as a shortcut to customisation everything in your xen overlays down to the button. When making these alterations it will effect all overlays throughout your theme.

I've also posted the css code (bottom) so you can style your overlays how you see fit and how you would like them to appear visually. Bare in mind, the css code is an example and you should tinker with the colour and other css elements and insert your images to your own preference.

Code:

.xenOverlay .section, .xenOverlay .sectionMain {
    border: 15px solid rgba(48, 48, 48, 0.5);
    border-radius: 10px 10px 10px 10px;
}
.xenOverlay .sectionFooter {
    background: url("@imagePath/xenforo/gradients/yourimage") repeat-x scroll center top #dadada;
}
.xenOverlay .primaryContent {
    border-bottom: 1px solid #cbcbcb;
}
 
.xenOverlay .secondaryContent {
    background: url("@imagePath/xenforo/gradients/yourimage") repeat-x scroll center top #DADADA;
    border-bottom: 1px solid #cbcbcb;
}
 
.xenOverlay .subHeading {
    background: url("@imagePath/xenforo/gradients/yourimage") repeat-x scroll center top #F9D9B0;
    border-bottom: 1px solid #495711;
    border-top: 1px solid #495711;
    color: #ffffff;
}
.xenOverlay .section .heading, .xenOverlay .sectionMain .heading {
    background: url("@imagePath/xenforo/gradients/yourimage.png") repeat-x scroll center top;
}
 
.xenOverlay .sectionFooter .button {
    background-color: none !important;
    background: url("@imagePath/xenforo/gradients/yourimage") repeat-x top scroll;
    border-color: #495711;
    border-radius: 4px;
    color: white;
    text-shadow: none;
}
.xenOverlay .sectionFooter .button:hover{
    background-color: lightgreen !important;
    border-color: #495711;
    border-radius: 4px;
    text-decoration: underline;
}
.xenOverlay .chooserColumns li a:hover {
    background-color: #e7e7e7;
}