[Xenforo] Xen Overlays

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;
}

Post reserved for screenshot for guests.

Thanks Shelley! I've been having problems getting used to XF styling and this helps a ton, even though my main problem atm is navigation.

Thanks Shelley,
As usual this is another fantastic thread and very helpful. Looks like it's back to the drawing board for me to be playing with these

Your welcome. Next one will be the membercard.

The navigation menu is a little more complex if your asking for a guide to a custom one. If your referring to the navbar default then that won't be a problem to do and will add that when time permits.

I was trying to do something like here but with a different design overall but the css etc to make it right just doesn't work, so many edits must be made D:.