WordPress.org

1. ShizzlePDX503
   Member
   Posted 2 years ago #

   I am currently using Linetech 1.0 and need the sidebar to be wider to accommodate some widgets that I am using. I have tried editing the css but with much trial and error its not making it any wider. Can anyone help me out it would be greatly appreciated.

2. blondishnet
   Member
   Posted 2 years ago #

   It would be better if you put the CSS code in here to share the issue and the link to your site if the theme is already up and tell what width you needed the sidebar to be.

   Remember, if you are widening your sidebar, you will have to shorten your main content area (you would not want your site to be too wide or it will not show well in any browser.)

3. ShizzlePDX503
   Member
   Posted 2 years ago #

   well I am using the slideshow widget for the NextGen Gallery and I wanted it to be 300x220 in the sidebar cause at the moment it doesn't look all that great when I have to reduce it to 250x220. I don't have a link to my site as I am only running it locally for the time being.

   Here is the CSS of the theme.

   html, body {
   	font-family: arial;
   	font-size: 12px;
   	border: 0;
   	color: #737373;
   }
   
   body, img, p, h1, h2, h3, h4, h5, ul, ol, li, form, blockquote {
   	margin: 0;
   	padding: 0;
   }
   
   body {
   	background: url(img/bg_footer.jpg);
   }
   
   p {
   	line-height: 20px;
   	padding: 10px 0;
   }
   
   h1, h2, h3, h4, h5 {
   	padding: 10px 0;
   	color: #fff;
   }
   
   ul, ol {
   	list-style: none;
   	padding: 10px 0;
   }
   
   small {
   	font-size: 11px;
   }
   
   code {
   	background: #FFFFC1;
   }
   
   a {
   	color: #DB2B2C;
   	text-decoration: none;
   }
   
   a:hover {
   	text-decoration: none;
   }
   
   a img {
   	border: none;
   }
   
   blockquote {
   	font-size: 12px;
   	width: 80%;
   	padding: 0 4%;
   	margin: 10px 0 10px 4%;
   	border-left: #D58B00 2px solid;
   	color: #5F5F5F;
   	line-height: 19px;
   	font-style: italic;
   }
   
   blockquote p {
   	padding: 5px 0;
   }
   
   blockquote blockquote {
   	border-left: #8A111E 2px solid;
   }
   
   .aligncenter {
   	margin: 10px auto 20px auto;
   	display: block;
   }
   
   .alignleft {
   	margin: 10px 10px 8px 0;
   	float: left;
   }
   
   .alignright {
   	margin: 10px 0px 8px 10px;
   	float: right;
   }
   
   /* Wrap */
   
   #wrap {
   	width: 100%;
   }
   
   /* Top */
   
   #top {
   	width: 100%;
   	height: 233px;
   	padding-top: 5px;
   	background: url(img/bg_top.jpg);
   }
   
   #top .in {
   	width: 925px;
   	height: 233px;
   	margin: 0 auto;
   	position: relative;
   }
   
   /* Top (title) */
   
   #title {
   	width: 550px;
   	height: 182px;
   	background: url(img/bg_title.jpg) no-repeat left top;
   	overflow: hidden;
   	float: left;
   	position: relative;
   	margin-left: -50px;
   }
   
   #title h1 {
   	font-family: Tahoma;
   	font-size: 40px;
   	margin-left: 60px;
   	padding-top: 65px;
   }
   
   #title h1 a {
   	color: #fff;
   	text-decoration: none;
   	letter-spacing: -2px;
   }
   
   #title h1 a:hover {
   	color: #00A0E6;
   }
   
   #title h3 {
   	margin-left: 60px;
   
   }
   /* Top (search) */
   
   #top #search {
   	width: 197px;
   	height: 42px;
   	background: url(img/bg_search.jpg);
   	position: relative;
   	float: right;
   	margin-top: 77px;
   	margin-right: 43px;
   	display: inline;
   }
   
   #top #search input.txt {
   	color: #646464;
   	font-family: Arial, Helvetica, sans-serif;
   	font-size: 12px;
   	position: absolute;
   	left: 15px;
   	top: 12px;
   	border: 0;
   	background: transparent;
   	width: 130px;
   }
   
   #top #search input.bt {
   	position: absolute;
   	left: 158px;
   	top: 8px;
   }
   
   /* Top (menu) */
   
   #menu {
   	width:100%;
   	clear: both;
   	position: absolute;
   	bottom: 20px;
   }
   
   #menu ul {
   	width: 920px;
   	padding: 0;
   }
   
   #menu ul li {
   	text-transform: uppercase;
   	display: inline;
   }
   
   #menu li a {
   	color: #535151;
   	display: block;
   	float: left;
   	padding-left: 3px;
   	margin-right: 7px;
   }
   
   #menu li a span {
   	display: block;
   	line-height: 34px;
   	padding: 0 14px 0 11px;
   }
   
   #menu ul li a:hover {
   	color: #fff;
   	background: url(img/link_left.jpg) no-repeat left top;
   }
   
   #menu ul li a:hover span {
   	background: url(img/link_right.jpg) no-repeat right top;
   }
   
   #menu ul li.current_page_item a {
   	color: #fff;
   	background: url(img/link_left.jpg) no-repeat left top;
   }
   
   #menu ul li.current_page_item a span {
   	background: url(img/link_right.jpg) no-repeat right top;
   }
   
   /* Content Wrap */
   
   #content_wrap {
   	width: 100%;
   	background: url(img/bg_content.jpg);
   }
   
   #content_wrap .in {
   	width: 925px;
   	margin: 0 auto;
   	padding-bottom: 30px;
   }
   
   /* Content */
   
   #content {
   	width: 549px;
   	float: left;
   	padding-top: 30px;
   }
   
   #content h2 {
   	font-size: 21px;
   	font-family: Georgia;
   	font-weight: normal;
   }
   
   #content h1, #content h2, #content h3 {
   	color: #fff; /* #9F9F9F */
   }
   
   #content h2 a {
   	color: #00A0E6;
   	text-decoration: none;
   }
   
   #content h2 span a {
   	color: #fff;
   }
   
   #content h2 a:hover {
   	text-decoration: underline;
   }
   
   #content ul {
   	padding-left: 50px;
   	color: #737373;
   }
   
   #content ol {
   	padding-left: 70px;
   	color: #737373;
   }
   
   #content ol li {
   	padding-left: 70px;
   	line-height: 19px;
   	padding: 2px 0 2px 0px;
   }
   
   #content ul li {
   	line-height: 19px;
   	padding: 2px 0 2px 20px;
   	background: url(img/square.gif) no-repeat 0 10px;
   }
   
   #content ol li {
   	list-style: decimal;
   }
   
   /* Content (post) */
   
   .post {
   	padding: 15px 0 10px 0;
   	clear: both;
   }
   
   .post a {
   	text-decoration: underline;
   }
   
   .post a:hover {
   	color: #fff !important;
   }
   
   .post .title {
   	background: url(img/line.gif) no-repeat left bottom;
   	position: relative;
   	margin-bottom: 5px;
   }
   
   .post .date {
   	margin-top: -20px;
   	font-size: 11px;
   	position: relative;
   	padding-bottom: 8px;
   }
   
   .post .date a, .post .post_details a {
   	color: #9D9D9D;
   	text-decoration: none;
   	border-bottom: #494949 1px solid;
   }
   
   .post .date a:hover, .post .post_details a:hover {
   	text-decoration: none;
   	border-color: #5A5A5A;
   }
   
   .post .post_details {
   	font-size: 11px;
   	clear: both;
   }
   
   /* More Posts */
   
   .more_posts {
   	padding: 15px 0 10px 0;
   	font-family: Georgia;
   }
   
   .more_posts h2 {
   	font-size: 19px !important;
   }
   
   .more_posts a {
   	color: #9F9F9F !important;
   }
   
   .more_posts h2 a:hover {
   	color: #fff !important;
   	text-decoration: none !important;
   }
   
   /* Comments (single.php and comments.php) */
   
   h2.lc {
   	padding-top: 20px;
   }
   
   .comments_wrap {
   	width: 500px;
   	margin: 20px 0 0px 10px;
   	clear: both;
   	padding-bottom: 5px;
   }
   
   .comments_wrap a {
   	text-decoration: underline !important;
   }
   
   .comments_wrap a:hover {
   	text-decoration: none;
   	color: #fff;
   }
   
   .comments_wrap .left {
   	width: 46px;
   	padding-top: 2px;
   	float: left;
   }
   
   .comments_wrap .left img {
   	border: #4A4A4A 3px solid;
   	padding: 1px;
   }
   
   .comments_wrap .right {
   	width: 410px;
   	float: left;
   	padding-left: 20px;
   }
   
   .comments_wrap .right h4 {
   	font-size: 11px !important;
   	text-transform: none;
   	padding: 0;
   	font-weight: normal;
   	color: #707070;
   }
   
   .comments_wrap .right h4 b {
   	font-size: 12px !important;
   	color: #8C8C8C;
   }
   
   .comments_wrap .right h4 a {
   	text-decoration: none;
   }
   
   .comments_wrap .right h4 a:hover {
   	text-decoration: underline;
   }
   
   /* Comments (form) */
   
   #content form {
   	margin: 20px 0 30px 10px;
   }
   
   #content form label {
   	display: block;
   	margin: 10px 0;
   	font-size: 12px;
   }
   
   #content form label input {
   	padding: 6px 4px;
   	width: 220px;
   	font-size: 12px;
   	background: #2F2F2F;
   	border: #3F3F3F 1px solid;
   	color: #fff;
   }
   
   #content textarea {
   	margin-bottom: 10px;
   	display: block;
   	padding: 3px;
   	font-size: 12px;
   	background: #2F2F2F;
   	border: #3F3F3F 1px solid;
   	color: #fff;
   }
   
   #content form input {
   	margin-top: 5px;
   }
   
   #content form input.sb {
   	background: #2F2F2F;
   	border: #3F3F3F 1px solid;
   	color: #8B8B8B;
   	padding: 5px 0;
   	width: 80px;
   }
   
   .lc_logged {
   	padding: 0;
   	margin-top: -10px;
   }
   
   /* Widget (calendar) */
   
   #wp-calendar {
   	width: 95%;
   	padding: 0 0 0px 0;
   	margin-bottom: 15px;
   }
   
   #wp-calendar caption {
   	padding: 10px;
   }
   
   #wp-calendar th {
   	color: #fff;
   }
   
   #wp-calendar th, #wp-calendar td {
   	padding: 5px;
   	text-align: center;
   	background: #383838;
   	color: #9E9E9E;
   }
   
   #wp-calendar td {
   	background: transparent;
   }
   
   #wp-calendar td, table#wp-calendar th {
   	padding: 3px 0;
   }
   
   #wp-calendar a {
   	text-decoration: underline;
   }
   
   #wp-calendar a:hover {
   	text-decoration: none;
   }
   
   /* Sidebar */
   
   #sidebar {
   	width: 284px;
   	float: right;
   	background: url(img/bg_sidebar.jpg);
   }
   
   #sidebar_in {
   	width: 284px;
   	padding-bottom: 120px;
   	background: url(img/sidebar_bottom.jpg) no-repeat left bottom;
   }
   
   #sidein {
   	padding-left: 20px;
   	margin-top: -10px;
   	width: 241px;
   	overflow: hidden;
   	padding-right: 23px;
   }
   
   #sidebar h2 {
   	font-size: 12px;
   	font-weight: normal;
   	text-transform: uppercase;
   	background: url(img/sidebar_h2.jpg) no-repeat;
   	padding: 0 0 0 20px;
   	margin-top: 10px;
   	margin-bottom: 5px;
   	line-height: 35px;
   	width: 262px;
   	margin-left: -19px;
   }
   
   #tag_cloud h2 {
   	margin-bottom: 15px;
   }
   
   .widget_tag_cloud {
   	padding-bottom: 20px !important;
   }
   
   .widget_text {
   	padding-bottom: 20px !important;
   }
   
   .widget_text h2 {
   	margin-bottom: 15px !important;
   }
   
   .block {
   	padding-bottom: 10px;
   }
   
   #sidebar a {
   	text-decoration: underline;
   }
   
   #sidebar a:hover {
   	color: #fff;
   }
   
   a.rss {
   	display: block;
   	width: 284px;
   	height: 58px;
   	background: url(img/sidebar_rss.jpg);
   	margin-top: -21px;
   	position: relative;
   }
   
   a.rss:hover {
   	background: url(img/sidebar_rss_hover.jpg);
   }
   
   a.rss span {
   	display: none;
   }
   
   #sidebar ul {
   	padding: 10px 0;
   }
   
   #sidebar ul ul {
   	padding: 0;
   }
   
   #sidebar li {
   	line-height: 18px;
   	padding: 2px 0 2px 20px;
   	background: url(img/li.gif) no-repeat 0 8px;
   }
   
   #sidebar li a {
   	color: #FA884A;
   	text-decoration: none;
   }
   
   #sidebar li a:hover {
   	text-decoration: underline;
   	color: #fff;
   }
   
   /* Footer */
   
   #footer {
   	width: 100%;
   	background: url(img/footer_top.jpg) repeat-x top;
   }
   
   #footer .in {
   	width: 925px;
   	margin: 0 auto;
   	padding-top: 45px;
   	padding-bottom: 40px;
   }
   
   /* Footer (copyright) */
   
   #copyright {
   	font-size: 11px;
   	width: 400px;
   	float: left;
   }
   
   #copyright a {
   	color: #CDCDCD;
   	border-bottom: #494949 1px solid;
   	text-decoration: none;
   }
   
   #copyright a:hover {
   	border-color: #5A5A5A;
   	color: #fff;
   }
   
   #copyright p {
   	padding: 0;
   }
   
   /* Footer (menu) */
   
   #fmenu {
   	width: 500px;
   	float: right;
   	height:27px;
   	overflow:hidden;
   }
   
   #fmenu ul {
   	float: right;
   }
   
   #fmenu li {
   	display: inline;
   	padding:0px 0px 10px 0px;
   	line-height:16px;
   }
   
   #fmenu li a {
   	color: #6E6E6E;
   	padding: 6px;
   	margin-right: 8px;
   }
   
   #fmenu li a:hover, #fmenu li.current_page_item a {
   	color: #fff;
   	background: url(img/footer_menu_bg.jpg);
   }
   
   /* Fix */
   
   #content_wrap:after,
   .comments_wrap:after,
   .in:after {
       content: ".";
       display: block;
   	 height: 0;
       clear: both;
       visibility: hidden;
   }

4. ShizzlePDX503
   Member
   Posted 2 years ago #

   I have changed:
   

   #sidebar {
   	width: 284px;
   	float: right;
   	background: url(img/bg_sidebar.jpg);
   }
   
   #sidebar_in {
   	width: 284px;
   	padding-bottom: 120px;
   	background: url(img/sidebar_bottom.jpg) no-repeat left bottom;
   }

   to

   #sidebar {
   	width: 400px;
   	float: right;
   	background: url(img/bg_sidebar.jpg);
   }
   
   #sidebar_in {
   	width: 400px;
   	padding-bottom: 120px;
   	background: url(img/sidebar_bottom.jpg) no-repeat left bottom;
   }

   When I do that it makes the sidebar go near the bottom of the page but doesn't widen the sidebar.

5. binni_77
   Member
   Posted 2 years ago #

   Try to reduce the #content width to less than 500 #sidebar and
   #content together should be less than or equal to #content_wrap (925) width.As there are paddings u should count them also.And also reduce the #comment width.

6. ShizzlePDX503
   Member
   Posted 2 years ago #

   thanks!

Topic Closed

This topic has been closed to new replies.