Default theme stylesheet commented
This is a restructured and commented version of the serendipity blog default theme. Styles have been re-organised into the following groups; general, header, footer, entry, comments, commentform, sidebar, calendar, image media.
Please don't add new styles to this page, or change the original stylesheet code, simply edit the 'Describe:' area if you think the style isn't adequately described. This will ensure new theme designers are able to use the default theme as the basis for their new template.
General Styles
h4,h3 {
margin: 0; }
Describe: used in entry/sidebar titles
input, textarea {
font-size: 10pt;
font-family: verdana, arial, helvetica, sans-serif; }
Describe: the input boxes used in forms
th, td {
font-size: 10pt; }
Describe: all table headers and rows
p, td, th, div, span {
font-family: verdana, arial, helvetica, sans-serif; }
Describe: the font type used in theme
a:link, a:visited, a:active {
color: #003366;
text-decoration: underline; }
Describe: all links are blue and underlined
a:hover {
color: #000000;
text-decoration: underline; }
Describe: change link color to black when hovered over
.serendipity_center {
margin-left: auto;
margin-right: auto;
text-align: center; }
Describe: used when s9y needs to center something, the margin 'auto' is used with block level elements (such as div's) to set the width of the block. In this case we are centering the block relative to its parent block. The text-align: center then also aligns the text to center of the block. Alternatives to this could include 'margin-left:0; text-align:center;' which would place the block at the left side of its containing block, yet still center the text.
.serendipity_msg_important {
color: red; }
Describe: warning messages from s9y
.serendipity_msg_notice {
color: green; }
Describe: messages letting you know something has happened eg comment saved
Structural Styles
body {
font-size: 10pt;
margin: 0;
background-color: #D2DFF2;
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
margin-bottom: 30px;}
Describe: preset styles for entire blog unless overruled elsewhere, page footer is here as well
#serendipity_banner {
margin: auto;
width: 100%;
height: 72px;
background-image: url({TEMPLATE_PATH}img/background.png);}
Describe: container for banner
#mainpane {
border-bottom: 1px solid #000000;
margin: auto;
width: 100%;
border-top: 0px;
background-color: #FFFFFF;
border-top: 1px solid #000000;}
Describe: container for content and sidebar
#content {
padding: 10px;
margin: 10px;
width: auto;}
Describe: container for entries column
#serendipityRightSideBar {
width: 170px;
border-left: 1px dashed #000000;
padding: 10px;
vertical-align: top;}
Describe: container for right sidebar
#serendipityLeftSideBar {
width: 170px;
border-right: 1px dashed #000000;
padding: 10px;
vertical-align: top;}
Describe: container for left sidebar
Header/Banner Styles
a.homelink1,
a.homelink1:hover,
a.homelink1:link,
a.homelink1:visited,
#serendipity_banner h1 {
color: #FFFFFF;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size : 20px;
padding-left:15px;
padding-top: 10px;
margin: 0px;
text-decoration: none;}
Describe: the big link in the banner, blog name/entry title
a.homelink2,
a.homelink2:hover,
a.homelink2:link,
a.homelink2:visited,
#serendipity_banner h2 {
color: #FFFFFF;
padding-left: 15px;
font-size: 14px;
margin: 0px;
text-decoration: none;}
Describe: the smaller link in the banner, blog description
Entry Styles
.serendipity_Entry_Date {
margin: auto;}
Describe: container for entry title and date
.serendipity_date {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: large;
color: #333333;
margin: 0;
margin-top: 20px;
text-align: right;}
Describe: style for the actual date below entry title
.serendipity_title {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
margin-top: 10px;
color: #333333;
padding-left: 5px;
border-bottom: 2px solid #36558C;}
Describe: entry title
.serendipity_title a:link, .serendipity_title a:visited {
text-decoration: none;
border: 0;
color: #000000;}
Describe: entry title link, regular color is black
.serendipity_title a:hover {
color: #FF0000;}
Describe: entry title link when hovered over, changes to red
.serendipity_entry {
font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
color: #333333;
font-size: 9.5pt;
font-weight: normal;
padding-right: 10px;
width: 95%;
margin: auto;
margin-top: 10px;}
Describe: container for the entry/post
.serendipity_entry p {
margin: 0px;
padding-bottom: 0px;}
Describe: additional styles used for entry text
.serendipity_entry_body_folded,
.serendipity_entry_body_unfolded,
.serendipity_entry_extended {
}
Describe: not used in default theme, but can be used to apply additional styles for full entry
div.serendipity_entryFooter {
font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: x-small;
color: #000000;
padding-top: 10px;
padding-bottom: 4px;
clear: both;}
Describe: the small text at the end of each entry 'Posted by etc'
img.serendipity_entryIcon {
float: right;
border: 0px;}
Describe: styles for category icon if used
.serendipity_entry_author_self {
}
Describe: not used, but allows additional style to show authors posts if they've logged in
Comment Styles
.serendipity_comments {
}
Describe: container for all comments, not styled separately in default theme
.serendipity_commentsTitle {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
margin-top: 10px;
color: #333333;
padding-left: 5px;
border-bottom: 2px solid #36558C;}
Describe: comments, trackbacks and commentform titles
.serendipity_comment {
font-size: 13px;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
color: #404040;
padding: 3px;
background-color: #FFFFFF;
overflow: auto;}
Describe: container for individual comments
.serendipity_comment_source {
margin-top: 5px;
padding-left: 5px;
margin-bottom: 5px;
padding-bottom: 3px;
border-bottom: 2px solid #36558C;}
Describe: style for comment author, date commented etc
.serendipity_comment_author_self .serendipity_comment_source {
background-color: #EEEEFF;}
Describe: style for comment author if logged in
Comment Form
.serendipity_commentForm {
font-size: 13px;
color: #404040;
margin-bottom: 13px;
margin-right: 10px;
margin-left: 10px;
background-color: #FFFFFF;}
Describe: container style for entire comment form
td.serendipity_commentsLabel {
font-size: 12px;
font-weight: bold;
vertical-align: top;}
Describe: style for name, email etc fields in comments form
td.serendipity_commentsValue input,
td.serendipity_commentsValue select,
td.serendipity_commentsValue textarea {
font-size: 12px;
padding: 2px;
width: 400px;}
Describe: styles for input boxes in comments form
Sidebar Styles
div.serendipitySideBarItem {
padding-bottom: 12px;
margin-bottom: 12px;
font-size: 12px;
font-weight:normal;
border-bottom: solid 2px #36558C;}
Describe: container style for individual sidebar blocks
.serendipitySideBarTitle {
margin: 0;
font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
font-weight:bold;
padding-left:2px;
padding-bottom:2px;}
Describe: style for each sidebar title
div.serendipityPlug {
padding-left: 10px;}
Describe: style for the powered by sidebar entry
div.serendipityPlug a {
text-decoration: none;
border: 0px;}
Describe: style for the powered by link
.serendipityImageButton {
cursor: pointer;}
Describe: style for the powered by image if used
Calendar Styles
table.serendipity_calendar td {
font-size:11px;
padding: 3px;}
Describe: container style for calendar table rows
table.serendipity_calendar a {
color: #FF0000;
font-weight: bold;
text-decoration:none;}
Describe: style for calendar date links
table.serendipity_calendar a:hover {
text-decoration: none;}
Describe: style for calendar links when hovered over
td.serendipity_weekDayName {
font-size:11px;
font-weight:bold;}
Describe: style for calendar weekday names
td.serendipity_calendarHeader a:link,
td.serendipity_calendarHeader a:visited,
td.serendipity_calendarHeader a:hover {
border: 0;
text-decoration: none;}
Describe: styles for month name and arrows in calendar
Embedded images with the s9y image manager
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
border: 1px solid #DDDDDD;
background-color: #EFEFEF;
margin: 3px;
padding: 3px;
text-align: center;}
Describe: container for images and text
.serendipity_imageComment_center {
margin: auto;}
Describe: style to center image and text within entry
.serendipity_imageComment_left {
float: left;}
Describe: style to left align image and text within entry
.serendipity_imageComment_right {
float: right;}
Describe: style to right align image and text within entry
.serendipity_imageComment_img, .serendipity_imageComment_img img {
margin: 0px;
padding: 0px;
text-align: center;}
Describe: styles for the images
.serendipity_imageComment_txt {
border-top: 1px solid #DDDDDD;
margin: 0px;
padding: 3px;
clear: both;
font-size: 8pt;
text-align: center;}
Describe: styles for the text below the image if used
