• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How to add shadow at sidebar secondaryContent only

B

bogus

Guest
#1
Hi. I wanted to add a shadow to the right and bottom side of the Sidebar sections only.
But if i add a box shadow into Style Properties: Building Blocks - secondaryContent i also have this shadow around the div class nodeLastPost secondaryContent
I was trying now to add an own shadow class into the sidebar.css but without any success
 

Jake Bunce

XenForo moderator
Staff member
#2
I was able to create this effect:

Screen shot 2011-01-31 at 5.03.13 AM.png

Admin CP -> Appearance -> Templates -> EXTRA.css

Add this CSS:

Code:
.statsList
{
	box-shadow: 3px 3px 3px #555555;
}

.avatarList
{
	box-shadow: 3px 3px 3px #555555;
}

.userList
{
	box-shadow: 3px 3px 3px #555555;
}
 
B

bogus

Guest
#3
Ok thanks ;) Well i would like to find a way to get a shadow with just one class added.

Oh man... sometimes you dont see the wood for the trees.

.sidebar .section .secondaryContent {
-webkit-box-shadow: 2px 2px 2px #525152;
-moz-box-shadow: 2px 2px 2px #525152;
box-shadow: 2px 2px 2px #525152;
}
Problem here ist that
Unbenannt.jpg

Looks like as if the Section is to long?
 

Jake Bunce

XenForo moderator
Staff member
#4
I like your method better.

Note that you only need to specify box-shadow. xenForo automatically fills in the other shadow properties in the page output. For example, this code in the templates:

Code:
.sidebar .section .secondaryContent
{
	box-shadow: 2px 2px 2px #525152;
}
Becomes this in the page output:

Code:
.sidebar .section .secondaryContent
{
	box-shadow: 2px 2px 2px #525152; -webkit-box-shadow:2px 2px 2px #525152; -moz-box-shadow:2px 2px 2px #525152; -khtml-box-shadow:2px 2px 2px #525152;
}
I am looking at the top box problem right now.
 
B

bogus

Guest
#6
I got it. But i am not sure if i done all correctly because i dont know if the overflow is really needed?!
I just deleted the whole .sidebar .visitorPanel css class from the sidebar.css template and added the following to extra.css
Code:
.sidebar .visitorPanel {
   padding-bottom: 10px;
   width: 250px
}
 

EQnoble

Well-known member
#7
Revert everything back to original and paste this in extra.css

The first is the rule for which boxes get the shadow, and the second is adjusting the visitorPanel size so it all looks the same...any changes to the first rule will now apply to all sidebar blocks including visitorPanel in case you want to adjust the shadow color or something.

HTML:
.sidebar > div > .secondaryContent {
    box-shadow: 2px 2px 2px #525152;
}
 
.sidebar .visitorPanel {
    margin-right: -5px;
    overflow: hidden;
    padding-right: 5px;
}
sidebar-shadow-B-R-.png