How to add shadow at sidebar secondaryContent only

  • Thread starter Thread starter bogus
  • Start date Start date
B

bogus

Guest
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
 
I was able to create this effect:

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

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

Looks like as if the Section is to long?
 
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.
 
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
}
 
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-.webp
 
Top Bottom