Difference between revisions of "Bootstrap Style Page"

From BootstrapWiki
Jump to: navigation, search
 
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
Jon, please add CSS descriptions here
+
This is the CSS stylesheet we developed while redesigning the Bootstrap Network Blog. By using/adapting these specifications,  you can create sites that are consistent. If you're a CSS expert and have thought about improving the CSS, post them here or contact Jon Lebkowsky (jon.lebkowsky at gmail.com).  If you have a web project in mind but you don't get CSS, contact Jon for feedback/help.
 +
 
 +
To see the styles in action, go  here: http://www.bootstrapnetwork.com/blog/
 +
 
 +
<pre>
 +
body {
 +
background-color: ##FF7300;
 +
margin: 0px  0px 0px 0px;
 +
padding:0px;
 +
font-family: "times new roman",times,serif;
 +
font-size: small;
 +
color: #000;
 +
}
 +
 +
a {
 +
color: #1088F9;
 +
text-decoration: none;
 +
}
 +
 
 +
.banner {
 +
border-top: thick solid #000;
 +
border-bottom: thick solid #000;
 +
padding: 8px;
 +
background-color: FFF;
 +
margin-bottom: 12px;
 +
}
 +
 
 +
.tagline {
 +
font-family : Verdana; sans-serif;
 +
color : #fff;
 +
font-size : 14px;
 +
font-weight : bold;
 +
background : #000;
 +
  text-transform : uppercase;
 +
text-align : center;
 +
vertical-align: middle;
 +
height: 24px;
 +
width: 100%;
 +
padding: 8px;
 +
        }
 +
 
 +
H1 { 
 +
font-family: Verdana, Helvetica, sans-serif;
 +
font-size: large;
 +
font-style: normal;
 +
font-weight: bold;
 +
word-spacing:-0.125em
 +
color: #000066;
 +
}
 +
 
 +
H2 { 
 +
font-family: verdana, arial, sans-serif;
 +
font-variant: small-caps;
 +
font-size: medium;
 +
font-style: normal;
 +
font-weight: bold;
 +
color: #4E5B54;
 +
word-spacing:-0.125em
 +
}
 +
 
 +
ul {
 +
font-family: "times new roman",times,serif;
 +
font-size: small;
 +
color: #000;
 +
line-height: 1.5em;
 +
}
 +
 +
H2 a {
 +
font-family: verdana, arial, sans-serif;
 +
font-variant: small-caps;
 +
font-size: medium;
 +
font-style: normal;
 +
font-weight: bold;
 +
color: #6A7C72;
 +
word-spacing:-0.125em
 +
}
 +
 
 +
H2 a:visited {
 +
font-family: verdana, arial, sans-serif;
 +
font-variant: small-caps;
 +
font-size: medium;
 +
font-style: normal;
 +
font-weight: bold;
 +
color: #9A8992;
 +
word-spacing:-0.125em
 +
}
 +
 +
H2 a:hover {
 +
font-family: verdana, arial, sans-serif;
 +
font-variant: small-caps;
 +
font-size: medium;
 +
font-style: normal;
 +
font-weight: bold;
 +
background-color: #4E5B54;
 +
color: #FFFFFF;
 +
word-spacing:-0.125em
 +
}
 +
 
 +
H3 { 
 +
font-family: verdana, arial, sans-serif;
 +
font-size: 12px;
 +
font-style: small;
 +
font-weight: bold;
 +
color: FF7300;
 +
margin: 8 0 4 0;
 +
word-spacing:-0.125em;
 +
}
 +
 
 +
H3.subtitle { 
 +
font-family: verdana, arial, sans-serif;
 +
font-size: medium;
 +
font-style: normal;
 +
font-weight: bold;
 +
color: #FFF;
 +
margin-top: 0px;
 +
word-spacing:-0.125em;
 +
}
 +
 +
H4 {
 +
font-family: verdana, arial, sans-serif;
 +
font-size: small;
 +
font-style: normal;
 +
font-weight: bold
 +
}
 +
 +
.date {
 +
font-family: Verdana;
 +
font-size: 14px
 +
font-color: FBC48E;
 +
}
 +
 
 +
.blogpost {
 +
font-family: "times new roman",times,serif;
 +
font-size: small;
 +
color: #000;
 +
line-height: 1.5em;
 +
}
 +
 
 +
.byline {
 +
margin-top: 8px;
 +
font-family: "times new roman",times,serif;
 +
font-size: xx-small;
 +
color: #000;
 +
line-height: 1.5em;
 +
}
 +
 
 +
.blogcomments {
 +
font-family: "times new roman",times,serif;
 +
font-size: x-small;
 +
color: #000;
 +
line-height: 1.5em;
 +
}
 +
 
 +
.sidelink {
 +
border:1px solid #4E5B54;
 +
background-color:#FFF;
 +
color: #000;
 +
padding: 6px;
 +
width: 200px;
 +
font-size: x-small;
 +
font-family: Verdana;
 +
margin-bottom: 10px;
 +
text-align: center;
 +
text-transform : uppercase;
 +
}
 +
 
 +
.sidelink a {
 +
color: #000;
 +
}
 +
 
 +
.sidelink a:hover {
 +
color: #FF7300;
 +
}
 +
 +
.container {
 +
margin-left: 18px;
 +
}
 +
 +
.seal {
 +
background-color:#FFF;
 +
color: #000;
 +
padding: 6px;
 +
width: 200px;
 +
font-size: x-small;
 +
font-family: Verdana;
 +
margin-top: 12px;
 +
margin-bottom: 12px;
 +
margin-right: 10px;
 +
text-align: center;
 +
line-height: 1.5em;
 +
}
 +
 +
.footer {
 +
margin-top: 2px;
 +
font-family: "times new roman",times,serif;
 +
font-size: xx-small;
 +
color: #000;
 +
line-height: 1.5em;
 +
width: 300px;
 +
}
 +
</pre>

Latest revision as of 15:50, 16 March 2007

This is the CSS stylesheet we developed while redesigning the Bootstrap Network Blog. By using/adapting these specifications, you can create sites that are consistent. If you're a CSS expert and have thought about improving the CSS, post them here or contact Jon Lebkowsky (jon.lebkowsky at gmail.com). If you have a web project in mind but you don't get CSS, contact Jon for feedback/help.

To see the styles in action, go here: http://www.bootstrapnetwork.com/blog/

body {
		background-color: ##FF7300;
		margin: 0px  0px 0px 0px;
		padding:0px;
		font-family: "times new roman",times,serif;
		font-size: small;
		color: #000;
		}
	
a {
	color: #1088F9;
	text-decoration: none;
	}

.banner {
	border-top: thick solid #000;
	border-bottom: thick solid #000;
	padding: 8px;
	background-color: FFF;
	margin-bottom: 12px;
}

.tagline {
	font-family : Verdana; sans-serif;
	color : #fff;
	font-size : 14px;
	font-weight : bold;
	background : #000;
  	text-transform : uppercase;
	text-align : center;
	vertical-align: middle;
	height: 24px; 
	width: 100%;
	padding: 8px;
        }

H1 {  
	font-family: Verdana, Helvetica, sans-serif; 
	font-size: large; 
	font-style: normal; 
	font-weight: bold;
	word-spacing:-0.125em
	color: #000066; 
	}

H2 {  
	font-family: verdana, arial, sans-serif; 
	font-variant: small-caps; 
	font-size: medium; 
	font-style: normal; 
	font-weight: bold; 
	color: #4E5B54; 
	word-spacing:-0.125em
	}

ul {
		font-family: "times new roman",times,serif;
		font-size: small;
		color: #000;
		line-height: 1.5em;
		}
	
H2 a {
	font-family: verdana, arial, sans-serif; 
	font-variant: small-caps; 
	font-size: medium; 
	font-style: normal; 
	font-weight: bold; 
	color: #6A7C72; 
	word-spacing:-0.125em
	}

H2 a:visited {
	font-family: verdana, arial, sans-serif; 
	font-variant: small-caps; 
	font-size: medium; 
	font-style: normal; 
	font-weight: bold; 
	color: #9A8992; 
	word-spacing:-0.125em
	}
	
H2 a:hover {
	font-family: verdana, arial, sans-serif; 
	font-variant: small-caps; 
	font-size: medium; 
	font-style: normal; 
	font-weight: bold; 
	background-color: #4E5B54;
	color: #FFFFFF; 
	word-spacing:-0.125em
	}

H3 {  
	font-family: verdana, arial, sans-serif; 
	font-size: 12px; 
	font-style: small; 
	font-weight: bold; 
	color: FF7300;
	margin: 8 0 4 0;
	word-spacing:-0.125em;
	}

H3.subtitle {  
	font-family: verdana, arial, sans-serif; 
	font-size: medium; 
	font-style: normal; 
	font-weight: bold; 
	color: #FFF;
	margin-top: 0px;
	word-spacing:-0.125em;
	}
	
H4 { 
	font-family: verdana, arial, sans-serif; 
	font-size: small; 
	font-style: normal; 
	font-weight: bold 
	}
	
.date {
	font-family: Verdana;
	font-size: 14px
	font-color: FBC48E;
	}

.blogpost {
		font-family: "times new roman",times,serif;
		font-size: small;
		color: #000;
		line-height: 1.5em;
		}

.byline {
		margin-top: 8px;
		font-family: "times new roman",times,serif;
		font-size: xx-small;
		color: #000;
		line-height: 1.5em;
		}

.blogcomments {
		font-family: "times new roman",times,serif;
		font-size: x-small;
		color: #000;
		line-height: 1.5em;
		}

.sidelink {
	border:1px solid #4E5B54;
	background-color:#FFF;
	color: #000;
	padding: 6px;
	width: 200px;
	font-size: x-small;
	font-family: Verdana;
	margin-bottom: 10px;
	text-align: center;
	text-transform : uppercase;
	}

.sidelink a {
	color: #000;
	}

.sidelink a:hover {
	color: #FF7300;
	}
	
.container {
	margin-left: 18px;
	}
	
.seal {
	background-color:#FFF;
	color: #000;
	padding: 6px;
	width: 200px;
	font-size: x-small;
	font-family: Verdana;
	margin-top: 12px;
	margin-bottom: 12px;
	margin-right: 10px;
	text-align: center;
	line-height: 1.5em;
	}
	
.footer {
		margin-top: 2px;
		font-family: "times new roman",times,serif;
		font-size: xx-small;
		color: #000;
		line-height: 1.5em;
		width: 300px;
		}