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

Sidebar Styling

Jake Bunce

XenForo moderator
Staff member
#2
Something like this?

Screen shot 2011-03-17 at 9.11.54 PM.png

I edited this template:

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

And I added this code:

Code:
.sidebar h3
{
	font-size: 11px;
	color: @secondaryDarker;
	background: @secondaryLighter url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
	padding: 5px 10px;
	margin: 3px auto 0;
	border-top: 1px solid @secondaryLighter;
	border-bottom: 1px solid @secondaryLight;

	padding: 5px 10px;
	margin: 0;
	border-bottom-color: @subHeading.border-bottom-color;
	border-radius: 5px;
	min-height: 6px;
}
I copied the CSS for .nodeList .categoryStrip (the gold strip) from the node_list.css template and assigned it to .sidebar h3.
 

Brogan

XenForo moderator
Staff member
#5
Add this to EXTRA.css

Code:
.secondaryContent {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
That will affect everything using that class though, so if you want to restrict it to sidebar blocks only then you will need to change the .secondaryContent class to the specific class for each block.
 

DieselMinded

Well-known member
#6
Add this to EXTRA.css

Code:
.secondaryContent {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
That will affect everything using that class though, so if you want to restrict it to sidebar blocks only then you will need to change the .secondaryContent class to the specific class for each block.
EXACTLY WHAT I WAS AFTER

THANK YOU !!!!