I'm getting in the blog-format-changing mood again. I've had this particular skin since April of last year. Some thoughts on what's likely to change:

• Variable font size (browser driven, not set to particular pixils).
• Probably a sans serif font. Leaning toward Trebuchet.
• A color background of some sort. Probably still white or pale posting areas, perhaps boxed.
• Less focus on the break between dates.
• Maybe doing away with the mini-icons at the bottom of each post; more texty?

Things unlikely to change:

• The fundamental layout -- mugshot column, text column, sidebar column.
  
• The current recent comments/trackbacks stuff.

Thoughts? Opinions? Kudos? Brickbats?

UPDATE: I mention it only to (a) get feedback on the design, and (b) warn in advance if something goes flooey on the main page. I'll be using a test index and test CSS file, but I have a lot of stuff that is in MTInclude templates that may need to be tweaked during the process.

Filed under :: Blogging
Link · Print · Edit · TR/G

Doing floating columns on both the left and right doesn't render properly in Mozilla browsers.

Your comment format buttons are also not portable to Mozilla (or Mac Safari). Typepad has portable Javascript for its formatting buttons. It looks like this:

<script type="text/javascript">
<!--
var canFormat = 0;
if (document.selection)
canFormat = 1;
var ua = navigator.userAgent;
if (ua.indexOf('Gecko') >= 0 && ua.indexOf('Safari') canFormat = 1;

function getSelection (e) {
if (document.selection)
return document.selection.createRange().text;
else {
var length = e.textLength;
var start = e.selectionStart;
var end = e.selectionEnd;
if (end == 1 || end == 2) end = length;
return e.value.substring(start, end);
}
}

function setSelection (e, v) {
if (document.selection)
document.selection.createRange().text = v;
else {
var length = e.textLength;
var start = e.selectionStart;
var end = e.selectionEnd;
if (end == 1 || end == 2) end = length;
e.value = e.value.substring(0, start) + v + e.value.substr(end, length);
}
}

function formatStr (e, v) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
setSelection(e, '<' + v + '>' + str + '</' + v + '>');
return false;
}

function insertLink (e, isMail) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
var my_link = isMail ? prompt('Enter email address:') : prompt('Enter URL:', 'http://');
if (isMail) my_link = 'mailto:' + my_link;
if (my_link != null)
setSelection(e, '<a href="' + my_link + '">' + str + '');
return false;
}

function mtShortCuts () {
if (event.ctrlKey != true) return;
if (event.keyCode == 1) insertLink();
if (event.keyCode == 2) formatStr('strong');
if (event.keyCode == 9) formatStr('em');
if (event.keyCode == 21) formatStr('u');
}

onkeypress = "mtShortCuts()";
// -->
</script>
...

<script type="text/javascript">
if (canFormat) {
with (document) {
write('<div style="float: right;">');
write('<a title="Bold" href="#" onclick="return formatStr(document.entry_form.text, \'strong\')"><img src="https://www.typepad.com/app-static/images/weblog/button-bold.gif" width="22" height="19" alt="Bold" border="0" /></a>');
write('<a title="Italic" href="#" onclick="return formatStr(document.entry_form.text, \'em\')"><img src="https://www.typepad.com/app-static/images/weblog/button-italic.gif" width="22" height="19" alt="Italic" border="0" />');
write('<a title="Underline" href="#" onclick="return formatStr(document.entry_form.text, \'u\')"><img src="https://www.typepad.com/app-static/images/weblog/button-underline.gif" width="22" height="19" alt="Underline" border="0" /></a>');
write('<a title="Insert Link" href="#" onclick="return insertLink(document.entry_form.text)"><img src="https://www.typepad.com/app-static/images/weblog/button-link.gif" width="22" height="19" alt="Insert Link" border="0" /></a>');
write('<a title="Insert Email Link" href="#" onclick="return insertLink(document.entry_form.text, 1)"><img src="https://www.typepad.com/app-static/images/weblog/button-mail.gif" width="22" height="19" alt="Insert Email Link" border="0" /></a>');
write('<a title="Quoted Passage" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="https://www.typepad.com/app-static/images/weblog/button-quote.gif" width="20" height="19" alt="Quoted Passage" border="0" /></a>');
write('</div>');
}
}
</script>

Huh. Okay, good feedback. I'll insert formatting button change somewhere along the line.

Have to consider the floating columns thang. Damn, browser incompatability issues are irksome.

Variable fonts, please. That way I can avoid getting a new prescription for another year...

:)

See bullet #1. :-)