Changing header and sidebar width on Wordpress?

**Mr.81** · Jan 6, 2013 00:52

Hey guys!

Running Wordpress 3.5 - trying to change the header and sidebar width. No luck yet.

I've tried doing it myself for a while; went to Wordpress forums and they said they can no longer help (after suggesting a few things) as the theme isn't listed on their site.

Here's my site: www.trueshowbiz.com

Any help would be greatly appreciated. Thanks!

**Pullo** · Jan 6, 2013 01:25

Hi Mr.81,

Could you post a link to the thread on the WordPress forums, so that we can see what you've tried.

Ideally, altering the page width, would be a matter of changing a couple of values in the theme's CSS file. However, in the case of a more extensive theme and a responsive one to boot, it may be a little more complicated.

**Mr.81** · Jan 6, 2013 11:55

Originally Posted by Pullo

Hi Mr.81,

Could you post a link to the thread on the WordPress forums, so that we can see what you've tried.

Ideally, altering the page width, would be a matter of changing a couple of values in the theme's CSS file. However, in the case of a more extensive theme and a responsive one to boot, it may be a little more complicated.

Whoops! I meant to add the link to Wordpress forums. Here it is: http://wordpress.org/support/topic/h...mage?replies=9

Thank you.

**Paul O'B** · Jan 6, 2013 13:57

Hi,

For dimensions and the text indent to work in the header you need to set the anchor to display:block.

Code:

#logo h1 a {
    background: url("images/SMALLnewtrueshowbizlogosmaller.png") no-repeat  0 0;
    display: block;
    height: 120px;
    text-indent: -9999px;
    width: 320px;
}

You mentioned changing the sidebar width bit you will have to be more specific. e.g. wider or narrower and by how much? The sidebar is made of a number of fixed width elements and images and they will all need to be changed if you want more than a coule of pixels changed. It will also mean adjusting the main column to match as the widths need to add up to the main containers width.

**Mr.81** · Jan 6, 2013 14:32

Originally Posted by Paul O'B

Hi,

For dimensions and the text indent to work in the header you need to set the anchor to display:block.

Code:

#logo h1 a {
    background: url("images/SMALLnewtrueshowbizlogosmaller.png") no-repeat  0 0;
    display: block;
    height: 120px;
    text-indent: -9999px;
    width: 320px;
}

You mentioned changing the sidebar width bit you will have to be more specific. e.g. wider or narrower and by how much? The sidebar is made of a number of fixed width elements and images and they will all need to be changed if you want more than a coule of pixels changed. It will also mean adjusting the main column to match as the widths need to add up to the main containers width.

Thank you so much! That did it. There's quite a bit of black space at the top now but I guess I'll live with that. Thank you.

As for the sidebar, I was hoping to make it 300px wide so I can get a bigger ad in there.

Thanks!

**Paul O'B** · Jan 6, 2013 15:24

You can change the header height by adjusting the padding here:

Code:

#logo {
    background: url("images/header-shade.gif") no-repeat scroll right top transparent;
    float: left;
    height: auto;
    margin: 0;
    padding: 30px 0;/* was 60px*/
    width: 580px;
}

The right column is actually 340px wide already but the inner sidebar is 305px and the actual content elements seem to only be 245px. You could place a 300px ad in that right column but it would have to be outside of those round cornered elements. e..g in a list element of its own or indeed outside of #sidebar but within col-340. I don't know if you have that facility within wordpress. If you wanted to increase those round cornered elements then it would be a much harder as they are constructed with images so you would need to make new images etc.

**Mr.81** · Jan 6, 2013 15:48

Originally Posted by Paul O'B

You can change the header height by adjusting the padding here:

Code:

#logo {
    background: url("images/header-shade.gif") no-repeat scroll right top transparent;
    float: left;
    height: auto;
    margin: 0;
    padding: 30px 0;/* was 60px*/
    width: 580px;
}

The right column is actually 340px wide already but the inner sidebar is 305px and the actual content elements seem to only be 245px. You could place a 300px ad in that right column but it would have to be outside of those round cornered elements. e..g in a list element of its own or indeed outside of #sidebar but within col-340. I don't know if you have that facility within wordpress. If you wanted to increase those round cornered elements then it would be a much harder as they are constructed with images so you would need to make new images etc.

Thanks! The padding is fine now

.

Yeah, good point...if I could remove the inner part of the "Sponsors" bar it would fit...if I could get rid of the darker blue and just have the lighter blue, it should fit just fine.

**Mr.81** · Jan 8, 2013 23:41

Does anyone know how I can make the 300px ad overlay the lightblue in the sidebar?

**Paul O'B** · Jan 9, 2013 03:44

Hi,

I assume you are talking about the sponsors section at the top and you could squeeze the element in like this:

Code:

#sidebar .textwidget {
    background: red;/* for testing only */
    height: 200px;/* for testing only*/
    margin: -12px 2px 0;
    width: auto;
}

If you want to see the effect of the above code live then type it into firebug or test with css terminal.

Of course if textwidget is used elsewhere you may need to isolate that element with a new class instead.

**Pullo** · Jan 9, 2013 14:54

Off Topic:

Thanks for the heads up about the css terminal, Paul. I didn't know that tool, but it looks very cool!

**Paul O'B** · Jan 9, 2013 16:30

Originally Posted by Pullo

Off Topic:

Thanks for the heads up about the css terminal, Paul. I didn't know that tool, but it looks very cool!

Yes I use it a lot as its easier than messing with firebug when you want to add rules etc. It's good for debugging sites live without ruining your css files when you do something wrong.

**Mr.81** · Jan 12, 2013 21:05

Originally Posted by Paul O'B

Hi,

I assume you are talking about the sponsors section at the top and you could squeeze the element in like this:

Code:

#sidebar .textwidget {
    background: red;/* for testing only */
    height: 200px;/* for testing only*/
    margin: -12px 2px 0;
    width: auto;
}

If you want to see the effect of the above code live then type it into firebug or test with css terminal.

Of course if textwidget is used elsewhere you may need to isolate that element with a new class instead.

That bookmark is amazing! Thanks!

Yeah, true, I'll use the text widget for other things also...maybe I could get away with using the wider version, though...

Thank you again.

**Mr.81** · Jan 16, 2013 02:15

Anyone know where to edit link colours if they're not located in the style.css file? Thanks in advance.

**ronpat** · Jan 16, 2013 02:29

style.css contains quite a few anchors with colors. You have to identify which link you wish to change and how you want it changed.

**Mr.81** · Jan 16, 2013 02:31

Originally Posted by ronpat

style.css contains quite a few anchors with colors. You have to identify which link you wish to change and how you want it changed.

Thanks for the quick reply! Here's the style.css on the theme "Neuro":

/*
Theme Name: Neuro
Theme URI: http://cyberchimps.com/neuro/
Description: A professional responsive HTML5 blog WordPress theme with drag and drop theme options by CyberChimps WordPress Themes.
Author: CyberChimps WordPress Themes
Author URI: http://cyberchimps.com
Version: 2.0.36
Tags: white, light, silver, gray, pink, two-columns, flexible-width, fixed-width, custom-header, custom-menu, threaded-comments, sticky-post, custom-background, custom-colors, featured-images, full-width-template, post-formats, right-sidebar, translation-ready, theme-options
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

**ronpat** · Jan 16, 2013 02:40

I'm sorry, I have no idea what you are showing me. If you need help with a Wordpress theme, then perhaps the Wordpress forum would be a better place to pose the question. I was looking at your site page at the top of this thread and at it's style.css sheet. If you can point to a link on the HTML page, then we can connect it to the css sheet. Beyond that, I'm lost, I'm afraid. Perhaps someone else will be able to help.

**Mr.81** · Jan 16, 2013 02:48

Originally Posted by ronpat

I'm sorry, I have no idea what you are showing me. If you need help with a Wordpress theme, then perhaps the Wordpress forum would be a better place to pose the question. I was looking at your site page at the top of this thread and at it's style.css sheet. If you can point to a link on the HTML page, then we can connect it to the css sheet. Beyond that, I'm lost, I'm afraid. Perhaps someone else will be able to help.

Apologies - it's for the site freshhoops.com.

**Pullo** · Jan 16, 2013 08:04

Originally Posted by Mr.81

Anyone know where to edit link colours if they're not located in the style.css file? Thanks in advance.

Hi,

The way to find out where styles for elements are being defined is as follows:

Take a modern browser (e.g. Chrome), right click on a link and select "inspect element".
This will show you which styles are being applied to the element in question.

For example if I do this on the <h3> title of your page (which says "VIDEO: Kobe Bryant goes up for the three, then dumps it to Dwight Howard for the huge alley-oop slam"), then I see:

Code:

styles.css:894
media="all"
.posts_title a {
  text-decoration: none;
  font-weight: 600;
  color: #222;
  font-size: 24px;
}

styles.css:894
media="all"
a {
  outline: none;
}

which tells me exactly where to look if I want to change something.

Failing this, just let us know which links you are talking about and I'm sure we'll be able to help.

**Mr.81** · Feb 1, 2013 19:21

Originally Posted by Pullo

Hi,

The way to find out where styles for elements are being defined is as follows:

Take a modern browser (e.g. Chrome), right click on a link and select "inspect element".
This will show you which styles are being applied to the element in question.

For example if I do this on the <h3> title of your page (which says "VIDEO: Kobe Bryant goes up for the three, then dumps it to Dwight Howard for the huge alley-oop slam"), then I see:

Code:

styles.css:894
media="all"
.posts_title a {
  text-decoration: none;
  font-weight: 600;
  color: #222;
  font-size: 24px;
}

styles.css:894
media="all"
a {
  outline: none;
}

which tells me exactly where to look if I want to change something.

Failing this, just let us know which links you are talking about and I'm sure we'll be able to help.

Thanks for the reply, however, the style.css only has this in it:

/*
Theme Name: Neuro
Theme URI: http://cyberchimps.com/neuro/
Description: A professional responsive HTML5 blog WordPress theme with drag and drop theme options by CyberChimps WordPress Themes.
Author: CyberChimps WordPress Themes
Author URI: http://cyberchimps.com
Version: 2.0.36
Tags: white, light, silver, gray, pink, two-columns, flexible-width, fixed-width, custom-header, custom-menu, threaded-comments, sticky-post, custom-background, custom-colors, featured-images, full-width-template, post-formats, right-sidebar, translation-ready, theme-options
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Normally everything's located there...not sure where it is in this case. Any ideas? Thanks!

**Paul O'B** · Feb 2, 2013 04:44

Originally Posted by Mr.81

Thanks for the reply, however, the style.css only has this in it:

Normally everything's located there...not sure where it is in this case. Any ideas? Thanks!

If you are talking about this page then style.css has all these rules:

Code:

/*
Theme Name: Magazeen
Theme URI: http://smashingmagazine.com/
Description: A bold magazine theme from <a href="http://wefunction.com">Function</a> &amp; <a href="http://smashingmagazine.com">Smashing Magazine</a>.
Version: 1.0
Author: Spencer
Author URI: http://wefunction.com/
Tags: magazine, light, link, blue, two column, widgets, jquery

	The CSS, XHTML is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

/* TABLE OF CONTENTS

00 - Global Elements - Standard Elements
01 - Typography - All Type throughout the site
02 - Main Structure - Columns, clearfix, etc.
03 - Header - Header, Logo, navigation, search.
04 - Dock - jQuery latest articles.
05 - Main Content - Post boxes, post meta, etc.
06 - Sidebar - Custom sidebar widgets.
07 - Footer - Categories, About, Copyright, Sponsors.

/* ----------------------------------------------*/

/* 00 - GLOBAL ELEMENTS
/* ----------------------------------------------*/

body {
	margin:0; padding:0;
	width:auto; height:auto;
	background:#e0edf3;
	font:0.75em Arial, Helvetica, sans-serif; color:#5e6568;
	line-height:19px;
}

code {
	margin:0; padding:0;
	width:80%; height:auto;
	font:1.17em Georgia, "Times New Roman", Times, serif; color:#0f8eb3;
}

	pre {
		margin:0 auto; padding:5px 20px;
		background:#f4f1ec url(images/code.gif) repeat;
		border:1px solid #bbced7;
		font:0.92em Georgia, "Times New Roman", Times, serif; color:#3e3e3e;
		line-height:200%;
	}

blockquote {
	margin:0 auto; padding:5px 20px;
	width:80%; height:auto;
	background:#f8fbfc url(images/blockquote.gif) no-repeat top left; border:1px solid #edeff0;
}

img {
	margin:0; padding:0;
	border:0;
}

ins {
	color:#009999;
}

del {
	color:#990000;
}

/* 01 - TYPOGRAPHY
/* ----------------------------------------------*/

h1 {
	margin:-10px 0 0 0; padding:0;
	font:bold 3.53em Verdana, Arial, Helvetica, sans-serif; color:#fefefe;
	position:relative; display:block;
}

	.post-content h1, .page-content h1 {
		margin:10px 0; padding:0;
		font:bold 2.50em Arial, Helvetica, sans-serif; color:#53798b;
	}

	h1 a:link, h1 a:active, h1 a:visited {
		color:#fefefe;
		outline:0;
	}
	
	h1 a:hover {
		color:#d7d7d7;
	}

	h1 span {
		margin:10px 0 0 0;
		background:url(images/gradient.png) repeat-x;
		width:100%; height:20px;
		position:absolute; display:block;
	}

h2 {
	margin:0; padding:0;
	font:0.83em Verdana, Arial, Helvetica, sans-serif; color:#b9b9b9;
}

	.post-content h2, .page-content h2 {
		margin:10px 0; padding:0;
		font:bold 2.00em Arial, Helvetica, sans-serif; color:#53798b;
	}

h3 {
	margin:0; padding:0;
	font:bold 2.80em Arial, Helvetica, sans-serif; color:#30393d;
}

	.post-content h3, .page-content h3 {
		margin:10px 0; padding:0;
		font:bold 1.50em Arial, Helvetica, sans-serif; color:#53798b;
	}

	h3 a:link, h3 a:active, h3 a:visited {
		color:#30393d;
	}
	
	h3 a:hover {
		color:#54798b;
	}
	
	h3.post-title, .single h3.post-title, h3.post-title-small {
		margin:0; padding:10px 0;
		width:380px; height:auto;
		border-bottom:4px solid #30393d;
	}
	
		.single h3.post-title {
			font-size:2.00em;
			width:275px;
		}
		
		h3.post-title-small {
			font-size:1.50em;
		}

h4 {
	margin:0; padding:0;
	font:bold 1.75em Arial, Helvetica, sans-serif; color:#fefefe;
}

	.post-content h4, .page-content h4 {
		margin:10px 0; padding:0;
		font:bold 1.17em Georgia, "Times New Roman", Times, serif; color:#53798b;
	}

	#footer h4 {
		margin:0 0 20px 0;
	}

h5, #searchform label {
	/* Sidebar Header */
	margin:0; padding:28px 0 0 20px;
	width:285px; height:55px;
	background:#f5fbfe url(images/sidebar-top.gif) no-repeat top center;
	font:bold 2.25em Arial, Helvetica, sans-serif; color:#587682;
}

	.post-content h5, .page-content h5 {
		margin:10px 0; padding:0;
		width:auto; height:auto;
		background:none;
		font:bold 1.00em Georgia, "Times New Roman", Times, serif; color:#53798b;
	}

	#tag_cloud h5, #searchform label {
		margin:0; padding:0;
		background:none;
	}

a:link, a:active {
	color:#f23183;
	text-decoration:none;
}

a:hover {
	color:#000;
}

a:visited {
	color:#f05898;
	text-decoration:none;
}

/* Header
/* -------------- */

#navigation ul li a:link, #navigation ul li a:active, #navigation ul li a:visited {
	margin:0; padding:13px 15px;
	font:bold 1.08em Arial, Helvetica, sans-serif; color:#34393e;
	display:block;
}

#navigation ul li a:hover {
	color:#000;
	font-weight:bold; text-decoration:underline;
}

#navigation ul.pages li.current_page_item a:link, #navigation ul.pages li.current_page_item a:active, #navigation ul.pages li.current_page_item a:visited {
	/* Crazy margins to pull up the hover image above the borders.*/
	margin:-3px 0 0 0; padding:15px 15px 14px 15px;
	background:#171615 url(images/navigation-hover.gif) repeat-x bottom center;
	color:#f1f8ff; position:relative
}

a.rss:link, a.rss:active, a.rss:visited, a.rss:hover {
	margin:13px 15px 0 0; padding:0;
	width:16px; height:17px;
	background:url(images/rss.png) no-repeat top center;
	text-indent:-9999px; display:block; outline:0;
}

/* Main Content
/* -------------- */

.post-info {
	text-align:right;
	font:0.92em Georgia, "Times New Roman", Times, serif; color:#81888d;
}

	.post-info span {
		font-size:1.18em;
		display:block;
	}

		.post-info span a:link, .post-info span a:active, .post-info span a:visited {
			color:#1e1c1a;
			text-decoration:none;
		}
		
		.post-info span a:hover {
			color:#f23183;
		}
	
.comment-count a:link, .comment-count a:active, .comment-count a:visited {
	margin:0; padding:10px 20px;
	font:bold 1.75em Arial, Helvetica, sans-serif; color:#FFF;
	display:block;
}

.comment-count a:hover {
	background:#ea2f7e;
}

	.single .comment-count a:link, .single .comment-count a:active, .single .comment-count a:visited,
	.page-content .comment-count a:link, .page-content .comment-count a:active, .page-content .comment-count a:visited {
		padding:8px 18px;
		font:bold 1.45em Arial, Helvetica, sans-serif;
	}

.post-intro strong {
	font:bold 1.33em Arial, Helvetica, sans-serif; color:#30393d;
	line-height:21px;
}

.continue-reading a:link, .continue-reading a:active, .continue-reading a:visited,
.cat-posts li.view-more a:link, .cat-posts li.view-more a:active, .cat-posts li.view-more a:visited {
	font:bold italic 1.17em Georgia, "Times New Roman", Times, serif; color:#bd4478;
}

.continue-reading a:hover,
.cat-posts li.view-more a:hover {
	color:#f2307f;
}

/* Drop Down
/* -------------- */

.category a:link, .category a:visited,
.category-inside a:link, .category-inside a:active, .category-inside a:visited {
	margin-bottom:-1px; padding:15px 25px 0 15px;
	display:inline-block;
	height:25px; outline:0;
	font:1.00em Georgia, "Times New Roman", Times, serif; color:#7f7d7e;
}

.active div {
	margin:0 0 -1px 0; padding:0 0 0 6px;
	width:auto; height:40px;
	background:url(images/cat-hover-left.gif) no-repeat top left;
	float:right; display:block; position:relative; z-index:10;
}

	.active a:link, .active a:visited {
		margin:0; padding:15px 25px 0 15px;
		width:auto; height:25px; display:inline-block;
		font:1.00em Georgia, "Times New Roman", Times, serif; color:#5c5659;
		background:url(images/cat-hover-right.gif) no-repeat top right;
	}
	
.cat-posts li.view-more {
	margin:0; padding-top:15px;
	text-align:right;
}

.cat-posts li a:link, .cat-posts li a:active, .cat-posts li a:visited {
	font:bold 1.17em Arial, Helvetica, sans-serif; color:#30393d;
	display:block;
}
						
.cat-posts li a:hover {
	color:#bd4478;
}
												
	.cat-posts li span {
		font:0.92em Arial, Helvetica, sans-serif; color:#889194;
	}
	
/* Content Navigation
/* -------------- */

.navigation {
	font:normal 0.92em Georgia, "Times New Roman", Times, serif; color:#81888d;
}

	.navigation a:link, .navigation a:visited, .navigation a:active {
		font:bold 0.92em Georgia, "Times New Roman", Times, serif; color:#656c71;
	}
	
	.navigation a:hover {
		color:#35383a;
	}
	
/* Comments
/* -------------- */	

.submit-comment {
	margin:0 0 15px 0; padding:0;
	width:127px; height:27px;
	background:url(images/submit-comment.gif) no-repeat top center;
	display:block; outline:0; text-indent:-9999px;
	border:0;
}

.author {
	font:1.50em Arial, Helvetica, sans-serif; color:#3c4d54;
}

	.author a:link, .author a:active, .author a:visited {
		color:#3c4d54;
	}
	
	.author strong span, .author strong span a:link, .author strong span a:active, .author strong span a:visited {
		color:#6b8894;
		display:inline;
	}
	
.author span {
	font:0.61em Georgia, "Times New Roman", Times, serif; color:#a3aeb2;
	display:block;
}

.comment-text {
	font:1.00em Arial, Helvetica, sans-serif; color:#74868d;
	line-height:19px;
}
	
/* Sidebar
/* -------------- */

#sidebar li {
	font:0.92em Arial, Helvetica, sans-serif;
}

	#sidebar li a:link, #sidebar li a:visited, #sidebar li a:active {
		font:bold 1.17em Arial, Helvetica, sans-serif; color:#5a656a;
	}
	
	#sidebar li a:hover {
		text-decoration:none;
	}
	
#sidebar .rss-date {
	margin:5px 0; padding:0;
	color:#709cb0;	
	display:block;
}

#sidebar .rssSummary {
	margin:5px 0; padding:0;
}

#sidebar li a.sidebar-read-more:link, #sidebar li a.sidebar-read-more:visited, #sidebar li a.sidebar-read-more:active,
#sidebar li a.sidebar-read-more-rss:link, #sidebar li a.sidebar-read-more-rss:visited, #sidebar li a.sidebar-read-more-rss:active {
	margin:18px 0 0 25px; padding:0;
	font:bold 1.17em Arial, Helvetica, sans-serif; color:#a6b5bc;
	position:absolute;
}

	#sidebar li a.sidebar-read-more-rss:link, #sidebar li a.sidebar-read-more-rss:visited, #sidebar li a.sidebar-read-more-rss:active {
		padding:1px 0 0 23px;
		line-height:16px;
		background:url(images/rss.png) no-repeat center left;
	}

#sidebar li a.sidebar-read-more:hover,
#sidebar li a.sidebar-read-more-rss:hover {
	color:#889297; text-decoration:none;
}

#featured-news .sidebar-content a:link, #featured-news .sidebar-content a:active, #featured-news .sidebar-content a:visited,
#recent-news .sidebar-content a:link, #recent-news .sidebar-content a:active, #recent-news .sidebar-content a:visited {
	font:bold 1.35em Arial, Helvetica, sans-serif; color:#5a656a;
}

#featured-news .sidebar-content a:hover, #recent-news .sidebar-content a:hover {
	color:#475054;
}

	#featured-news .sidebar-content span a:link, #featured-news .sidebar-content span a:visited, #featured-news .sidebar-content span a:active,
	#recent-news .sidebar-content span a:link, #recent-news .sidebar-content span a:visited, #recent-news .sidebar-content span a:active {
		margin:5px 0 0 0; padding:0;
		font:normal 1.00em Arial, Helvetica, sans-serif; color:#709cb0;
		display:block;
	}
	
	#featured-news .sidebar-content span a:hover,
	#recent-news .sidebar-content span a:hover {
		color:#5e8293;
	}
	
#sponsored-ad p.sponsored-ad {
	margin:auto auto 8px 5px;
	font:0.92em Arial, Helvetica, sans-serif; color:#9caab1;
}

/* Footer
/* -------------- */
	
p.about-text {
	margin:0 0 10px 0;
	font:0.92em Arial, Helvetica, sans-serif; color:#b2b2b2;
	line-height:17px;
}

p.copyright {
	margin:10px 0 0 0;
	font:0.92em Arial, Helvetica, sans-serif; color:#404040;
}

/* Misc
/* -------------- */

.arial, .arial a {
	font-family:Arial, Helvetica, sans-serif;
}

/* 02 - MAIN STRUCTURE
/* ----------------------------------------------*/

.container {
	/* The container is a class simply because of the multiple full-span elements.*/
	margin:0 auto; padding:0;
	width:940px; height:auto;
}

/* Various Columns
/* -------------- */

.col-580 {
	width:580px;
}

.col-340 {
	width:340px;
}

.left, .alignleft {
	float:left;
}

.right, .alignright {
	float:right;
}

.aligncenter {
	margin:0 auto;
	display:block;
}

/* Clearfix
/* -------------- */

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

/* 03 - HEADER
/* ----------------------------------------------*/

#header {
	margin:0; padding:0;
	width:auto; height:auto;
	background:#171615 url(images/header.gif) repeat-x top center;
	border-bottom:1px solid #4a4d4c;
}

	#logo {
		margin:0; padding:15px 0;
		width:580px; height:auto;
		background:url(images/header-shade.gif) no-repeat top right;
		float:left;
	}
	
	#searchform-header {
		margin:78px 20px 0 0; padding:0;
		width:284px; height:auto;
		background:url(images/searchform-back.gif) no-repeat center left;
		float:right;
	}
	
		#searchform-header #s {
			margin:0 0 0 0; padding:6px 10px 5px 25px;
			width:165px; height:auto;
			border:0;
			background:none;
			float:left;
			font-size:0.92em; color:#aea592;
		}
		
		#searchform-header #go {
			float:right;
			margin:0;
		}
	
#navigation {
	margin:0; padding:0;
	background:#FFF url(images/navigation.gif) repeat-x bottom center;
	border-top:2px solid #393b3b; border-bottom:1px solid #FFF;
}

	#navigation ul.pages {
		margin:0 auto; padding:0;
		width:880px; height:auto;
		list-style:none; float:left;
	}
	
		#navigation ul li {
			margin:0 3px; padding:0;
			float:left; overflow:visible;
		}
		
	.rss {
		margin:0 30px 0 0; padding:0;
		width:16px; height:17px;
		float:right;
	}
	
/* 04 - DOCK
/* ----------------------------------------------*/
	
#latest-dock {
	margin:0; padding:0;
	background:#f4f6f8 url(images/dock.gif) repeat-x bottom center;
	border-bottom:1px solid #fbf9fa;
}

	.dock-back {
		padding:20px 0;
		background:url(images/dock-back.gif) no-repeat bottom center;
	}
	
		#dock {
			margin:0 auto; padding:0;
			width:940px;
			list-style:none;
			position:relative;
			text-align:center;
		}
		
			#dock li {
				margin:0; padding:0 0 18px 0;
				display:inline;
			}
			
				#dock li.dock-active {
					background:url(images/dock-shadow.png) no-repeat bottom center;
				}
			
				#dock li a:link, #dock li a:active, #dock li a:visited {
					margin:30px 7px 0 7px; padding:2px 0 0 0;
					width:75px; height:58px;
					background:url(images/dock-preview-back.png) no-repeat top center;
					display:inline-block;
				}
					
				#dock li span {
					margin:0; padding:0;
					width:980px; height:auto;
					position:absolute;
					display:none;
					top:0; left:0;
					text-align:center;
					font:bold 1.17em Arial, Helvetica, sans-serif; color:#31393d;
				}
				
				.latest {
					width:980px; text-align:center;
					font:bold 1.17em Arial, Helvetica, sans-serif; color:#31393d;
					position:absolute;
				}
		
/* 05 - MAIN CONTENT
/* ----------------------------------------------*/

#main-content {
	padding:20px 0;
	background:url(images/main-content.gif) no-repeat top center;
	border-top:1px solid #c6dee7;
	border-bottom:10px solid #d0dce2;
}

.post {
	margin:0 0 25px 0;
}

/* Archive Post
/* --------------- */

.archive {
	margin:0;
}
	
	.archive .post-meta {
		margin:0 0 17px 0;
	}
	
	.archive .post-info {
		font-style:italic;
	}
	
/* Small (Half) Post
/* --------------- */

.single {
	margin:0 15px 20px 0;
	width:275px; height:auto;
	float:left;
}

	.single .post-content {
		margin:0; padding:22px 17px 11px;
	}
	
	.single .post-image {
		height:115px;
	}
	
	.single .post-footer {
		padding:16px 23px;
	}
	
	.last {
		margin:0;
	}

/* Post Box
/* --------------- */
	
.post-box {
	margin:0; padding:0;
	background:#fdfefe url(images/post-box-top.gif) repeat-x top center;
	border:1px solid #dce7ed;
	border-bottom:1px solid #cfdbe1; border-top:0;
}

	.post-meta {
		margin:0 0 23px 0; padding:0;
		border-bottom:1px solid #FFF;
		position:relative;
	}
		
		.post-info {
			margin:0; padding:10px 5px;
			width:190px; height:auto;
			border-bottom:4px solid #889398;
			bottom:0; right:0;
			position:absolute;
		}

	.post-content, .page-content, .comment-content {
		margin:0; padding:22px 22px 11px;
		border:1px solid #FFF;
		border-bottom:1px solid #e8ebec;
		position:relative;
	}
	
		.page-content {
			padding:15px 22px 0;
		}
		
		.comment-count {
			margin:0; padding:0;
			width:auto; height:auto;
			background:#f23183;
			position:absolute; display:block;
			top:-10px; left:-10px;
		}
			.page-content .comment-count {
				margin-top:-15px;
			}
				
		.post-image, .post-image-inner {
			margin:0 auto 10px auto; padding:0;
			width:auto; height:auto;
			display:block;
		}
		
			.post-image-inner {
				margin:0 auto 10px 15px;
				float:right;
			}
		
			.post-image img, .post-image-inner img {
				margin:0 auto; padding:3px;
				border-left:1px solid #e8e8e8; border-right:1px solid #e8e8e8;
				border-bottom:1px solid #e7e8e8;
				text-align:center; display:block;
			}
			
	/* Post Footer
	/* --------------- */		
			
	.post-footer {
		margin:0; padding:23px;
		background:#fcfdfe;
		border-top:1px solid #FFF;
		position:relative; z-index:100;
	}
	
		.continue-reading {
			margin:0; padding:0;
			width:180px; height:auto;
			float:left;
		}
		
		.category-menu {
			margin:0; padding:0;
			width:350px; height:auto;
			float:right; text-align:right;
			position:absolute; top:10px; right:10px;
		}
		
			.indicator, .indicator-active {
				margin:0; padding:0;
				width:7px; height:5px;
				background:url(images/expand.gif) no-repeat center left;
				display:inline-block; vertical-align:middle;
			}
			
				.indicator-active {
					background:url(images/collapse.gif) no-repeat center left;
				}
		
			.dropdown {
				margin:0; padding:0;
				width:360px; height:auto;
				background:url(images/dropdown.png) no-repeat bottom center;
				text-align:left;
				display:none;
				position:relative;
			}
			
				.cat-posts {
					margin:0 auto; padding:10px 0 19px 0;
					width:322px; height:auto;
					list-style:none;
					border-top:1px solid #ebecec;
				}
				
					.cat-posts li {
						margin:0; padding:10px 15px;
						background:url(images/cat-post-li.gif) no-repeat bottom right;
					}
					
						.cat-posts li.view-more {
							background:none;
						}

/* Content Navigation
/* --------------- */	
						
.navigation {
	margin:0; padding:8px 10px;
	background:#dce8ee url(images/box-highlight.gif) repeat-x bottom center;
	border:1px solid #ebf2f5;
	border-bottom:1px solid #d4e0e6;
}

/* WP Attachments
/* --------------- */

.wp-caption {
	margin:0 10px; padding:9px 5px 5px;
	background:#FFF;
	border:1px solid #ebf2f5;
	border-bottom:1px solid #CCCCCC;;
	text-align:center;
}

	.wp-caption-text {
		margin:5px auto auto auto; padding:5px 0 0;
		font:0.92em Arial, Helvetica, sans-serif; color:#656c71;
	}
	
/* Inputs
/* --------------- */

.input {
	margin:0; padding:5px;
	background:#fdfefe url(images/post-box-top.gif) repeat-x top center;
	border:1px solid #dce7ed;
	font:0.92em Arial, Helvetica, sans-serif; color:#76716c;
}

	
/* Comments
/* --------------- */

.comment-content {
	padding:0;
	background:#f3f8fa;
	border-bottom:0;
}

.commentlist, .commentlist ul {
	margin:15px 0 0 0; padding:0;
	list-style:none;
}

	.commentlist li {
		margin:0; padding:30px;	
		background:url(images/white.gif) repeat-x bottom center;
		border-bottom:1px solid #d9e1e6;
	}
	
	.commentlist li.alt, .thread-alt {
		background:#f9fcfd url(images/white.gif) repeat-x bottom center;
	}
	
	.commentlist li.no-comments {
		margin:55px 0 0 0; padding:0 30px;
		background:none;
		border:0;
	}
	
	.commentlist .children {
		margin:10px 0 0 0; padding:0;
		border:1px solid #d9e1e6;
	}
	
		.commentlist .children li {
			margin:0; padding:20px;
			border-bottom:1px solid #FFF;
		}
	
	
		.commentlist li .comment-wrap {
			position:relative;
			text-align:left;
		}
	
			.commentlist li .comment-text {
				margin:0; padding:0;
				width:auto; height:auto;
				background:none;
			}
			
			.commentlist li .comment-author {
				margin:0; padding:0;
				width:auto; height:auto;
			}
			
				.gravatar {
					margin:0 10px 0 0; padding:1px 0 0 2px;
					width:41px; height:40px;
					background:url(images/gravatar.gif) no-repeat top center;
					float:left;
				}
				
				.author {
					margin:2px 0 0 0; padding:0;
					width:auto; height:auto;
					float:left;
				}

/* 06 - SIDEBAR
/* ----------------------------------------------*/

#sidebar {
	margin:0 0 0 15px; padding:0;
	width:305px; height:auto;
	list-style:none;
}

	#sidebar li {
		margin:0 0 20px 0; padding:0 0 56px 0;
		width:auto; height:auto;
		background:#f5fbfe url(images/sidebar-bottom.gif) no-repeat bottom center;
	}
	
		#sidebar #tag_cloud, #sidebar #search {
			padding:0;
			background:none;
		}
		
			#searchform {
				margin:0 auto; padding:0;
			}
			
	#sidebar #sponsored-ad {
		background:none;
	}
	
		#sidebar li ul, #sidebar .textwidget, #calendar_wrap {
			margin:0 auto; padding:0;
			width:245px; height:auto;
			list-style:none;
			background:#ebf6fb;
			overflow:hidden;
		}		
		
			#calendar_wrap {
				margin:0 auto;
				width:190px;		
			}
		
				#wp-calendar {
					margin:15px 0; padding:0;
					width:100%; height:auto;
				}
				
					#wp-calendar caption {
						font:bold 1.17em Arial, Helvetica, sans-serif; color:#5a656a;
					}
					
					#wp-calendar thead tr th {
						font-weight:bold;
					}
					
					#wp-calendar td {
						font:0.92em Arial, Helvetica, sans-serif; color:#709cb0;
						border:1px solid #d2dce0; text-align:center;
					}
					
						#wp-calendar tfoot td {
							border:0;
						}
		
		#sidebar .textwidget {
			margin:0 auto 15px auto;
		}
		
			#sidebar li ul li  {
				margin:0 0 15px 0; padding:0;
				width:auto; height:auto;
				background:none;
			}
			
				.sidebar-preview {
					margin:0; padding:3px 0 0 4px;
					width:114px; height:65px;
					background:#FFF url(images/sidebar-preview-back.gif) no-repeat top center;
					float:left;
				}
				
				.sidebar-content {
					margin:0; padding:0;
					width:115px; height:auto;
					float:right;
				}
						
/* 07 - FOOTER
/* ----------------------------------------------*/

#footer {
	margin:0; padding:30px 0;
	width:auto; height:auto;
	background:#171615 url(images/footer-stroke.gif) repeat-x top center;
	border-top:1px solid #171615; border-bottom:1px solid #1e1d1d;
}

	.footer-divider {
		background:url(images/footer-divider.gif) repeat-y top left;
	}

	#footer .categories {
		margin:0; padding:0;
		width:360px; height:auto;
		float:left;
	}
	
		.footer-cat {
			margin:0; padding:0;
			width:360px; height:auto;
			list-style:none;
		}
		
			.footer-cat li {
				margin:5px 0; padding:0 0 0 9px;
				width:150px; height:auto;
				float:left;
				background:url(images/footer-cat-left.gif) no-repeat top left;
			}
			
				.footer-cat li a {
					margin:0; padding:0 9px 0 0;
					width:auto; height:23px; line-height:23px;
					float:left; display:block;
					background:url(images/footer-cat-right.gif) no-repeat top right;
				}
				
				.footer-cat li a:link, .footer-cat li a:active, .footer-cat li a:visited {
					font-family:Georgia, "Times New Roman", Times, serif; color:#a7a7a7;
				}
				
				.footer-cat li a:link span, .footer-cat li a:active span, .footer-cat li a:visited span {
					color:#FF00FF;
				}
				
			.footer-cat li:hover, .footer-cat li:hover a {
	  			background-position:0% -23px;
			 	color:#171615;
				cursor:pointer;
			 }
			
			.footer-cat li:hover a {
				background-position:100% -23px;
  			}
	
	#footer .about {
		margin:0; padding:0;
		width:580px; height:auto;
		float:right;
	}
	
#link-back {
	margin:0; padding:15px 0;
	background:#0c0b0b;
}

	.donators {
		margin:0; padding:0;
		width:282px; height:auto;
		float:left;
	}

		a.smashing:link, a.smashing:active, a.smashing:visited, a.smashing:hover,
		a.function:link, a.function:active, a.function:visited, a.function:hover {
			margin:0; padding:0;
			width:154px; height:54px;
			background:url(images/smashing.gif) no-repeat top center;
			display:block; text-indent:-9999px; float:left; outline:0;
		}
		
		a.function:link, a.function:active, a.function:visited, a.function:hover {
			width:128px;
			background:url(images/function.gif) no-repeat top center;
		}

		
/* Last Update 2.7.09 */


#logo h1 a {
    background: url("images/SMALLnewtrueshowbizlogosmaller.png") no-repeat  0 0;
    display: block;
    height: 120px;
    text-indent: -9999px;
    width: 320px;
}

#sidebar .textwidget {
    background:;/* for testing only */
    height: 250px;/* for testing only*/
    margin: -12px 2px 0;
    width: auto;
}

Just use Edit.css from the webdeveloper toolbar in Firefox to get the whole file easily.

**Mr.81** · Feb 4, 2013 18:50

I'm back again -_- ha, it seems there's a "strikethrough" on the element stopping the link colour coming through...if I inspect a linked element, the "color" has a strikethrough through it...if I tick the box next to it, it shows the colors. What's restricting the colors being shown?

**Pullo** · Feb 5, 2013 01:17

Originally Posted by Mr.81

I'm back again -_- ha, it seems there's a "strikethrough" on the element stopping the link colour coming through...if I inspect a linked element, the "color" has a strikethrough through it...if I tick the box next to it, it shows the colors. What's restricting the colors being shown?

Hi there,

This happens when a more specific CSS style overrides a more generic one.
For example If you have this:

HTML Code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Specificity example</title>
    <style>
      a{color: green;}
      a.warning{color:yellow}
    </style>
  </head>
  
  <body>
    <a href ="">A Link</a>
    <a class="warning" href="">A second Link</a>
  </body>
</html>

This will output two <a> tags on a page.
The first will be green, but the second will be yellow (the reason being that we defined a warning class and applied it to our second link).
If you inspect the second link with a property inspector, then you will see:

a.warning {
color: yellow;
}

a {
~~color: green;~~
}

This is because for link two, the browser picks up on the first style.
Then the first style is immediately overridden by the second style.

Does that help?

**Mr.81** · Mar 3, 2013 18:43

Thank you for your reply.

Ah, so I need to basically get rid of the overriding style, which is the black?

**Paul O'B** · Feb 5, 2013 06:36

Hi,

When I look at the page the color:#555 is being implemented from line 3 of black.css.

Note that you also have some styles in the head of the page in style tags so you need to watch out for those also but they don;t seem to be interfering with the main link colour that I can see.

**Paul O'B** · Mar 4, 2013 03:03

Either get rid of it if you have access to the files or over-ride it with a more specific style somewhere else.

e.g.

Code:

body a{color:orange}/* set the color here */

User Tag List

Thread: Changing header and sidebar width on Wordpress?

Thread Tools

Display

Hybrid View

Changing header and sidebar width on Wordpress?

Bookmarks

Bookmarks

Posting Permissions