adding border to sidebar-box, changes XF layout in dropdown

[erich37]

I want to change the border at the sidebar-boxes from "border-bottom" towards "border":


current XF-default CSS:

.secondaryContent {
    background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #F0F7FC;
    border-bottom: 1px solid #D7EDFC;
    padding: 10px;
}

my custom CSS:

.secondaryContent {
    background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #F0F7FC;
    border: 1px solid #D7EDFC;
    padding: 10px;
}

However, when I do so XF changes the layout of the Account-Drop-down box to this:




I am not sure if there is anything else changing when adding a simple border around the sidebar-box ?

How can I fix this when changing the border from just at the bottom of the sidebar-box towards having the border around the sidebar-box ?
I tried the sidebar-padding, but it somehow did not work......


Appreciate your help!

Many thanks!

 

[Jake Bunce]

Specify the sidebar class to limit the change to the sidebar:

.sidebar .secondaryContent {
    background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #F0F7FC;
    border: 1px solid #D7EDFC;
    padding: 10px;
}

 

[erich37]

ahhh, thanks a lot Jake

I should try drinking some raw eggs... maybe that helps with improving CSS skills

 

[Russ]

And for future reference... this is quite common if you change the padding at all for secondaryContent, so one fix as well would be to widen the userpanel a bit.