Movable Type Community Forum > Body: Background Color: Change?

Full Version: Body: Background Color: Change?

Movable Type Community Forum > Using Movable Type > Default Stylesheets

NJC

Aug 18 2006, 06:09 PM

How do I change the background color of my post entry body from white, as it is now, to silver or gray.
I have tried changing different lines of code, but nothing seems to work.

Here is my code:

CODE

/* basic page elements */

body
{
	font-family: 'trebuchet ms', times, serif;
	font-size: 11px;
	background-color: #e2e2e2;
}

a { color: #06C; text-decoration: none; }
a:visited { color: #369; }
a:hover { color: #900; }

#banner a {color: #bcaace;	text-decoration: none;}
#banner a:visited {color: Yellow;}
#banner a:hover {	color: Maroon; }

.module-content a { color: #96c; font-weight: bold; }
.module-content a:visited { color: #bcaace; }
.module-content a:hover { color: #9c0; }

h1, h2, h3, h4, h5, h6
{
	font-family: "Trebuchet MS";
}

.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header
{
	/* ie win (5, 5.5, 6) bugfix */
	p\osition: relative; 
	width: 100%;
	w\idth: auto;
	
	margin: 0 0 1px 0;
	padding: 5px 5px 5px 25px;
	color: #fff;
	background: #799de7 url(colitem-header-bg.gif) 0 50% repeat;
	font-size: 12px;
	font-weight: bold;
	text-transform: none;
	line-height: 1;
}

.module-header a,
.module-header a:visited,
.trackbacks-header a,
.trackbacks-header a:visited,
.comments-header a,
.comments-header a:visited,
.comments-open-header a,
.comments-open-header a:visited
.archive-header a,
.archive-header a:visited
{
	color: #fff;
}

.module-header a:hover,
.trackbacks-header a:hover,
.comments-header a:hover,
.comments-open-header a:hover,
.archive-header a: hover
{
	color: #369;
}

.module-content 
a {color: #369; font-weight: lighter;}
.module-content a:visited { color: #6e849a; }
.module-content a:hover { color: #900; }

.entry-more-link,
.entry-footer,
.comment-footer,
.trackback-footer,
.typelist-thumbnailed
{
	font-size: 10px;
}


/* page layout */

body
{
	min-width: 780px;
	color: #333;
	background: #e1e0e0 url(body-bg.gif) repeat; <-- THIS IS YOUR PROBLEM
	background-color: #e2e2e2;
}

#container
{
	width: 780px;
	background: transparent url(container-bg.gif) repeat-y;
	background-color: #e2e2e2;
}

#container-inner
{
	margin: 0 10px 0 10px;
	border-bottom: 1px solid #4A87B9;
	background: transparent url(column-right-bg.gif) -500px 0 repeat-y;
	background-color: #e2e2e2
}

#banner
{
	width: 760px; /* necessary for ie win */
	border-bottom: 1px solid #000;
	background: #369 url(banner-bg.gif) repeat;
	
}

#banner-inner { padding: 20px; }

.banner-user
{
	width: 70px;
	margin-top: 4px;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
}

.banner-user-photo { border: 3px double #fff; }

#banner-header
{
	margin: 20;
	font-size: 60px;
	font-family: Architext;	
	font-weight: bold;
	line-height: 1;
	text-align: center;
}

#banner-description
{
	margin: 1px 0;
	color: #fff;
	background: none;
	font-size: 14px;		
	line-height: 1.125;
	text-align: center;
}

#alpha { margin: 20px 0 20px 20px; width: 260px; }
#beta { margin: 20px 0 0 40px; width: 420px; }
#gamma, #delta { width: 202px; }

.date-header
{
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	color: Maroon;
	background: transparent url(date-header-bg.gif) repeat-x;
	font-size: 11px;
	background: #CCCCCC;
}

.entry-header
{
	margin: 10px 0;
	padding: 0 0 0 20px;
	color: #005A5B;
	background: transparent url(entry-header-bg.gif) 0 0.2em no-repeat;
	font-size: 16px;
	font-weight: lighter;
	font: Book Antiqua;

}

.entry-content { margin: 0; }
.entry-footer
{
	margin: 0 0 20px 0;
	border-top: 1px solid Black;
	padding-top: 2px;
	font-weight: normal;
	background: ThreedFace;
	border-bottom: 1px solid Black;
	
}

.content-nav { padding-top: 0; }


/* modules */

.module-calendar .module-content { margin: 5px 0 15px 0; }

.module-mmt-calendar .module-content table,
.module-calendar .module-content table { font-size: 11px; }

.module-calendar .module-content table th { font-size: 10px; }

.module-mmt-calendar .module-header a { color: #900; }
.module-mmt-calendar .module-header a:visited { color: #900; }
.module-mmt-calendar .module-header a:hover { color: #069; }

.module-powered { margin: 20px 0; }
.module-powered .module-content
{
	margin: 0;
	font-size: smaller;
	padding: 10px;
	border: 1px solid #ccc;
	color: #333;
	background: #dcd8d8 url(powered-bg.gif) repeat-x;
}

.module-powered a { color: #369; }
.module-powered a:visited { color: #369; }
.module-powered a:hover { color: #900; }

.module-photo { background: none; }
.module-photo img { border: solid 1px #dce1e4; }

.module-list-item
{

	padding-left: 14px;
	background: url(li-bg.gif) 0 0.3em no-repeat;
	line-height: 150%;
}

.typelist-thumbnailed .module-list
{
	margin: 0;
}

.typelist-thumbnailed .module-list-item
{
	margin: 0 0 1px 0;
	padding: 0;
	border: 1px solid #d9dee1;
	background: #e5e5e5 url(typelist-thumbnailed-bg.gif) repeat-x;
}

.typelist-thumbnail { background: #fff; }

.module-featured-photo img
{
	width: 414px;
}


/* recent photos */

.module-recent-photos .module-content { margin: 6px 0 0 0; }

.module-recent-photos .module-list { margin: 0; }

.module-recent-photos .module-list-item
{
	width: 64px; /* mac ie fix */
	margin: 0 6px 6px 0;
	padding: 0;
	background: none;
}

.module-recent-photos .module-list-item a
{
	border: 1px solid #369;
	padding: 1px;
	background: #fff;
}

.module-recent-photos .module-list-item a:hover
{
	border-color: #900;
}


/* artistic tweaks */


/* calendar tweaks */
	
	.layout-calendar #beta { overflow: visible; }
	
	.module-mmt-calendar { width: 420px; }
		
	.module-mmt-calendar .module-header
	{
		margin: 0;
		border: 0;
		padding: 0;
		color: #999;
		background: none;
		font-size: 14px;
		font-weight: normal;
		text-align: right;
		text-transform: none;
	}
	
	.module-mmt-calendar table
	{
		margin-top: 6px;
		color: #fff;
		background: #bcc5cc;
	}
	
	.module-mmt-calendar th
	{
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 2px;
		background: #84a7ed;
		text-align: right;
		font-weight: normal;
	}
	
	.module-mmt-calendar td
	{
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 2px;
		background: #c3c3c3 url(calendar-td-bg.gif) repeat-x;
		text-align: right;
		font-weight: normal;
	}
	
	.module-mmt-calendar .weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42
	{
		border-right: none;
	}
	
	.day-photo a
	{
		border: solid 1px #369;
		padding: 1px;
		background: #fff;
	}
	
	.day-photo a:hover
	{
		border-color: #900;
	}


/* moblog1 tweaks */

	.layout-moblog1 #container-inner { background-position: -220px 0; }
	.layout-moblog1 #pagebody
	{
		background: transparent url(column-left-bg.gif) -580px 0 repeat-y;
	}
	
	.layout-moblog1 #alpha { width: 200px; }
	
	.layout-moblog1 #beta
	{
		width: 320px;
		margin: 20px 0 20px 20px;
	}
	
	.layout-moblog1 #gamma
	{
		width: 160px;
		margin: 20px 0 20px 40px;
	}
	
	.layout-moblog1 .entry { margin-bottom: 40px; }
	
	.layout-moblog1 .module-recent-photos .module-content { margin: 6px 0 0 12px; }

	.layout-moblog1 .module-powered .module-content
	{
		margin-right: 20px;
	}

/* moblog2 tweaks */

	.layout-moblog2 #container-inner { background-position: -350px 0; }
	.layout-moblog2 #pagebody
	{
		background: transparent url(column-left-bg.gif) -690px 0 repeat-y;
	}
	.layout-moblog2 #pagebody-inner
	{
		background: transparent url(column-right-bg.gif) -160px 0 repeat-y;
	}
	
	.layout-moblog2 #alpha { width: 70px; }
	.layout-moblog2 #beta { width: 300px; margin: 0 0 0 40px; }
	.layout-moblog2 #gamma { width: 170px; margin: 0 0 0 40px; }
	
	.layout-moblog2 #delta
	{
		float: left;
		width: 100px;
		margin: 0 0 0 20px;
	}
	
	.layout-moblog2 .module-header,
	.layout-moblog2 .trackbacks-header,
	.layout-moblog2 .comments-header,
	.layout-moblog2 .comments-open-header,
	.layout-moblog2 .archive-header
	{
		margin: 20px 0 1px 0;
	}
	
	.layout-moblog2 .date-header { margin-top: 20px; }	

	.layout-moblog2 .content-nav { padding-top: 20px; }
	
	.layout-moblog2 .module-photo .module-content { margin: 0; }
	.layout-moblog2 .module-photo img { width: 80px; height: auto; }
	
	.layout-moblog2 .module-recent-photos .module-content
	{
		margin: 0;
		padding: 0;
		background: none;
	}
	
	.layout-moblog2 .module-recent-photos .module-list { margin: 0; }
	.layout-moblog2 .module-recent-photos .module-list-item { margin: 0 0 5px 0; }
	
	.layout-moblog2 .module-powered .module-content
	{
		margin-right: 20px;
	}
	

/* timeline tweaks */

	.layout-timeline #container-inner { background-position: -420px 0; }
	
	.layout-timeline #alpha { width: 340px; }
	.layout-timeline #beta { width: 360px; }
	
	.layout-timeline #gamma,
	.layout-timeline #delta
	{
		width: 170px;
	}
	
	.layout-timeline .module-recent-photos .module-content { padding: 0 0 10px 0; }
	.layout-timeline .module-recent-photos .module-list { margin: 7px 7px 0 0; }


/* one-column tweaks */

	.layout-one-column body
	{
		min-width: 620px;
	}
	
	.layout-one-column #container
	{
		width: 620px;
		background: transparent url(one-column-container-bg.gif) repeat-y;
	}
	
	.layout-one-column #container-inner
	{
		margin: 0 10px 0 10px;
		border-bottom: 1px solid #5b626a;
		background: transparent url(column-right-bg.gif) -500px 0 repeat-y;
	}
	
	.layout-one-column #banner
	{
		width: 594px; /* necessary for ie win */
	}
	
	.layout-one-column #container-inner { background: none; }
	.layout-one-column #alpha { width: 560px; }
	
	
/* two-column-left tweaks */

	.layout-two-column-left #container-inner { background: none; }

	.layout-two-column-left #pagebody
	{
		background: transparent url(column-left-bg.gif) -580px 0 repeat-y;
	}
	
	.layout-two-column-left #alpha { width: 200px; }
	.layout-two-column-left #beta
	{
		width: 500px;
		margin: 20px 0 0 20px;
	}
	
	.layout-two-column-left .module-powered .module-content
	{
		margin-right: 20px;
	}


/* two-column-right tweaks */

	.layout-two-column-right #container-inner { background: none; }

	.layout-two-column-right #pagebody
	{
		background: transparent url(column-right-bg.gif) -270px 0 repeat-y;
	}
	
	.layout-two-column-right #container-inner { background: none; }
	.layout-two-column-right #alpha { width: 490px; }
	.layout-two-column-right #beta
	{
		width: 200px;
		margin: 20px 0 0 40px;
	}


/* three-column tweaks */
	
	.layout-three-column #container-inner { background-position: -260px 0; }

	.layout-three-column #pagebody
	{
		background: transparent url(column-left-bg.gif) -580px 0 repeat-y;
	}
	
	.layout-three-column #alpha { width: 160px; }
	
	.layout-three-column #beta
	{
		width: 300px;
		margin: 20px 0 20px 20px;
	}
	
	.layout-three-column #gamma
	{
		width: 160px;
		margin: 20px 0 20px 40px;
	}
	
	.layout-three-column .module-powered .module-content
	{
		margin-right: 20px;
	}

Thank you.

justG

Aug 26 2006, 06:08 AM

Find the div relevant to the entry's body and change its background colour:

CODE

#id {
background-color: #c0c0c0;
}

If you're wanting us to look through the provided stylesheet and identify exactly which div it is for you, sorry, I don't have time for that. But if you're having trouble identifying which element on a page needs modification, you might try the FireBug extension for Firefox. I have found it invaluable in helping me produce web sites, especially when dealing with complicated stylesheets like the one that comes with MT. Basically you click on the Inspector tab, click through each element, and as you do, it is highlighted with a bright border that blinks once or twice. So all you have to do is click through the elements of the page and wait until the area you want is highlighted on the page; then you'll know which div to style differently to get the effect you want.

Hope that helps,
Gita

Mblog

Sep 8 2006, 06:31 PM

CODE

#id {
background-color: #c0c0c0;
}

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.