Blog Tips and Hints
From CastleCopsWiki
| Caution | The article below is currently in beta and has not been reviewed for factual errors. |
Insert non-formatted text hereBlogging With Movable Type
The purpose of this article is to provide basic info on how to use Movable Type. It mainly mainly how to customize the look of it but also provides a some useful reference links.
Contents |
[edit] Learning Movable Type and Making Aesthetic Changes
First off, this article doesn't cover installation however there are some good tips at the Learning Movable Type site.
Once installed, MT can still be a bit intimidating. Apparently it is one of the most difficult blogging platforms to work with. On the plus side however, it is one of the most versatile. Almost anything can be with it -- if time is taken to learn. Start by checking out the main menu and seeing what the various menu options do. If something isn't understood, look at the help file, or better yet, go to the Learning Movable Type site. The site is nicely broken down into sections that efficiently teach the various elements that make up a Movable Type Blog.
In the sidebar, check out the Beginner Tips to learn what the templates do, change things such as the date format, and maintain a blog.
Moving on to the Style section, it shows how to change basic design elements like fonts and colours, also how to add background patterns and header images. That's nice to know when wanting to make the first few changes from boring blue and grey to something a little more appealing.
Be sure to check out the Font Sizes page. Notice that it explains the various sections of a blog. These correspond to sections in the stylesheet that control changes to colours, borders, etc., just by knowing where to look. Also look at Colors - Background, Banner, Headline, and Font page, which deals specifically with changing colours if using the older stylesheets.
Speaking of older stylesheets, even if using MT 3.2, the older stylesheets can still be used. The newer ones are a bit intimidating, mainly because they combine Six Apart’s 3 blogging platforms into one stylesheet. If it's preferred to get a couple of bare bones templates to work with, check out the MT3.2 - Bare Essentials Templates page. Just be sure to read the whole article since there may be a caveat or two in there. Just sticking to the 3.16 stylesheet is fine as well.
Want to create an “About” page or keep a blog entry at the top ? Check out the Tips and Tricks section.
All in all, Learning Movable Type is the place to start learning how to maintain and make changes to a Movable Type Blog.
[edit] Advancing to Color Schemes
There are hundreds of web sites out there that teach colour theory if it's desired to learn how to create a blog with harmonious colours. One favourite is Web Whirlers - Colors on the Web. It’s concise, easy to understand, and offers the option to spin the “colour wheel” to choose a random colour scheme.
Also check out Color Schemer Online or ColorMatch 5K. Just enter the HEX code of a colour and they’ll find matching colours. The schemes can also be lightened and darkened to suit taste.
See a desired colour but don’t know its HEX code or RGB values?
Download Colour Detector. It’s a great little tool that will reveal the HEX code and RGB values of any colour on the screen.
Looking for some inspiration?
Look no further than the Zen Garden [1]. There are some awesome designs that’ll dazzle the senses and foster an itch for that new design.
[edit] Places to Go for Help
[edit] Movable Type Forum
An excellent forum and the people here are usually quite happy to answer any questions. They’re not designers though so don’t expect any help with style ideas. Many bloggers go to this forum when something wasn’t working as it should.
[edit] W3C Markup Validation Service
This is where to go to validate HTML and CSS. Be sure to read the FAQs; there’s info in there about how strict validation can be and what to do if a blog doesn’t validate (Yeah, it happens).
[edit] Six Apart
The makers of Movable Type blogs as well as a few others. The six apart site is a handy reference source although I found it a bit difficult to navigate for a first-timer. The only time I’ve had recourse to come to the site was to download default templates; they do however have some nice default styles that can be found here.
The Movable Type user manual can also be consulted here. (Warning: very technical, not for beginners).
[edit] A List Apart
Another good site for info on making various changes, although I haven’t used it much so cannot comment on it more than that.
[edit] Blog promotion sites
There are plenty of blog promotion sites out there, BlogExplosion, BlogMad, etc. Join one; the members are friendly and always happy to offer whatever advice they can.
[edit] Let's Get Blogging!
Of course, blogging is about writing so no doubt you're itching to write something!!
- Just click on the "Create New Entry on this Weblog" link at the top of the main menu and the blog entry screen pops up.
- Give the post a title and type the article in the "Entry Body" screen. If it's preferred readers not have to scroll down to read the entry, continue the post (say after the first paragraph) in the "Extended Entry" screen.
- Regular HTML can be used to format entries, but the easiest is to have a set style defined in the stylesheet, then just type away.
- Go to the preview screen to view the article and, when ready, change the "Post Status" (at the bottom of the page) to published and save the post.
Happy Blogging!!
Tips:
A blog is primarily divided into a body and a container. Look for these divisions in the stylesheets. The body is the background and the container is the main part of the blog. Within the container the main divisions are the banner, sidebar (lablelled "right" or "left", depending what side it's on, both if the container has two sidebars) and the center (where all posting is done).
Become familiar with the various divisions and don't be afraid to change colours and fonts just to see how they look. Just back up the most recent stylesheet first so it can be reverted to if things go wrong. They can be saved as word documents, which works fine for copying and pasting code back in.
The first thing you'll probably want to do is change your blog's colours and add some borders. I will help if you have Learning Movable Type's colour page open for reference, so here is the link again:
Now here is the link to the Sandbox, which uses red, white and blue as it's colours:
And finally, here is the stylesheet used for The Sandbox. Look for the "color" and "border" properties.
body { margin: 0px 0px 00px 0px;
background-color: #000099;
text-align: center;}
a { text-decoration: underline;
}
a:link { color: #000099; }
a:visited { color: #8fAbbE; }
a:active { color: #ff0000; }
a:hover { color: #ff0000; }
h1, h2, h3 { margin: 0px; padding: 0px; font-weight: normal; }
- container {
line-height: 140%; margin-right: auto; margin-left: auto; text-align: left; padding: 0px; width: 700px; background-color: #ffffff; border: 6px double #ff0000;
}
- banner {
font-family: Verdana, Arial, sans-serif; color: #ffffff;
background-color: #000099;
border-top: 3px double #ff0000; border-left: 3px double #ff0000; border-right: 3px double #ff0000; border-bottom: 6px double #ff0000; text-align: left; padding: 15px; height: 39px; }
a#banner-img { display: none; }
- banner a {
text-decoration: none;
color: #ffffff;
}
- banner h1 {
font-size: xx-large;
}
- banner h2 {
font-size: small; }
- center {
float: left; width: 500px; overflow: hidden;
}
.content { padding: 15px 15px 5px 15px; color: #000099; font-family: Verdana, Arial, sans-serif; font-size: x-small; }
- right {
float: left; width: 200px; overflow: hidden; }
.content p { color: #000099; font-family: Verdana, Arial, sans-serif; font-size: x-small; font-weight: normal; line-height: 150%; text-align: left; margin-bottom: 10px; }
.content blockquote { line-height: 150%; }
.content li { line-height: 150%; }
.content h2 { color: #000099; font-family: Verdana, Arial, sans-serif; font-size: x-small; text-align: left; font-weight: bold; margin-bottom: 10px;
}
.content h3 { color: #000099;
font-family: Verdana, Arial, sans-serif;
font-size: small; text-align: left; font-weight: bold; margin-bottom: 10px;
}
.content p.posted { color: #000099; font-family: Verdana, Arial, sans-serif; font-size: x-small; border-top: 1px solid #1b6Ebb; text-align: left; margin-bottom: 25px; line-height: normal; padding: 3px; }
.sidebar { padding: 15px; }
- calendar {
line-height: 140%;
color: #000099; font-family: Verdana, Arial, sans-serif; font-size: x-small;
padding: 2px;
text-align: center; margin-bottom: 30px; }
- calendar table {
padding: 2px; border-collapse: collapse; border: 0px; width: 100%; }
- calendar caption {
color: #ffffff;
background-color: #000099;
border: 3px solid #FF0000;
font-family: Verdana, Arial, sans-serif; font-size: x-small; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: .3em; }
- calendar th {
text-align: center; font-weight: normal; }
- calendar td {
text-align: center; }
.sidebar h2 { color: #ffffff;
background-color: #000099;
border: 3px solid #ff0000;
font-family: Verdana, Arial, sans-serif;
font-size: x-small; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: .3em; }
.sidebar ul { padding-left: 0px; margin: 0px; margin-bottom: 30px; }
.sidebar li { color: #000099; font-family: Verdana, Arial, sans-serif; font-size: x-small; text-align: left; line-height: 150%; margin-top: 10px; list-style-type: none; }
.sidebar img { border: 3px solid #f8f9d8; }
.photo { text-align: left; margin-bottom: 20px; }
.link-note { font-family: Verdana, Arial, sans-serif; font-size: x-small; line-height: 150%; text-align: left; padding: 2px; margin-bottom: 15px; }
- powered {
font-family: Verdana, Arial, sans-serif; font-size: x-small; line-height: 150%; text-align: left; color: #000099; margin-top: 50px; }
- comment-data {
float: left; width: 180px; padding-right: 15px; margin-right: 15px; text-align: left; border-right: 1px dotted #bbb; }
textarea[id="comment-text"] { width: 80%; }
