Blog template and settings
Introduction
This page is for those who understand a bit about HTML and CSS. For those who want a broader understanding of my blog setup, see Blog setup notes.
Note that this page describes how I set the CSS up for use with the Blogger template that I've used since April 2011. At that time, I had to change some CSS to work with the different template, since when any changes have been purely due to adding extra options or changing existing ones.
Except for rounded corners, all of the functions work on Internet Explorer, Google Chrome and Firefox, which are the only browsers that I've tested them on. Rounded corners work on Google Chrome and Firefox, but not yet on Internet Explorer, which shows normal squared corners instead. The CSS border-radius style is not officially standard yet, but I decided it was worth coding it in because rounded corners look better on pages displayed by those browsers that cater for them while no harm is done otherwise, and the effort is minimal. There are ways of getting rounded corners into other browsers using images, but I'm not that desperate to find out how to do it.
Viewing my source
Just as with any web page, you can view the source. It isn't necessary to understand all the Blogger code to understand mine. Blogger's own help system gave me enough information to begin with. I've hopefully made things as easy as possible for you to understand what I've done by making it clear which code is mine. You'll find a block of code that shows my CSS style definitions sandwiched between the comment lines Start of user defined styles and End of user defined styles. I inserted those sub-headings for clarity; they aren't generated by Blogger. I also inserted <! start pdh body> and <! end pdh body> at the start and end respectively of my HTML style definitions just to make absolutely clear to you where the boundaries of my code lie. These comments don't mean anything to the various browsers that display the page, but you should find that the start is always followed by <div class="pdhdisplay"> and a corresponding </div> precedes the end line, these being the instructions that browsers understand when they look at my HTML style definitions.
Settings
Unlike the template, the settings are not visible in the source. However, if you're going to create a blog using HTML, it is best to go to the Formatting page within Settings and change Convert line breaks from Yes to No. The default Yes value is ideal for standard blogs in which everything is displayed in the format in which it was originally typed in. I've changed a few other settings too but you don't need to worry about everything else I've done, although you'll notice that in most of my blogs, I only display one blog entry per page; the standard is seven, and I mention some other settings below. Just go through all the settings on your own blog in turn to decide exactly what you want. For example, you may wish to allow other people to post comments on your blog pages (as I do if they are for public viewing); in that case, you'll have to change the relevant settings.
Most of my settings are the same for all my blogs, but there are variations.
- Most but not all of my blogs use HTML, therefore there is variation between blogs in the setting of Convert line breaks as noted above.
- Most but not all of my blogs are available to the public and anybody is allowed to comment on them. However, I have some private blogs as follows
- When testing new blog-cum-websites, I may keep them private until they reach a point where they are rady for the public
- Some blogs are more like general storage areas, allowing me access to private stuff online whenever I use public computers. I've also used e-mail for this sort of thing, but if I put it in a blog, it's easier to find.
- I can keep copies of copyrighted material in private blogs, formatted in a way that I want and without infringing anybody else's copyright. This is particularly useful in genealogy, where I have both a public blog and a private blog.
- With private blogs, I set the option to block access to search engines. I do not necessarily un-block that access when I declare a blog public. There can be an intermediate stage where I let some people know it's there, before allowing the search engines loose on it.
Private blogs have an option to allow access to people other than the person who created the blog, but I have not used that option thus far, although I do not rule it out in the future. Another option might be to make it public but not allow access by search engines. This would be more risky if one wants to keep the contents totally confidential, but would avoid the need to give permission to each individual.
There are also privacy options for blogs that you want the public to see, but I don't use these. If I allow the public to see a blog, I allow them to post a comment on it, even anonymously. I retain the option to prevent the comment from appearing, and I also have the option to delete it or move it later. Some people want everybody to read their musings, but only selected people to comment, to avoid any dissenting voices whatsoever. That says a lot about the sort of people they are. While I don't always allow nasty comments through, I sometimes do, whether or not I reply to them.
Templates - User defined styles
In setting up my blogs, I wanted to make it as easy as possible to transfer the code to a free-standing website should I ever decide to do so. I'd have to insert the header and trailer stuff at the beginning and end of each HTML page, as well as changing all the internal HTML links to point to my website instead of this blog. All of these things are unavoidable but any other changes would be optional, although some might be desirable to take account of the different page width.
Note that all styles are within div.pdhdisplay (as you'll see if you view source) so I've omitted references to div.pdhdisplay here (except for the div.pdhdisplay style itself) to avoid clutter.
Due to Blogger removing <br> line breaks from May 2012, it has been necessary to find other ways to avoid the need to use them.
Variation between blogs
Most of my HTML blogs use a blue background as standard with (maybe) the occasional white background, but some use a white background as standard; these blogs do not have a .whitepage style. Other than that, the CSS for all of my HTML blogs should be identical, although I do have a couple of blogs that don't use HTML at all. Of course, some of the CSS styles are specific to particular blogs, but I keep things simple if I limit myself to as little variation as possible. Thus, when I create another blog, I just load up the blue or white stylesheet as appropriate. When I change or add styles, I can recreate the white sheet easily from the blue if need be, although if the changes are minor, I apply them to both. I then have to update this page and paste the blue or white sheets into all the blogs.
| Division | Description |
|---|---|
| pdhdisplay | My part of the blog page |
| text | Text area, so excludes tables |
| navigation | Navigation (and some other stuff) to be ignored when printing. |
| selectors | styles | comments |
|---|---|---|
| div.pdhdisplay |
background-color: #ddffff
or background-color: #ffffff |
Pale blue background
or White background. |
| .whitepage | background-color: #ffffff | White background. |
| * |
font-family:
"Tahoma", "Arial", "Verdana", sans-serif; |
Use sans-serif fonts in my part of the page. |
|
h1
h2 h3 h4 |
text-transform : capitalize
text-align: center |
Capitalize and centralize headings.
h4 not used so far. |
|
h1.notransform
h2.notransform h3.notransform h4.notransform |
text-transform : none | Capitalize suppressed for headings with website names. |
| h1 |
color: #ff0000
font-size : 18px |
Red banner heading.
Reduce heading size |
| h2 |
color: #0000ff
font-size : 18px |
Blue sub-heading.
Reduce heading size |
| h3 |
color: #000000
font-size : 16px |
Black detail heading.
Reduce heading size |
| h4 |
color: #000000
font-size : 14px |
Black detail heading.
Reduce heading size |
| a:link |
color: #6131BD
text-decoration: none padding-left: 2px padding-right: 2px |
Unvisited links are purple without underlines. |
| a:visited |
color: #888888
text-decoration: none padding-left: 2px padding-right: 2px |
Visited links are grey without underlines. |
| a:hover |
color: #009900
text-decoration: none padding-left: 2px padding-right: 2px |
Hover links are green without underlines. |
| a:active |
color: #ff0000
text-decoration: none padding-left: 2px padding-right: 2px |
Active links are red without underlines. |
|
div.text a:link
div.text a:visited div.text a:hover div.text a:active .background-dodgy2 a:link .background-dodgy2 a:visited .background-dodgy2 a:hover .background-dodgy2 a:active .background-notme2 a:link .background-notme2 a:visited .background-notme2 a:hover .background-notme2 a:active |
background-color: #ffffff
padding-top: 0 padding-bottom: 0 margin: 0 |
Links in text and some table cells given white background. |
| .background-white | background-color: #ffffff | White background for stripey tables. |
| .background-pale | background-color: #ddffdd | Pale green background for stripey tables. |
| .background-yellow | background-color: #ffff99 | Pale yellow background for quotes. |
| .background-dodgy1 | background-color: #ffffff | White background for descent in ancestry tables that maybe leads to me. |
| .background-dodgy2 | background-color: #cfc996 | Wood background for descent in ancestry tables that maybe leads to me. |
| .background-notme1 | background-color: #ddffdd | Pale red background for descent in ancestry tables not leading to me. |
| .background-notme2 | background-color: #ffff99 | Pale yellow background for descent in ancestry tables not leading to me. |
| .highlight |
color: #ff0000
font-weight: bold |
Text highlighted in bold red. |
| table |
margin-left : auto
margin-right : auto margin-bottom: 5px border: 0 border-collapse: collapse |
Don't want table borders but do want margin at bottom of table. |
| caption |
color: #ffffff
background-color: #000000 font-weight: bold padding: 5px border-radius : 20px 20px 0px 0px;; -moz-border-radius : 20px 20px 0px 0px;; -webkit-border-radius : 20px 20px 0px 0px;; -ms-border-radius : 20px 20px 0px 0px;; |
Table captions are bold white on black background.
Border-radius set to produce rounded corners at top left and right; it works on some browsers but not all. |
| caption.quote |
color: #000000
background-color: #ffff99 font-weight: normal |
Black on pale yellow captions for quotes. |
| th |
background-color : #f9c396
text-align: center padding: 5px |
Light wood table headings. |
| td |
text-align : left
padding : 5px |
Table details need aligning (because some browsers use paragraph alignment as default) and padding. |
| tbody.stats td | text-align : right; | Numeric data in stats tables |
|
tbody.stars th
tbody.stats th |
font-weight : normal;
background-color : transparent; text-align : left; |
Stars and stats detail headings need normal font and same background as corresponding detail values. |
| b.green | color : #00ff00 | Green for Amazon Vine™ banner, also for Purchased in U.S. |
| b.orange | color: #cc3232 | Orange for Amazon Verified Purchase and other messages. |
| b.blue | color: #00ffff | Blue for Amazon badges and forum messages, and for ancestry numbers. |
| p | margin: 10px | Margins for all paragraphs. |
| p.middle | text-align : center | Centralize text within paragraph. |
| p.right | text-align : right | Move text to right within paragraphs where pictures are floated to the right. |
| p.h3upper |
text-align : center;
font-size : 16px; font-style : bold; margin-bottom : 1px; |
First line of multi-line heading, avoiding need for standard h3 with line break. |
| p.h3lower |
text-align : right
font-size : 16px; font-style : bold; margin-top : 1px; |
Last line of multi-line heading. |
| *.ignore | display : none | Ignore something that I've suppressed temporarily. |
| div.navigation media="print" | display: none | Don't print navigation. Some day I may look at Blogger code and suppress printing that stuff too if I can. |
| table.fixed | width: 100% | Table fixed at maximum width. |
| table.top | margin-top: 5px | Top margin required for table. |
| .half |
font-size : 250%;
font-weight : bold; |
For back and next page links in Amazon statistics. |
| table.smallfont td | font-size: 90% | Reduce font size to shrink a table that would otherwise be too wide. |
| hr |
display: block
color: #ff0000 background-color: #ff0000 width: 100% height: 2px text-align: center border: 0 |
Red horizontal line. |
| hr.blue |
color: #0000ff
background-color: #0000ff |
Blue horizontal line. |
| hr.yellow |
color: #ffff00
background-color: #ffff00 |
Yellow horizontal line. |
| .numeric | text-align: right | Used to define numbers. |
| .alpha | text-align: left | Used to define text. |
| float-right | float: right | Not used; all floating is done by embedded STYLE code. |
| float-left | float: left | Not used; all floating is done by embedded STYLE code. |
| blockquote |
font-style : normal
background-color : #ffff99 margin : 10px padding: 10px line-height : 1.2 border-radius : 20px; -moz-border-radius : 20px; -webkit-border-radius : 20px; -ms-border-radius : 20px; |
Used for block quotations.
Border-radius set to produce rounded corners at all four corners; it works on some browsers but not all. |
| blockquote.table |
margin-top : 0;
margin-bottom : 0; |
Cut margins for block quotations in tables, which I use to centralize them if they are short, as it seems to be the only way that works. |
| blockquote.white | background-color : #ffffff |
White background for block quotations.
Used for green messages. |
| blockquote.whitetable |
margin-top : 0;
margin-bottom : 0; background-color : #ffffff; |
Cut margins and white background for block quotations in tables.
Used for green messages. |
| li | margin-top : 5px | Space out lines in lists. |
Clean code - or not
I'm a great believer in clean code and would like my code to be compatible with W3C's official HTML validation. Unfortunately, it seems that Blogger does not share my enthusiasm for such niceties as they both generate dirty code. Indeed, Blogger even sometimes inserts </p> tags where there shouldn't be any. (This may be to conform with XML standards.) Furthermore, the iframes that Amazon supplies aren't clean either. So bear all this in mind if you try to validate my code.
Links
| Website |
|---|
| Official HTML validation |
| Official CSS validation |
| Look for broken links |
| Other validation tools |
| Bagism color maker |
0 comments:
Post a Comment