Fixed  box-shadow bug in custom CSS template

Miko

Well-known member
Here is how to set XF to reproduce the bug.

Create a new template and name it

apple.css

in apple.css enter:

Code:
.nodeList.sectionMain {
        box-shadow: none;
}
/* logo margin left */
#logo {
    margin-left: 18px;
}


Open > PAGE_CONTAINER template

Look for:
Code:
<!--XenForo_Require:CSS-->

Add below:

Code:
<xen:require css="apple.css" />


Normally XenForo would automatically add -moz-box-shadow, -webkit-box-shadow, -khtml-box-shadow to the box-shadow CSS resulting in:

Code:
.nodeList.sectionMain {
        box-shadow: none;
        -moz-box-shadow: none; -webkit-box-shadow:none;  -khtml-box-shadow:none;
}
/* logo margin left */
#logo {
    margin-left: 18px;
}


However here is what is happening:

Code:
.nodeList.sectionMain {
        box-shadow: none;
}
/* logo margin left */
#logo {
    margin-left: 18px; -webkit-box-shadow:none; } /* logo margin left */
#logo {
    margin-left: 18px; -moz-box-shadow:none; } /* logo margin left */
#logo {
    margin-left: 18px; -khtml-box-shadow:none; } /* logo margin left */
#logo {
    margin-left: 18px;
}
I have tested this with several CSS and templates and it's happening over and over.

The CSS -moz-box-shadow, -webkit-box-shadow, -khtml-box-shadow is applied to the wrong element and duplicating it :(

I could be wrong but it might have been working in older XeForo version prior to RC2.


Thank you :)
 
any ideas to do this?

snap0006.webp

I've found this code but don't works

Code:
.shadow_nodelist
{
background: url("http://i.imgur.com/SfGlH.png") no-repeat scroll center top transparent !important;
height: 20px;
margin-bottom: 15px;
display: block;
}
 
Top Bottom