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 comment lines 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 was best to go to the Formatting page within Settings and change Convert line breaks from Yes to No. Unfortunately, Blogger no longer offer this option, so it is necessary to change the HTML for all new or edited pages. I am changing pages as I need to. I am having to squash up the code, making it less easy to read than it was, but by doing so, I can keep the code as it was. It may be that I eventually find other ways of doing some things so that I can make the code easier to read, but there's no real substitute for the old option to suppress conversion of line breaks. I suppose I could quit Blogger altogether, but I've got used to it now and I'll put up with it.
Apart from that lost option, I've changed a few other settings 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 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 ready 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.
- There are also some public blogs where I block access to search engines, for example Amazon ranking statistics. I don't think there is anything in there that people would be looking for in a Google search. Also, some people don't feel comfortable knowing that there is statistical data (however limited) about their reviews on a public website. So the only way you'll find that blog is via a link from one of my other blogs, or via a link set up by somebody else.
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 the relevant 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 the option to suppress conversion of line breaks from September 2012, I have found ways to avoid the need to use <br> line breaks, although there are still some of my blog pages that use them. Ironically, this is one page that uses lots of line breaks, but in due course, I'll work out a way to avoid their use because the squashed code is almost unreadable. I think I know how, but I don't want to spend the time it needs just now.
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 h5 |
text-transform : capitalize text-align: center |
Capitalize and centralize headings. |
| h1.notransform h2.notransform h3.notransform h4.notransform h5.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: #800000 font-size : 14px |
Brown detail heading. Reduce heading size |
| h5 | color: #ff00ff font-size : 18px |
Magenta sub-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-classic1 | background-color: #ffffff | White background for classic descents in ancestry tables that lead to me. Not used now. |
| .background-classic2 | background-color: #ffff99 | Pale yellow background for classic descents in ancestry tables that lead to me. Not used now. |
| .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: #ffffff | White background for descent in ancestry tables not leading to me. |
| .background-notme2 | background-color: #ddffdd | Pale red 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. |
| table.left | margin-left : 0 | Table left aligned, sometines used for holding block quotes |
| table.width200 | width : 200px | For tables that just require a different width, there is a class for each width |
| table.width260 | width : 260px | |
| table.popular | width : 300px | Additional to other CSS further down |
| table.width400 | width : 400px | |
| table.width480 | width : 480px | |
| 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. |
| table.popular tbody th | font-weight : normal; background-color : transparent; text-align : right; |
"Most popular product to review" detail headings need normal font and same background as corresponding detail values, right-aligned. |
| tbody.stats td | text-align : right; | Numeric data in stats tables |
| tbody.stats th tbody.vine th |
font-weight : normal; background-color : transparent; text-align : left; |
Stats and Vine detail headings need normal font and same background as corresponding detail values,left aligned. |
| 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.top | margin-left : 0px; margin-right : 0px; margin-top : 0px; |
Keep top margin only. Used in terminology table. |
| p.central | margin-left : 0px; margin-right : 0px; margin-top : 0px; margin-bottom : 0px; |
No margins. Used in terminology table. |
| p.bottom | margin-left : 0px; margin-right : 0px; margin-bottom : 0px; |
Keep bottom margin only. Used in terminology table. |
| 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.h1upper | text-align : center; color : #ff0000; font-size : 18px; font-style : bold; margin-bottom : 1px; |
First line of multi-line main heading, avoiding need for standard h1 with line break. |
| p.h1lower | text-align : right color : #ff0000; font-size : 18px; font-style : bold; margin-top : 1px; |
Last line of multi-line main heading. |
| p.h3upper | text-align : center; font-size : 16px; font-style : bold; margin-bottom : 1px; |
First line of multi-line detail 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 detail 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. |
| table.terminology td:first-child | width : 170px | First column of terminology table |
| table.cvtechnical td:first-child | width : 90px | CV technical detail headings |
| table.cvachieve th | text-align : left | CV achievement detail headings |
| td.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. |
| li.top | margin-top : 0px | No space before top line in most but not all lists, otherwise I could have used first-child. |
| ol.lower-alpha | list-style-type : lower-alpha | List has lower case letters instead of numbers. |
| ul.nosymbol | list-style-type : none | List has no symbols. |
| ul.disc | list-style-type : disc | List has solid disc symbols. |
| ul.circle | list-style-type : circle | List has ring symbols, or circles as the software calls them. |
| ul.disc | list-style-type : square | List has solid square symbols. |
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 |
No comments:
Post a Comment