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 14: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; }