WordPress.org

Ready to get started?Download WordPress

Forums

Custom CSS, expand width of page/nav bar (3 posts)

  1. wayne osbourne
    Member
    Posted 1 year ago #

    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 }
    	div.page ul {margin-left:0; padding-left:30px }
    	div.page ul.children {padding: 0}
    	.customhtml ul {margin-left: 0; padding-left:30px }
    
    	.post ol {margin-left:0; padding-left:30px }
    	div.page ol {margin-left:0; padding-left:30px }
    	div.page 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 a.post-edit-link:link, #left-col a.post-edit-link:visited, #left-col a.post-edit-link:hover {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 *** */

    http://www.masscircle.com

  2. Wicksie
    Member
    Posted 1 year ago #

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

    My site is http://www.jetnikoff.com

    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

    <!<?php
    				// 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(); ?>
    				</div>
    			<?php
    				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.

  3. 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.

    http://wordpress.org/support/forum/how-to-and-troubleshooting#postform

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

Topic Closed

This topic has been closed to new replies.

About this Topic