Blog For Dummies Styling
The styling in the project Blog For Dummies
This documentation is current to version 0.5.1
This documentation is about creating your own stylesheet for use with Blog For Dummies. If you wish to use the style variables, you can read about them at the bottom of the Config Documentation page.
- A stylesheet can have any name but must end in .css (ex. style.css).
- There are three types of styles (or style selectors).
- An HTML element.
- Class Selector. A class selector is assigned by using the indicator "." to precede a name.
- ID Selector. An ID selector is assigned by using the indicator "#" to precede a name.
- Every selector has a set of properties and every property has a value.
| Style element layout | selector { property: value;} |
|---|
Note: This is just a list of the style selectors used in Blog For Dummies. To take a look at all the style properties and values, download the script and view the style.php file. You can also view and download all the styles used in Blog For Dummies in stylesheet format at the bottom of the page.
Main Styles
| Selector | Notes |
|---|---|
| body | The body of the entire page page. |
| #main | The main section of the blog. |
| #main_table | The table in the main section of the blog. |
| #footer | The footer section of the blog. |
| Selector | Notes |
|---|---|
| #header | This is what holds all of the header content. |
| .header_image | This is for any image in the header. |
| Selector | Notes |
|---|---|
| #links | This is for the links section. |
| #links ul | This is for the unordered list containing the links. |
| #links ul li | This is the list item that holds each link. |
| #links ul li a | This is for the link itself. |
| #links ul li a:hover | This is when you hover over the links. |
| Selector | Notes |
|---|---|
| .profile_left_or_right | This is the selector for when the profile is on either the left or right side of the blog. |
| .profile_top_or_bottom | This is the selector for when the profile is on either the top or bottom of the blog. |
| .profile_table | This is the table that contains the profile. |
| .profile_table_image | This is the part of the profile table that contains the image. |
| .profile_table_content | This is the part of the profile table that holds the content. |
| .profile_image | This is the selector for the profile image itself. |
| .profile_name | This is the selector for the name in the profile. |
| .profile_content | This is the selector for the profile content. |
| Selector | Notes |
|---|---|
| .blog | This is the main section of the blog posts. |
| #blog_table | This is the table in the main blog section containing the posts. |
| .post_title | This is the post title style. |
| .post_title a | This is the style for when the title is a link. |
| .post_title a:hover | This is when the title link is hovered over. |
| .post_date | This is the post dates style. |
| .post_content | This is the posts content style. |
| .post_signature | This is the post signatures style. |
| .post_list | This is the style for when the blog type is list. |
| .post_list_date | This is for the post date when in list mode. |
| .post_list_link | This is for the post link in list mode. |
| .post_extras | This is the style for the container that holds all the extras for a post. Like the permalink. |
| .post_extras a | This is for any link in the extras container. |
| Selector | Notes |
|---|---|
| hr | This is for any horizontal rule line in the blog. |
| .error | This is the style for any error messages displayed. |
| .pagination | This is for the page list at the bottom of the blog. |
| .pagination a | This is the style for all the links in the pagination. |
| img | This is the style for any image in the blog. |
| Selector | BB Code | Notes |
|---|---|---|
| .bold | [b] | This contains the default bold tag style. |
| .italic | [i] | This contains the default italic tag style. |
| .underline | [u] | This contains the default underline tag style. |
| .line_thru | [s] | This contains the default strike tag style. |
| .center | [center] | This contains the style that will center the content. |
| .left | [left] | This contains the style that will align the content to the left. |
| .right | [right] | This contains the style that will align the content to the right. |
| .images_in_posts | [img] | This contains the default image tag style. |
| .links_in_posts | [url] | This contains the default url tag styles. |
| .anchor | [anchor] | This contains the default anchor tag style. |
| .email_link | [email] | This contains the default email tag styles. |
| .ftp | [ftp] | This contains the default ftp tag styles. |
| .sub | [sub] | This contains the default subscript tag style. |
| .sup | [sup] | This contains the default superscript tag style. |
| .indent | [indent] | This contains the default indent tag style. |
| .caps | [caps] | This contains the default caps tag style that makes all the letters capitalize. |
| .small | [small] | This contains the default small tag style. |
| .big | [big] | This contains the default big tag style. |
| .teletype | [tt] | This contains the default teletype tag style. |
| .pre | [pre] | This contains the default pre tag style. |
| .abbr | [abbr] | This contains the default abbr tag cursor style. |
| .acronym | [acronym] | This contains the default acronym tag cursor style. |
| .list_none | [list=none] | These styles for all the list tags define the list type. If you don't know what your doing, I don't recommend you change them. |
| .list_number | [list=1] | |
| .list_upper_alpha | [list=A] | |
| .list_lower_alpha | [list=a] | |
| .list_upper_roman | [list=I] | |
| .list_lower_roman | [list=i] | |
| .list_disc | [list=disc] | |
| .list_circle | [list=circle] | |
| .list_square | [list=square] | |
| .table_bbc | [table] | This contains the default table tag styles. |
| .table_bbc tr | [tr] | |
| .table_bbc th | [th] | |
| .table_bbc td | [td] | |
| .code | [code] | This contains the default code tag style. |
| .nobbc | [nobbc] | This contains the default nobbc tag style. |
| .time | [time] | This contains the default time tag styles. |
| .shadow | [shadow] | This contains the default shadow tag style. |
| .facebook_link | [facebook] | This contains the default facebook tag link styles. |
| .facebook_image | [facebook=pic] | This contains the default facebook tag image style. |
| .twitter_link | [twitter] | This contains the default twitter tag styles. |
| #spoiler | [spoiler] | This contains the default spoiler tag styles. |
| #span1 | These contain the default text color styles for the spoiler warning and spoiler revealed. | |
| #span2 | ||
| .hide | This hides the spoiler. | |
| .show | This shows the spoiler. | |
| Note: The #spoiler, #span1, #span2, .hide and .show are the styles for the spoiler tag. If you don't know what your doing, I don't recommend changing anything. | ||
| .copyright | [copyright] | This contains the default copyright tag style. |
| .registered | [registered] | This contains the default registered tag style. |
| .trademark | [tm] | This contains the default trademark tag style. |
| .page_link | [page] | This contains the default page tag styles. |
| .post_link | [post] | This contains the default post tag styles. |
| .highlight | [highlight] | This contains the default highlight tag style. |
| .outline | [outline] | This contains the default outline tag styles. |
| .glow | [glow] | This contains the default glow tag style. |
Stylesheet
style.css
body {
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
text-align: center;
background-color: #ffffff;
}
#header {
width: 800px;
max-width: 800px;
text-align: left;
vertical-align: top;
margin: 0 auto;
border: none;
padding: 0 0 0 15px;
color: #000000;
font-size: 64px;
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
}
.header_image {
border: none;
}
#main {
width: 800px;
min-width: 800px;
margin: 0 auto;
text-align: left;
border: none;
}
#main_table {
width: 800px;
min-width: 800px;
text-align: left;
margin: 0 auto;
vertical-align: top;
border-style: none;
}
#footer {
width: 800px;
max-width: 800px;
text-align: center;
border: none;
margin: 0 auto;
padding: 5px 0 0 0;
color: #000000;
font-size: 20px;
font-family: Helvetica,Arial,sans-serif;
}
/* ----- LINK STYLES ----- */
#links {
width: 800px;
max-width: 800px;
height: 35px;
margin: 0 auto;
text-align: left;
border: none;
}
#links ul {
margin: 0;
padding: 0 10px 0 10px;
list-style: none;
}
#links ul li {
height: 35px;
float: left;
font-size: 26px;
font-family: Helvetica,Arial,sans-serif;
list-style: none;
color: #0000ff;
border: none;
}
#links ul li a {
float: left;
color: #0000ff;
text-decoration: underline;
padding: 0 10px 0 10px;
}
#links ul li a:hover {
text-decoration: none;
}
/* ----- PROFILE STYLES ----- */
.profile_left_or_right {
width: 160px;
min-width: 160px;
text-align: left;
vertical-align: top;
margin: 0;
padding: 0 3px 0 3px;
}
.profile_top_or_bottom {
width: 800px;
max-width: 800px;
text-align: left;
vertical-align: top;
margin: 0 auto;
border: none;
}
.profile_table {
padding: 5px 20px 0px 20px;
}
.profile_table_image {
border: none;
}
.profile_table_content {
vertical-align: top;
padding: 5px 10px 5px 10px;
}
.profile_image {
border: none;
text-align: left;
}
.profile_name {
color: #000000;
font-size: 18px;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
}
.profile_content {
color: #000000;
font-size: 18px;
font-family: Helvetica,Arial,sans-serif;
}
/* ----- POST STYLES ----- */
.blog {
width: 100%;
text-align: left;
vertical-align: top;
padding: 5px 10px 5px 10px;
border: none;
}
#blog_table {
width: 100%;
text-align: left;
margin: 0 auto;
vertical-align: top;
border-style: none;
}
.post_title {
width: 100%;
text-align: left;
vertical-align: top;
margin: 0;
padding: 0 5px 0 5px;
font-size: 36px;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.post_title a {
color: #0000ff;
text-decoration: underline;
}
.post_title a:hover {
color: #0000ff;
text-decoration: none;
}
.post_date {
width: 100%;
text-align: left;
vertical-align: top;
margin: 0;
padding: 0 15px 0 15px;
font-size: 20px;
font-style: italic;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.post_content{
width: 100%;
text-align: left;
vertical-align: top;
margin: 0;
padding: 0 25px 0 25px;
font-size: 18px;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.post_signature{
width: 100%;
text-align: right;
vertical-align: top;
margin: 0;
padding: 0 15px 0 15px;
font-size: 20px;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.post_list {
width: 100%;
text-align: left;
margin: 0;
padding: 5px 15px 5px 15px;
font-size: 30px;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.post_list_date {
font-size: 20px;
font-style: italic;
color: #000000;
}
.post_list_link {
font-size: 24px;
color: #0000ff;
}
.post_extras {
width: 100%;
text-align: center;
background-color: #c0c0c0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.post_extras a {
color: #0000ff;
}
/* ----- MISC STYLES ----- */
hr {
width: 95%;
}
.error {
text-align: center;
color: #ff0000;
font-size: 34px;
font-family: Helvetica,Arial,sans-serif;
}
.pagination {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
font-size: 16px;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.pagination a {
color: #0000ff;
}
img {
border: none;
}
/* ----- BB CODE DEFAULT STYLES ----- */
/* b */
.bold { font-weight: bold; }
/* i */
.italic { font-style: italic; }
/* u */
.underline { text-decoration: underline; }
/* s */
.line_thru { text-decoration: line-through; }
/* center */
.center { text-align: center; }
/* left */
.left { text-align: left; }
/* right */
.right { text-align: right; }
/* img */
.images_in_posts { border: none; }
/* url */
.links_in_posts {
text-decoration: underline;
color: #0000ff;
}
/* anchor */
.anchor { font-size: inherit; }
/* email */
.email_link {
text-decoration: none;
color: #0000ff;
}
/* ftp */
.ftp {
font-size: inherit;
color: #0000ff;
}
/* sub */
.sub { font-size: small; }
/* sup */
.sup { font-size: small; }
/* indent */
.indent { text-indent: 15px; }
/* caps */
.caps { text-transform: uppercase; }
/* small */
.small { font-size: small; }
/* big */
.big { font-size: big; }
/* tt */
.teletype { font-size: inherit; }
/* pre */
.pre { font-size: inherit; }
/* abbr */
.abbr { cursor: help; }
/* acronym */
.acronym { cursor: help; }
/* list */
.list_none { list-style-type: none; }
.list_number { list-style-type: decimal; }
.list_upper_alpha { list-style-type: upper-alpha; }
.list_lower_alpha { list-style-type: lower-alpha; }
.list_upper_roman { list-style-type: upper-roman; }
.list_lower_roman { list-style-type: lower-roman; }
.list_disc { list-style-type: disc; }
.list_circle { list-style-type: circle; }
.list_square { list-style-type: square; }
/* table, tr, th, td */
.table_bbc, .table_bbc tr, .table_bbc th, .table_bbc td {
border: 1px solid #000;
border-collapse: collapse;
}
.table_bbc tr, .table_bbc th, .table_bbc td {
padding: 3px 5px 3px 5px;
}
/* code */
.code { font-size: inherit; }
/* nobbc */
.nobbc { font-size: inherit; }
/* time */
.time {
border-top: 1px dotted #000;
border-bottom: 1px dotted #000;
border-left: none;
border-right: none;
padding: 0px 0px 0px 0px;
}
/* shadow */
.shadow { text-shadow: #333 1px 1px 2px; }
/* facebook */
.facebook_link {
text-decoration: underline;
color: #0000ff;
}
.facebook_image { border: none; }
/* twitter */
.twitter_link {
text-decoration: underline;
color: #0000ff;
}
/* spoiler */
#spoiler {
border: 1px dotted #222;
background-color: #e1e4f2;
}
#span1 { color: #ff0000; }
#span2 { color: #000; }
.hide { display:none; }
.show { display:block; }
/* copyright */
.copyright { font-size: inherit; }
/* registered */
.registered { font-size: inherit; }
/* tm */
.trademark { font-size: inherit; }
/* page */
.page_link {
text-decoration: underline;
color: #0000ff;
}
/* post */
.post_link {
text-decoration: underline;
color: #0000ff;
}
/* highlight */
.highlight { background-color: yellow; }
/* outline */
.outline {
color: #fff;
text-shadow: #000 -1px 0, #000 0 1px, #000 1px 0, #000 0 -1px;
}
/* glow */
.glow { text-shadow: yellow 0px 0px 2px, yellow 0px 0px 2px; }
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
text-align: center;
background-color: #ffffff;
}
#header {
width: 800px;
max-width: 800px;
text-align: left;
vertical-align: top;
margin: 0 auto;
border: none;
padding: 0 0 0 15px;
color: #000000;
font-size: 64px;
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
}
.header_image {
border: none;
}
#main {
width: 800px;
min-width: 800px;
margin: 0 auto;
text-align: left;
border: none;
}
#main_table {
width: 800px;
min-width: 800px;
text-align: left;
margin: 0 auto;
vertical-align: top;
border-style: none;
}
#footer {
width: 800px;
max-width: 800px;
text-align: center;
border: none;
margin: 0 auto;
padding: 5px 0 0 0;
color: #000000;
font-size: 20px;
font-family: Helvetica,Arial,sans-serif;
}
/* ----- LINK STYLES ----- */
#links {
width: 800px;
max-width: 800px;
height: 35px;
margin: 0 auto;
text-align: left;
border: none;
}
#links ul {
margin: 0;
padding: 0 10px 0 10px;
list-style: none;
}
#links ul li {
height: 35px;
float: left;
font-size: 26px;
font-family: Helvetica,Arial,sans-serif;
list-style: none;
color: #0000ff;
border: none;
}
#links ul li a {
float: left;
color: #0000ff;
text-decoration: underline;
padding: 0 10px 0 10px;
}
#links ul li a:hover {
text-decoration: none;
}
/* ----- PROFILE STYLES ----- */
.profile_left_or_right {
width: 160px;
min-width: 160px;
text-align: left;
vertical-align: top;
margin: 0;
padding: 0 3px 0 3px;
}
.profile_top_or_bottom {
width: 800px;
max-width: 800px;
text-align: left;
vertical-align: top;
margin: 0 auto;
border: none;
}
.profile_table {
padding: 5px 20px 0px 20px;
}
.profile_table_image {
border: none;
}
.profile_table_content {
vertical-align: top;
padding: 5px 10px 5px 10px;
}
.profile_image {
border: none;
text-align: left;
}
.profile_name {
color: #000000;
font-size: 18px;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
}
.profile_content {
color: #000000;
font-size: 18px;
font-family: Helvetica,Arial,sans-serif;
}
/* ----- POST STYLES ----- */
.blog {
width: 100%;
text-align: left;
vertical-align: top;
padding: 5px 10px 5px 10px;
border: none;
}
#blog_table {
width: 100%;
text-align: left;
margin: 0 auto;
vertical-align: top;
border-style: none;
}
.post_title {
width: 100%;
text-align: left;
vertical-align: top;
margin: 0;
padding: 0 5px 0 5px;
font-size: 36px;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.post_title a {
color: #0000ff;
text-decoration: underline;
}
.post_title a:hover {
color: #0000ff;
text-decoration: none;
}
.post_date {
width: 100%;
text-align: left;
vertical-align: top;
margin: 0;
padding: 0 15px 0 15px;
font-size: 20px;
font-style: italic;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.post_content{
width: 100%;
text-align: left;
vertical-align: top;
margin: 0;
padding: 0 25px 0 25px;
font-size: 18px;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.post_signature{
width: 100%;
text-align: right;
vertical-align: top;
margin: 0;
padding: 0 15px 0 15px;
font-size: 20px;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.post_list {
width: 100%;
text-align: left;
margin: 0;
padding: 5px 15px 5px 15px;
font-size: 30px;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.post_list_date {
font-size: 20px;
font-style: italic;
color: #000000;
}
.post_list_link {
font-size: 24px;
color: #0000ff;
}
.post_extras {
width: 100%;
text-align: center;
background-color: #c0c0c0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.post_extras a {
color: #0000ff;
}
/* ----- MISC STYLES ----- */
hr {
width: 95%;
}
.error {
text-align: center;
color: #ff0000;
font-size: 34px;
font-family: Helvetica,Arial,sans-serif;
}
.pagination {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
font-size: 16px;
font-family: Helvetica,Arial,sans-serif;
color: #000000;
}
.pagination a {
color: #0000ff;
}
img {
border: none;
}
/* ----- BB CODE DEFAULT STYLES ----- */
/* b */
.bold { font-weight: bold; }
/* i */
.italic { font-style: italic; }
/* u */
.underline { text-decoration: underline; }
/* s */
.line_thru { text-decoration: line-through; }
/* center */
.center { text-align: center; }
/* left */
.left { text-align: left; }
/* right */
.right { text-align: right; }
/* img */
.images_in_posts { border: none; }
/* url */
.links_in_posts {
text-decoration: underline;
color: #0000ff;
}
/* anchor */
.anchor { font-size: inherit; }
/* email */
.email_link {
text-decoration: none;
color: #0000ff;
}
/* ftp */
.ftp {
font-size: inherit;
color: #0000ff;
}
/* sub */
.sub { font-size: small; }
/* sup */
.sup { font-size: small; }
/* indent */
.indent { text-indent: 15px; }
/* caps */
.caps { text-transform: uppercase; }
/* small */
.small { font-size: small; }
/* big */
.big { font-size: big; }
/* tt */
.teletype { font-size: inherit; }
/* pre */
.pre { font-size: inherit; }
/* abbr */
.abbr { cursor: help; }
/* acronym */
.acronym { cursor: help; }
/* list */
.list_none { list-style-type: none; }
.list_number { list-style-type: decimal; }
.list_upper_alpha { list-style-type: upper-alpha; }
.list_lower_alpha { list-style-type: lower-alpha; }
.list_upper_roman { list-style-type: upper-roman; }
.list_lower_roman { list-style-type: lower-roman; }
.list_disc { list-style-type: disc; }
.list_circle { list-style-type: circle; }
.list_square { list-style-type: square; }
/* table, tr, th, td */
.table_bbc, .table_bbc tr, .table_bbc th, .table_bbc td {
border: 1px solid #000;
border-collapse: collapse;
}
.table_bbc tr, .table_bbc th, .table_bbc td {
padding: 3px 5px 3px 5px;
}
/* code */
.code { font-size: inherit; }
/* nobbc */
.nobbc { font-size: inherit; }
/* time */
.time {
border-top: 1px dotted #000;
border-bottom: 1px dotted #000;
border-left: none;
border-right: none;
padding: 0px 0px 0px 0px;
}
/* shadow */
.shadow { text-shadow: #333 1px 1px 2px; }
/* facebook */
.facebook_link {
text-decoration: underline;
color: #0000ff;
}
.facebook_image { border: none; }
/* twitter */
.twitter_link {
text-decoration: underline;
color: #0000ff;
}
/* spoiler */
#spoiler {
border: 1px dotted #222;
background-color: #e1e4f2;
}
#span1 { color: #ff0000; }
#span2 { color: #000; }
.hide { display:none; }
.show { display:block; }
/* copyright */
.copyright { font-size: inherit; }
/* registered */
.registered { font-size: inherit; }
/* tm */
.trademark { font-size: inherit; }
/* page */
.page_link {
text-decoration: underline;
color: #0000ff;
}
/* post */
.post_link {
text-decoration: underline;
color: #0000ff;
}
/* highlight */
.highlight { background-color: yellow; }
/* outline */
.outline {
color: #fff;
text-shadow: #000 -1px 0, #000 0 1px, #000 1px 0, #000 0 -1px;
}
/* glow */
.glow { text-shadow: yellow 0px 0px 2px, yellow 0px 0px 2px; }
Category: Blog For Dummies Documentation | Project: Blog For Dummies