Support » Fixing WordPress » Custom CSS, expand width of page/nav bar

  • Please could help me with this issue i am having?
    Here is the code i am having trouble with.

    body {background: #1f2054 url(images/back-body.jpg) repeat-x; font: 11px palatino,"palatino linotype", serif; color: #152054 }
    	h1 {font-size: 24px; color: #174986 }
    	h2 {font-size: 20px; color: #087db6; padding: 0 }
    	h3 {font-size: 18px; color: #055891 }
    	h4 {font-size: 18px; color: #666 }
    	h5 {font-size: 16px; color: #e26d27 }
    	h6 {font-size: 14px; color: #000 }
    	p {margin:5px 0 10px 0; line-height: 125% }
    	strong, b, caption, th {font-weight: bold }
    	blockquote {border-left:3px solid #e8e8e8; margin:10px 10px 0 10px; padding-left:8px }
    	acronym, abbr {border-bottom:1px dashed #333; cursor:help }
    	dd {margin-left:15px }
    	a:link {color: #097ab1; font-weight: normal; text-decoration: none }
    	a:visited {color: #086796;}
    	a:hover, a:active {color: #0b9be3; text-decoration: underline }
    /* ***END GLOBAL*** */
    /* ***LAYOUT*** */
    	#bg {width: 100%; display: table; background: url(images/back-bg.jpg) no-repeat center top}
    	#shadow, #header, #container, #footer {margin: 0 auto }
    	#shadow {width: 1200px; position: relative }
    	#container {padding: 0 0 0px; background: #fff url(images/back-container.gif) repeat-y }
    	#container-shoulder {background: url(images/back-container-shoulder.jpg) no-repeat }
    	#header {height: 136px; }
    	#logo {margin: 5px 0 0 13px; overflow:hidden }
    	#logo a {outline: none }
    	.search_form {float: right; margin: 11px 6px 0 0 }
    	.search_form #s {border: 1px solid #28a7e9; padding: 5px 6px 0; width: 155px; height: 17px; color: #6d6d6d }
    	.page .search_form, .post .search_form {float: none }
    	#left-col {width: 816px; float: left; padding: 28px 0 0 0; overflow:hidden }
    	#sidebar {float: right; width: 275px; color: #525252; padding: 1px 0 10px }
    	* html body #sidebar {margin-top:-1px }
    	#footer {position: relative; background: #128bdf url(images/back-footer.jpg) no-repeat left bottom; width: 1200px; height:auto !important; height: 200px; min-height:200px }
    	#footer .footer-content {padding: 29px 28px 0; color: #fff; font-size: 11px }
    	#footer .footer-widget {float: left; width: 215px; padding:0 20px 50px 0 }
    	#footer ul.footerlinks {list-style-image:none; list-style-position:outside; list-style-type:none; margin:0 0 18px -7px }	
    	#footer ul.footerlinks li {padding:0 7px }
    	#optinbox {background: url(images/optin-container-bottom.png) no-repeat 0 bottom; margin:0 0 0 5px; height:auto !important; height:94px; min-height:94px }
    	#optin-container {padding: 86px 17px 30px 13px; height:auto !important; height: 270px; min-height:270px; color: #326f97; display:inline-block; background: url(images/optin-container-getthis.png) no-repeat }
    	#optin-container form {border: none; width: 230px; margin-top:5px }
    	#optin-container .textfield {width: 200px; height:18px; line-height:18px; padding:6px 10px 0; border: 1px solid #dfdfdf; font-size:11px; font-weight: normal; color: #8f8f8f; background: transparent url(images/back-textfield.png) no-repeat; margin-bottom: 8px }
    	#optin-container #opt_submit {background: url(images/back-optin-submit.png) no-repeat; text-align:center; width: 220px; height:34px; line-height: 34px; border:none; color:#fff; font-size: 18px; cursor:pointer }
    /* *** END LAYOUT*** */
    /* ***STYLES*** */
    	.recover {clear: both; line-height:0 }
    	.bold {font-weight: bold }
    	.italic {font-style: italic }
    	.txtcenter {text-align: center }
    	#blogname {padding:20px 0 0 20px; display:inline-block; background:transparent url(images/intrepid-logo.png) no-repeat 0 7px; width:550px; text-indent: -66666px; overflow: hidden }
    	#copyright {color: #88ceff; position: absolute; bottom: 16px; left: 25px; font-size: 11px }
    	#footer-tag {width: 375px; text-align: left; padding: 0 5px 0 0 }
    	.sidebar p {padding: 0 15px 0 20px; margin: 0 0 5px }
    	.home-content {padding:25px 0 0 32px; width: 600px}
    	.home-content h2 {background: url(images/back-home-heading.gif) no-repeat bottom right; color:#F3832B; font-size:18px; letter-spacing:-1px; margin:0 0 8px; padding:6px 86px 19px 0; text-transform:capitalize; width:305px }
    	#container .page {padding: 6px 0 12px 30px }
    	#container .page h2 {font-size: 22px; padding:0 20px 0 0 }
    	.page-content {background:transparent url(images/dots.gif) repeat-x 0 top; margin:4px 0 0 0; padding:12px 0 0 0; width: 560px}
    	.entry {clear: both; padding:0 12px 8px 0; margin: 0 0 0 82px }
    	.post {background: url(images/back-entrydate.png) no-repeat 12px 0; padding: 0 0 12px 15px; margin: 0 0 17px; clear: both; height:auto !important; height: 208px; min-height:208px }
    	* html body .post {background-position: 12px 15px; padding: 15px 0 12px 15px }
    	*+html body .post {background-position: 12px 15px; padding: 15px 0 12px 15px }
        .entry_header {margin: 0; position: relative }
    	.entry_header h1, .entry_header h2.home {float: left; margin: 6px 0 0 0; width: 370px; padding: 5px 80px 5px 0;
    		line-height: 1.6em; font-size: 18px; height:auto !important; height:40px; min-height:40px }
    	.entry-date {float: left; width: 58px; height: 52px; text-align: center; padding: 7px 22px 0 1px; font-weight: normal; margin: 0; font-size: 11px; color: #98d5ff; font-family: Tahoma, Geneva, sans-serif; text-transform:uppercase }
    	#left-col .date {font-family: Arial, Helvetica, sans-serif; color: #fff; font-size:25px; display:block; font-weight:bold; line-height:23px }
    	.entry-meta {margin: 0 44px 0 0; color: #595050; font-size: 11px; background: url(images/dots.gif) repeat-x 0 top; padding: 3px 0 0 0; width: 492px; float: right }
    	.comment-bubble {background:#21A0DE; color:#fff; font-size:11px; font-weight: bold; padding: 4px 12px; position:absolute; right:28px; top:18px; z-index:10 }
    	.entry_content {clear: both; margin: 0 0 0 84px }
    	#search-submit {background: url(images/btn-search.png) no-repeat; width: 25px; height:20px; overflow: hidden; border: none; cursor: pointer; text-indent: -7000px }
    	* html body #search-submit {padding-top:22px}
    	*+html body #search-stagcloudubmit {padding-top:22px}	
    	#sidebar h2 { color: #fff; font-size: 14px; text-align: left; height: 66px; background: url(images/back-sidebar-title.jpg) no-repeat right top; overflow: hidden }
    	#sidebar .side-switch h2 {background-position: right bottom}
    	#sidebar ul {background:url(images/sidebar-links-bg-bottom.png) no-repeat right bottom; padding: 0 0 19px 0; list-style: none }
    	#sidebar ul ul {background:none; padding:0 }
    	#sidebar li {padding: 0; list-style: none }
    	#sidebar ul ul {padding: 6px 0 15px 26px }
    	#sidebar li li {margin:0 9px 0 15px; list-style-image:url(images/icon-sidebar-link.png) }
    	#sidebar .widget {margin: 0 0 0 14px; background: url(images/sidebar-links-background.png) repeat-y right top }
    	#sidebar div.widget {margin: 0}
    	#sidebar ul ul ul { padding: 2px 0 8px }
    	.sidebar-divider {background: url(images/sidebar-divider.gif) repeat-x 0 top; height:1px; line-height:1px; margin: 0 0 5px; width: 292px }
    	#optin-container p { padding: 0; margin:0 }
    	#optin-container p.freeaudio { padding: 0 30px; margin:0 }
    	.btn-submit {background: url(images/btn-submit.gif) no-repeat; width: 87px; height: 24px; border: none; cursor: pointer }
    	#location-name {background: url(images/location-name.gif) no-repeat; width: 105px; height: 13px; position: absolute;	right: 243px; top: 72px; text-indent:-7000px;  }
    	#fcg-slides {margin: 0 0 18px 12px; border: 1px solid #dfdfdf; padding: 7px; background: #fff }
    	#fcg-slides h2 {color: #54b4f7 !important; margin:16px 0 0 16px !important; font-size: 16px !important }
    	#fcg-slides p {margin:2px 0 0 16px !important }
    	#fcg-slides .slideInfoZone {bottom: 0 }
    	#socialize-icons {position: absolute; top: 50px; right: -2px; list-style:none }
    	#socialize-icons a {display: block; height: 34px }
    	#socialize-icons li {float: right; overflow:hidden; text-indent: -33333px }
    	#icon-twitter {background: url(images/socialize-icons.png) no-repeat 0 0; width: 51px }
    	#icon-facebook {background: url(images/socialize-icons.png) no-repeat -51px 0; width: 33px  }
    	#icon-rss {background: url(images/socialize-icons.png) no-repeat 100% 0; width: 40px }
    	.customhtml {padding:0 0 0 98px }
    	#opt_data {display: none }
    	.meta {margin: 0 0 10px}
    	.tagmeta {color:#666; font-style:italic }
    	#tagcloud {margin-bottom:25px }
    	.post ul {margin-left:0; padding-left:30px } ul {margin-left:0; padding-left:30px } ul.children {padding: 0}
    	.customhtml ul {margin-left: 0; padding-left:30px }
    	.post ol {margin-left:0; padding-left:30px } ol {margin-left:0; padding-left:30px } ol.children {padding:0 }
    	.customhtml ol {margin-left:0; padding-left:30px }
    	.button {background:url(images/btn-comment-submit.png) no-repeat right top; color:#fff; cursor:pointer; display:inline-block; font-size:24px; font-weight:bold; height:27px; line-height:27px; vertical-align:middle; padding-right:10px }
    	.button span {background:url(images/btn-comment-submit.png) no-repeat left top; display:inline-block; height:27px; line-height:27px; padding-left:10px }
    	.button span input {background:none; border:0 none; color:#fff; cursor:pointer; font-family:inherit; font-size:14px; font-weight:bold; padding-top:5px }
    	.comment-text .reply {display:block; text-align:right }
    	.comment-text .reply a {margin-top:-25px; display:block; width:30px; float:right }
    	#sidebar li#promo {margin:0 0 0 20px }
    	#commentform lable {font-size:120% }
    	.editpost {background:url(images/icon-edit.gif) no-repeat; padding:0 0 2px 18px }
    	.tag-icon, .post .tags {background:url(images/icon-tag.gif) no-repeat; padding:0 0 2px 16px }
    	.comment-icon {background:url(images/icon-comment.gif) no-repeat; padding:0 0 0 18px }
    	.usr-meta {background:url(images/icon-author.gif) no-repeat; padding:0 0 1px 18px}
    	.readmore-icon, .navigation .alignright a {background:url(images/icon-doublearrow.gif) no-repeat right 0; padding:0 18px 1px 0}
    	.navigation .alignleft a {background:url(images/icon-doublearrow-left.gif) no-repeat left 0; padding:0 0 1px 18px}
    	.comment-reply-link {background:url(images/icon-reply.gif) no-repeat; padding:0 0 2px 18px }
    	.comment-reply-login {background:url(images/icon-key.gif) no-repeat; padding:0 0 2px 18px }
    	#optinbox .optin-nomsg {background: url(images/optin-container.png) no-repeat }
    	.containwithin {overflow:hidden }
    	.postedinfo {margin: 5px 0 0 0 }
    /* *** END STYLES*** */
    /* *** LINK / NAVIGATION *** */
    	#logo a:link, #logo a:visited {color:#fff }
    	#globalnav {position: absolute; top: 90px; height: 46px; width: 900px; background: url(images/back-globalnav.gif) no-repeat; z-index: 9999 }
    	#globalnav ul {list-style: none; width:690px; float: left }
    	#globalnav ul li {float: left; background: url(images/navi-divider.gif) no-repeat center right }
    	#globalnav ul li li {background: none }
    	#globalnav ul li.last { background: none }
    	#globalnav a:link, #globalnav a:visited {color: #fff; text-decoration: none; font-size: 12px; font-family:Arial, Helvetica, sans-serif; font-weight: bold }
    	#globalnav a:hover {color: #fff; text-decoration:underline }
    	#navpocket {height: 46px; overflow:hidden }
    	#nav li a, #nav li a:link {display: block; font-size: 12px;	text-decoration: none; padding:16px 11px }
    	* html body #nav li a:link {padding:15px 11px } 
    	#nav li a:hover, #nav li a:active {display: block; text-decoration: none; background: url(images/navhov.png) repeat-x }
    	#nav li li a, #nav li li a:link, #nav li li a:visited {color: #eee; background: url(images/back-navi.png) repeat-x;
    		width: 150px; float: none; margin: 0px; padding:10px 11px; border-bottom: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333 }
    	#nav li li a:hover, #nav li li a:active {background:#373737; color:#0099ff; text-decoration:none }
    	#nav li li li a:hover, #nav li li li a:active {color:#ff6600 }
    	#nav li ul {position: absolute; left: -999em; height: auto; width: 150px; margin:-1px 0 0 -1px }
    	#nav li li {padding: 0 }
    	#nav li ul ul {margin: -36px 0 0 173px }
    	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em }
    	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto}
    	#navpocket .nav-wide {width:100% }
    	#nav .current_page_item a {background: url(images/navhov.png) repeat-x }
    	#logo a:link, #logo a:visited, #logo a:hover, #logo a:active {font-size: 18px; text-decoration: none; font-weight:normal; color:#def0fc; /*text-shadow:0 1px 4px #000 0 1px 4px #000*/ }
    	#logo a span {font-weight:bold; font-size:26px; color:#fff }
    	.entry_header h1 a:link, .entry_header h1 a:visited, .entry_header h2.home a:link, .entry_header h2.home a:visited {font-size:30px; font-weight:normal; color: #087db6; text-decoration: none; outline: none }
    	.post-edit-link a:link, .post-edit-link a:visited {font-size:12px; font-weight:normal }
    	#sidebar ul li a:link, #sidebar ul li a:visited  { color: #4f4f4f; text-decoration: none; font-weight: normal  }
    	#sidebar ul li a:hover { text-decoration: underline }
    	#sidebar ul li a.sidebartitle:link, #sidebar ul li a.sidebartitle:visited  { color: #fff; text-decoration: none; font-weight: normal;  padding: 26px 0 22px 52px; display: block; outline: none  }
    	#footer a:link, #footer a:visited {color: #fff; text-decoration: none; font-size: 11px; font-weight: normal }
    	#footer a:active, #footer a:hover {color: #a1d8ff; text-decoration: underline }
    	#footer a.attribution:link, #footer a.attribution:visited, #footer a.attribution:hover {color: #636363; display: block; text-decoration: none; font-style: italic; letter-spacing: 1px; width: 870px }
    	#footer h2 a:link, #footer h2 a:visited, #footer h2 a:hover, #footer h2 a:active {font-weight: bold; color: #a1d8ff }
    	#footer ul.footerlinks li li {margin: 0 0 0 20px; padding: 0 0 0 4px; list-style-type:square }
    	.footer-content .divider {margin: 0 12px }
    	#footer-tag a:link, #footer-tag a:visited {color: #88ceff; font-weight: normal }
    	#footer-tag a:active, #footer-tag a:hover {color: #d9effe }
    	#left-col, #left-col, #left-col {font-size:12px; text-decoration: underline }
    	#left-col .editpost a:link, #left-col .editpost a:visited, #left-col .editpost a:hover {font-size:12px; text-decoration: underline }
    	.categories a:link, .categories a:hover, .categories a:visited {background: #21a0de; padding: 2px 7px; color: #fff; text-decoration: none; white-space:nowrap }
    	.comment-bubble a:link, .comment-bubble a:visited {font-weight: normal; color: #fff; text-decoration: none }
    	.page-content h3 a:link, .page-content h3 a:visited, .page-content h3 a:hover {text-decoration: none }
    	.fn a:link, .fn a:visited {text-decoration:none }
    /* *** END LINK / NAVIGATION *** */

Viewing 2 replies - 1 through 2 (of 2 total)
  • Wicksie


    Can I just bump this thread with a noob question. Again I’m a complete novice to all of this.

    My site is

    I would like the website to expand the page and not sit centred. I recently made a child theme to remove the search bar from my twenty eleven theme.
    I accidentally didn’t comment it out properly and acheived spanning the nav bar across the page and removing the background (which I’m ok with). This is what I had

    				// Has the text been hidden?
    				if ( 'blank' == get_header_textcolor() ) :
    				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
    				<?php get_search_form(); ?>
    				else :
    				<?php get_search_form(); ?>
    			<?php endif; ?>-->

    Obviously I forgot to open the comment out properly by omitting the —

    But this left me with the search box moved and the nav bar expanding.

    Once I opened the comment out properly, the search bar went and my nav bar went back to being centred and two lines. I’d love to have all the nav on one line.
    I’ve tried moving the commenting out around in the header.php but can’t work out how to replicate it with the search bar gone.
    Any ideas?

    Thanks so much for reading.

    Moderator Jan Dembowski


    Brute Squad and Volunteer Moderator

    I’m glad you searched but can you instead please start you own topic? Your issue and this 7 month old one are not really the same.

    How-To and Troubleshooting

    Starting your own topic really the best way to get support for your specific issue.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom CSS, expand width of page/nav bar’ is closed to new replies.