Difference between revisions of "Bootstrap Style Page"
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | Jon, | + | 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;
}