Education theme– sidebar wider?

[mpeik]

I am sure there is a way-- but I can't seem to figure it out... how do I make the blue sidebar on my website wider. I would like the calendar info more easily readable. Thank you!!

 

http://www.rlschristianday.org

http://www.rlschristianday.org

[rfmeier]

Hello,

You sidebar and content are limited to a width of 1140px by this css rule;

/* line ~539 */
#inner .wrap {
    margin: 0 auto;
    width: 1140px;
}

Your sidebar and content must share this 1140px. If you are going to increase your sidebar, you must take from your content (to keep the styling of the page). Lets say we make a 100px adjustment to the content and sidebar;

/* line ~757 */
#content-sidebar-wrap {
	-moz-border-radius: 5px;
	-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
	background: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
	float: left;
	position: relative;
	width: 880px; /* subtracted 100px.  Was 980px, now 880px */
	z-index: 999;
}

/* line ~1384 */
#sidebar-alt {
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
	-moz-border-radius: 5px;
	-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
	background: #254c67 url(images/bg-sidebar.jpg);
	border-radius: 5px;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
	color: #aec6d7;
	float: left;
	font-size: 12px;
	margin: 15px -5px 15px 0;
	position: relative;
	text-shadow: none;
	text-shadow: #0d1a23 -1px -1px;
	width: 265px; /* added 100px.  Was 165px, now 265px */
	z-index: 0;
}

If you do make a change like this, please check your site thoroughly to make sure it did not affect anything else.

Here is a preview: https://www.diigo.com/item/image/40chg/imga

I hope this gives you a start.

---

Ryan Meier – Twitter

[Author]

Posts