Custom CSS, expand width of page/nav bar
-
Using the Pressrow theme; purchased the Custom CSS upgrade
Blog is http://www.libertychick.com (pointing from http://flutemandy77.wordpress.com)
Need to add another link in main navigation bar, so I’m trying to expand default page width and navigation bar width (and any other elements that also need to change to accommodate a wider page). Can’t figure out what to change…when I tinker with #container, #page, #content px sizes, eeeewwww…it just gets ugly. Might be my bad math, or might be I’m changing the wrong elements. Help?I’m trying to add enough extra width about the same size as the “Be Informed” link – about an extra 175px.
THX!
The blog I need help with is: (visible only to logged in users)
-
You could simply decrese the size of the links in the header like, adding,
#nav li a, #nav li a:visited { font-size: 1.1em;}
Or to increase the width of the page…
The following below is what you would change. I change the number of the widths around to where I think you’d be able to add an extra page title on the same line. For the elements to align I’d recommend consistency for example by keeping your chosen container width the same as the page with and so on. Your content width is#container { width: 970px; margin: 0 auto; } #page { width: 970px; float: left; } #header { width: 970px; margin-bottom: 30px; float: left; } #content_box { width: 970px; padding-bottom: 5px; text-align: left; float: left; } #content { width: 700px; padding-right: 40px; overflow: visible; float: left; } * html #content { overflow: hidden; } #sidebar { width: 230px; overflow: hidden; color: #222; font-size: 1.2em; line-height: 1.5em; float: left; } * html #sidebar { overflow: hidden; } #footer { width: 970px; padding-top: 8px; border-top: 4px solid #222; font-size: 1.2em; text-transform: uppercase; letter-spacing: .3em; float: left; clear: both; }With that you might also want to change the width of your posts to fill up the open space and you would change the width of this…
.post, .page, .attachment { width: 300px; }
Sorry for lengthy reply but I’m bored today lolHTH
-
Thanks!! (Long replies perfectly cool with me!)
This is what I did previously, and it works to increase the navbar, but then the rest of the content below it is still restricted to a smaller width, including the horizontal rule beneath the custom header image. Even when I increased the width of the posts to fill up the open space, it still doesn’t fill out. Is it maybe because I’m using static pages vs. posts? It just occurred to me that maybe there’s a different place I might need to change the width since I’m using pages vs. posts. Here’s the full code I’m using, with your changes included:
/*
Theme Name: PressRow
Description: Feel like a journalist with this two-column theme with customizable header.
Version: 0.1-wpcom
Author: Chris Pearson
Author URI: http://www.pearsonified.com/
Tags: custom header, two columns, fixed width, rtl
*/body { background: #fff; color: #444; font: 62.5% Georgia, “Times New Roman”, Times, serif; text-align: center; }
* { padding: 0; margin: 0; }
a img { border: 0; }
/*—:[ global elements ]:—*/
a { color: #1c9bdc; text-decoration: underline; }
a:visited { color: #000; text-decoration: underline; }
a:hover { color: #1873a1; text-decoration: underline; }
p { margin: 0 0 15px 0; }
blockquote { padding: 5px 10px 0 10px; margin: 0 0 15px 0; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; background: #f5f5f5; color: #666; }
blockquote p { margin-bottom: 7px; }
code { color: #090; font-family: “Courier New”, Courier, monospace; }
pre { width: 500px; margin-bottom: 15px; font-size: 1.2em; float: left; }
* html pre { font-size: 1.0em; overflow: hidden; }
/*—:[ headlines ]:—*/
h1 { font-weight: bold; font-size: 4.0em; line-height: 1.8em; }
#header h1 { text-align: right; }
h1 a, h1 a:visited, h1 a:hover { color: #222; text-decoration: none; }
h2 { font-weight: normal; font-size: 2.0em; }
.post h2, .page h2, .attachment h2 { color: #000; line-height: normal; padding-top: 10px; margin-bottom: 10px; }
.post h2 a, .page h2 a, .attachment h2 a { color: #000; text-decoration: none; }
.post h2 a:visited, .page h2 a:visited, .attachment h2 a:visited { color: #666; text-decoration: none; }
.post h2 a:hover, .page h2 a:hover, .attachment h2 a:hover { color: #1c9bdc; text-decoration: none; }
#sidebar h2 { color: #999; }
h2.archive_head { font-size: 2.4em; padding: 4px 4px 4px 32px; background: #f5f5f5 url(‘images/icon_folder.gif’) 5px 50% no-repeat; border-bottom:
1px solid #bbb; margin-bottom: 30px; }
h2.comment_head { padding-left: 29px; line-height: 2.0em; background: url(‘images/icon_comment.gif’) 0 50% no-repeat; color: #999; }
h2.form_head { color: #999; }
h3 { font-weight: normal; font-size: 1.5em; margin-bottom: 4px; color: #999; }
h4 { display: inline; font-weight: normal; padding: 4px; line-height: 1.0em; font-size: .8em; text-transform: uppercase; background: #f5f5f5; border-bottom:
1px solid #ddd; }
/*—:[ core layout elements ]:—*/
#container { width: 970px; margin: 0 auto; }
#page { width: 970px; float: left; }
#header { width: 970px; margin-bottom: 30px; float: left; }
#content_box { width: 970px; padding-bottom: 5px; text-align: left; float: left; }
#content { width: 700px; padding-right: 40px; overflow: visible; float: left; }
* html #content { overflow: hidden; }
#sidebar { width: 230px; overflow: hidden; color: #222; font-size: 1.2em; line-height: 1.5em; float: left; }
* html #sidebar { overflow: hidden; }
#footer { width: 970px; padding-top: 8px; border-top: 4px solid #222; font-size: 1.2em; text-transform: uppercase; letter-spacing: .3em;
float: left; clear: both; }
/*—:[ header styles ]:—*/
#nav { width: 100%; border-top: 4px solid #222; border-bottom: 2px solid #222; float: left; }
#nav ul { list-style: none; }
#nav li { float: left; }
#nav li a, #nav li a:visited { display: block; height: 3.0em; padding: 0 1.2em; line-height: 3.0em; color: #222; text-decoration:
none; font-size: 1.4em; text-transform: uppercase; letter-spacing: .3em; float: left; cursor: pointer }
#nav li a:hover { color: #fff; background: #222; text-decoration: none; }
#nav li.current_page_item a:link, #nav li.current_page_item a:visited { background: #222; color: #fff; cursor: default; }
#pic { width: 770px; height: 200px; border-bottom: 2px solid #222; clear: both; float: left; background: url(‘images/books.jpg’) no-repeat; }
/*—:[ content styles ]:—*/
.post, .page, .attachment { width: 300px; margin-bottom: 50px; font-size: 1.4em; line-height: 1.7em; color: #444; float: left; }
.sticky .entry {
background: #F5F5F5;
padding: 10px;
}
.entry ul, .entry ol { margin: 0 0 15px 40px; color: #000; }.entry ul { list-style-type: square; }
.entry li { padding: 3px 0; }
.entry ul li ul, .entry ul li ol, .entry ol li ul, .entry ol li ol { margin: 0 0 0 30px; }
.entry dl { margin-bottom: 15px; }
.entry dt { font-weight: bold; color: #000; }
.entry dd { margin: 0 0 0 20px; font-style: italic; }
.entry img.left { padding: 6px; margin: 0 10px 5px 0; background: #f5f5f5; border: 1px solid #bbb; float: left; }
.entry img.left_off { margin: 0 10px 5px 0; float: left; }
.entry img.right { padding: 6px; margin: 0 0 5px 10px; background: #f5f5f5; border: 1px solid #bbb; float: right; }
.entry img.right_off { margin: 0 0 5px 10px; float: right; }
.entry img.center { display: block; padding: 6px; margin: 0 auto 15px auto; background: #f5f5f5; border: 1px solid #bbb; }
.entry img.center_off { display: block; margin: 0 auto 15px auto; }
.post_meta { width: 480px; padding: 4px 10px; border-top: 1px dotted #bbb; border-bottom: 1px dotted #bbb; background: #f5f5f5; line-height: normal;
float: left; }
p.num_comments { padding-left: 27px; margin-bottom: 0; line-height: 1.6em; background: url(‘images/icon_excl.gif’) 0 50% no-repeat; float:
right; }
p.tagged { padding-left: 27px; margin-bottom: 0; line-height: 1.6em; background: url(‘images/icon_file.gif’) top left no-repeat; width: 70%;
float: left; }
.navigation { width: 480px; padding: 10px; margin-bottom: 30px; font-size: 1.4em; line-height: 1.7em; background: #f5f5f5; float: left; }
* html .navigation { line-height: normal; }
.previous { padding-left: 27px; margin-bottom: 0; background: url(‘images/icon_previous.gif’) 0 50% no-repeat; float: left; }
.next { padding-right: 27px; margin-bottom: 0; background: url(‘images/icon_next.gif’) 100% 50% no-repeat; float: right; }
.jump { padding: 4px 6px 4px 33px; margin: 0 0 10px 10px; background: #f5f5f5 url(‘images/icon_down.gif’) 6px 50% no-repeat; float: right; clear:
both; }
/*—:[ sidebar styles ]:—*/
#sidebar ul { list-style: none; }
#sidebar ul li { margin-bottom: 25px; }
#akismetwrap, .sidebar_section { width: 230px; padding: 10px 0 7px 0; background: #f5f5f5; }
#sidebar ul li.widget ul { padding: 10px 0 7px 20px; background: #f5f5f5; clear: both; }
.sidebar_section p { padding: 0 10px; margin-bottom: 10px; }
.sidebar_section p.center { text-align: center; }
.sidebar_section img.off { border: none; }
#sidebar ul li ul, #sidebar ul li ol { list-style: square;padding-left: 20px; margin-bottom: 12px; }
#sidebar ul li ul li, #sidebar ul li ol li { padding: 3px 10px 3px 0; margin-bottom: 0; }
#sidebar ul li.widget ul li ul { padding-top: 0; }
.quick_date { padding-left: 10px; color: #999; }
#akismetwrap { margin-top: 0px; padding-left: 10px; }
/*—:[ footer styles ]:—*/
#footer p { text-align: center; }
#footer a, #footer a:visited { color: #222; text-decoration: none; }
#footer a:hover { color: #222; text-decoration: none; }
/*—:[ comment styles ]:—*/
#comments { width: 500px; font-size: 1.4em; line-height: 1.7em; color: #444; float: left; clear: both; }
ul.comment_list { width: 480px; list-style: none; margin-bottom: 40px; border-top: 1px dotted #bbb; float: left; }
ul.comment_list li, ul.comment_list li.thread-alt, ul.comment_list li.author_comment_, ul.comment_list li.author_comment_alt { width: 100%;
padding: 15px 10px 5px 10px; border-bottom: 1px dotted #bbb; list-style: none; }
ul.comment_list li .children { padding-left: 20px; }
ul.comment_list li .children li { border-bottom: none;}
ul.comment_list li.thread-alt, ul.comment_list li.author_comment_alt { background: #f5f5f5; }
.comment_intro { line-height: normal; }
* html .comment_intro { margin-bottom: 0; }
.avatar { float: right; margin: 0 0 10px 10px; background: #fff; border: 1px solid #eee;padding: 2px; }
.comment_author { font-weight: bold; font-size: 1.2em; }
.comment_meta { font-size: .9em; }
.comment_meta a, .comment_meta a:visited, .comment_meta a:hover { color: #999; text-decoration: none; }
#comments .entry { margin-top: 15px;}/*—:[ comment form styles ]:—*/
#comment_form { width: 100%; padding: 10px 0; float: left; }
#comment_form p { padding: 6px 0; margin-bottom: 0; }
#comment_form label { padding-left: 10px; font-size: .9em; }
#comment_form .text_input { width: 40%; padding: 3px; color: #444; font: normal 1.4em Georgia, “Times New Roman”, Times, serif; border-top:
2px solid #999; border-left: 2px solid #999; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
#comment_form .text_area { width: 95%; padding: 3px; color: #444; font: normal 1.4em Georgia, “Times New Roman”, Times, serif; border-top:
2px solid #999; border-left: 2px solid #999; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
#comment_form .text_input:focus, #comment_form .text_area:focus { border-top: 2px solid #444; border-left: 2px solid #444; border-right: 1px
solid #ddd; border-bottom: 1px solid #ddd; }
/*—:[ search form styles ]:—*/
#searchform, #search_form { text-align: center; }
#searchform #s, #search_form .text_input { width: 85%; padding: 3px; color: #444; font: normal 1.4em Georgia, “Times New Roman”, Times, serif;
border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; }
#searchform #s, #search_form .text_input:focus { border-top: 1px solid #444; border-left: 1px solid #444; border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd; }
img.centered, img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}.alignright {
float: right;
}.alignleft {
float: left;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}.entry dd .wp-caption p.wp-caption-text, .wp-caption p.wp-caption-text {
font-style: normal;
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px 0;
margin: 0;
}.clear {
clear: both;
} -
from what I’m seeing, adding,
.post, .page, .attachment { <strong>width: 700px;</strong> margin-bottom: 50px; font-size: 1.4em; line-height: 1.7em; color: #444; float: left; }
should change the width of the posts. or maybe add “.page {width: 700px;}” to the end of your CSS. It could be because of the static page but if it is then I’m not experiencing that problem with your theme.
And the horizontal rule (or border) beneath the custom header would be changed with,
#pic { width: 970px; height: 200px; border-bottom: 2px solid black; clear: both; float: left; background: url('images/books.jpg') no-repeat; }
you’ll have to increase you header length to 970px and enter the url image into the above attribute.HTH
-
haha, I forgot html tags don’t work there, obviously dont include the
<strong> </strong>html tags in your CSS in the first code I posted -
You’re welcome,
to hide the nav and header title, just add “display:none;” to the following attributes like,
#header h1 { display: none; } #nav { display: none; } -
The #header h1 change worked great, removed my “Liberty Chick” blog title as I wanted. The #nav change unfortunately removed the navbar, instead of removing the redundant page title (i.e. “Home”)…. I’m 99% of the way there!!
I can actually play around with it myself and can probably figure out which element represents the page title, if you’ve had enough of this topic :) You’ve already been a tremendous help!
-
This support document describes how to get rid of the second “home” page link in the navigation bar: http://support.wordpress.com/pages/hide-pages/ .
-
What I’m trying to hide is the page title on each page. I do already have the second home page hidden so that I can use the static home page without it appearing in the navigation.
I simply want the titles to be hidden from each page, because I’m already using my own custom graphics, so it’s redundant and the text titles just take up real estate.
But thanks anyway :)
-
No problem, I’ve been dying for CSS questions around here. I’m not sure you can get rid of the home link in the navigation bar completely, you can add the CSS class “a.blog {}”. I wasn’t able to remove it, but you can hide it by using, a.blog {margin-right: -100px;}. And if you’re talking about the blog titles that appear as headings on the individual pages, then this is what you would add, .page h2 {display: none;}.
-
oh, sorry I didn’t see your previous comment, I think you mean for example, hiding the home link on the nav bar since you’re already on the home page(?). I don’t think that can be done unfortunately.
-
>>And if you’re talking about the blog titles that appear as headings on the individual pages,
>>then this is what you would add, .page h2 {display: none;}THAT DID IT!!!! Yes, I was talking about removing the titles that appear as headings on the individual pages. That last change just removed it for me. I couldn’t for the life of me figure out which element of the CSS code represented the individual page titles – now I know. (I don’t do much coding myself anymore; I used to be a web developer in the ’90’s and early 2000’s…when we all still coded by hand in Notepad!! That should tell you enough about the pace of my working knowledge of CSS.)
Thanks so much, I’m all set now. YOU ROCK!!!!
-
It’s been that long since I did much either and I’m now knee deep in a couple design jobs so I’m having to move quickly to get caught up. PHP scripting ahead, watch for falling rocks.
- The topic ‘Custom CSS, expand width of page/nav bar’ is closed to new replies.
WordPress.com Forums 