Installations instructions are included, click here to download Electric Lime Theme

The BASIC smilies have to be entered into a post manually, the WYSIWYG are available if you have the WYSIWYG plug-in activated, they are entered into a post from a pop up window.

BASIC code smiley :smile: :eek: :cool: :neutral: :lol: :cry: :idea: :evil: :twisted: :arrow: :grin: :shock: :mad: :wink: :roll: :sad: :razz: :oops: :?: :!: :mrgreen:

WYSIWYG

Following the improvements to our comments form a few days ago, I noticed that although it was better than it had been before, it still did not validate with the W3C.

I then made a few alterations to the comments.html page and it now passes the W3C validator. Our doctype, by the way, is xHTML 1.0 Strict.

Here’s the code that is now used on our comments.html file. Thanks to Blogsome forum for yielding info on how to make the Blogsome captcha validate.

<div id="comms">
<h2 id="comments">{comments_number zero="Comments" one="1 Comment" more="% Comments"}
{if $post->comment_status == 'open'}
<a href="#postcomment" title="Leave a comment" tabindex="1">&raquo;</a>
{/if}
</h2>
{if $comments != ''}
<ol id="commentlist">
{foreach from=$comments key=key item=comment}
{globalvar var='comment' value=$comment}
<li id="comment-{comment_ID}">
<cite>{comment_type} {_e text="on"} {comment_date} @ <a href="#comment-{comment_ID}">{comment_time}</a> {edit_comment_link link='Edit This' before=' |'}<br />{_e text="by"} {comment_author_link},<br />
</cite>
{comment_text}
</li>
{/foreach}
</ol>
{else} <!-- this is displayed if there are no comments so far -->
<p>{_e text="No comments yet."}</p>
{/if}
<h2 id="postcomment">{_e text="Leave a comment"}</h2>
{if 'open' == $post->comment_status}
<p>{_e text="Line and paragraph breaks automatic, e-mail address never displayed, <acronym title='Hypertext Markup Language'>HTML</acronym> allowed:"} <code>{allowed_tags}</code></p>
<p><b>Note:</b>Your comment will be moderated and will appear as soon as possible. Please do not repost. Thank you for visiting It's All Beta.</p>
<form action="{$siteurl}/wp-comments-post.php" method="post" id="commentform">
<p>
<input type="text" class="text" name="author" id="author" value="{insert name=var var=comment_author}" size="28" tabindex="2" />
<label for="author">{_e text="Name"}</label> {if $req != ''} {_e text='(required)'} {/if}
<input type="hidden" name="comment_post_ID" value="{$post->ID}" />
<input type="hidden" name="redirect_to" value="{$redirect_to}" />
</p>
<p>
<input type="text" class="text" name="email" id="email" value="{insert name=var var=comment_author_email}" size="28" tabindex="3" />
<label for="email">{_e text="E-mail"}</label> {if $req != ''} {_e text='(required)'}{/if}
</p>
<p>
<input type="text" class="text" name="url" id="url" value="{insert name=var var=comment_author_url}" size="28" tabindex="4" />
<label for="url">{_e text="<acronym title='Uniform Resource Identifier'>URI</acronym>"}</label>
</p>
<p>
<label for="comment">{_e text="Your Comment"}</label>
<br />
<textarea name="comment" id="comment" class="text" cols="60" rows="4" tabindex="5"></textarea>
</p>

{if $captcha_image_URL != "" && $blog_user_level == -1}
<p><input type="hidden" name="captcha_secret"
value="{$captcha.secret|escape}"/>
<input type="hidden" name="captcha_creation_time"
value="{$captcha.creation_time|escape}"/>
<input type="hidden" name="captcha_expiry_time"
value="{$captcha.expiry_time|escape}"/>
<input type="hidden" name="captcha_generator"
value="{$captcha.generator|escape}"/>
<input type="hidden" name="site" value="{$captcha.site|escape}"/>
</p>
{/if}
<p>
<input name="submit" type="submit" tabindex="7" value="{_e text="Say It!"}" />
</p>
</form>
{else} <!-- comments are closed -->
<p>{_e text="Sorry, the comment form is closed at this time."}</p>
{/if}
</div>


Here’s another little trick to make things easier for keyboard-only users. Use a:focus when styling your links. This is how we’ve done it:

a:focus,
ul li a:focus{
background-color:#333;
color:#fff;
text-decoration: none;}

Trying tabbing through this page and see how well the links show up. Try tabbing through links on a lot of other blogs and soon you won’t have any idea where you are on the page and what link might be coming up next.

Note: I’m not sure if Internet Explorer 7 is much different from previous versions, but a:focus never worked before. So if IE is still the same as it used to be, just substitute a:active for the same effect.

If you, like me, get around the Net and write your blog posts with the aid of a mouse, it’s easy to forget that a lot of Web users, because of various disabilities, actually cannot use a mouse. So how do they cope? Well, they have to use the keyboard instead.

Now, you might not think this is too difficult. It’s easy enough to learn a few keyboard shortcuts, isn’t it?

However, I found recently that quite a lot of Blogsome blogs have a built-in problem when it comes to catering for keyboard users, and I’m going to tell you two things. Firstly, what the problem is. And secondly, how to fix it. Because the solution is really quite simple.

First, the problem. Keyboard users navigate around your blog by using, among other things, the TAB key. It’s on the left, just above the CAPS LOCK key. Most times you probably only hit it by accident, but for a lot of your visitors the TAB key is an essential tool.

I discovered that if a keyboard user wants to leave a comment on a Blogsome blog, the TAB key would jump over the box on the comments form where users usually put what they want to say.

Why not check your own Blogsome blog and find out if our simple changes could help you? The picture below shows a big red X in the area the TAB key missed out before I made a few alterations to this blog’s code.

Hmm, I thought. This could cause a keyboard user to give up on leaving a comment. Hell, they might not even visit your blog again. Ever. Especially as there would be no way to leave a comment to tell you about your dratted comment form.

Luckily, a few changes to the tabindex numbers in the comments.html file sorted the trouble out. Copy and paste the code below into the comments.html file on your own blog and you too can have a fully accessible, TAB-able comments form just like ours.

<div id="comms">
<h2 id="comments">{comments_number zero="Comments" one="1 Comment" more="% Comments"}
{if $post->comment_status == 'open'}
<a href="#postcomment" title="Leave a comment" tabindex="1">&raquo;</a>
{/if}
</h2>
{if $comments != ''}
<ol id="commentlist">
{foreach from=$comments key=key item=comment}
{globalvar var='comment' value=$comment}
<li id="comment-{comment_ID}">
<cite>{comment_type} {_e text="on"} {comment_date} @ <a href="#comment-{comment_ID}">{comment_time}</a> {edit_comment_link link='Edit This' before=' |'}<br />{_e text="by"} {comment_author_link},<br />
</cite>
{comment_text}
</li>
{/foreach}
</ol>
{else} <!-- this is displayed if there are no comments so far -->
<p>{_e text="No comments yet."}</p>
{/if}
<p style="font-size:0.8em;" tabindex="2">({comments_rss_link link_text='<abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post only.'})</p>
<h2 id="postcomment">{_e text="Leave a comment"}</h2>
{if 'open' == $post->comment_status}
<p>{_e text="Line and paragraph breaks automatic, e-mail address never displayed, <acronym title='Hypertext Markup Language'>HTML</acronym> allowed:"} <code>{allowed_tags}</code></p>
<p><b>Note:</b>Your comment will be moderated and will appear as soon as possible. Please do not repost. </p>
<form action="{$siteurl}/wp-comments-post.php" method="post" id="commentform">
<p>
<input type="text" name="author" id="author" class="textarea" value="{insert name=var var=comment_author}" size="28" tabindex="3" />
<label for="author">{_e text="Name"}</label> {if $req != ''} {_e text='(required)'} {/if}
<input type="hidden" name="comment_post_ID" value="{$post->ID}" />
<input type="hidden" name="redirect_to" value="{$redirect_to}" />
</p>
<p>
<input type="text" name="email" id="email" value="{insert name=var var=comment_author_email}" size="28" tabindex="4" />
<label for="email">{_e text="E-mail"}</label> {if $req != ''} {_e text='(required)'}{/if}
</p>
<p>
<input type="text" name="url" id="url" value="{insert name=var var=comment_author_url}" size="28" tabindex="5" />
<label for="url">{_e text="<acronym title='Uniform Resource Identifier'>URI</acronym>"}</label>
</p>
<p>
<label for="comment">{_e text="Your Comment"}</label>
<br />
<textarea name="comment" id="comment" cols="60" rows="4" tabindex="6"></textarea>
</p>

{if $captcha_image_URL != "" && $blog_user_level == -1}
{$captcha_hidden_form_fields}
<p>
<input type="text" name="captcha_value_typed" tabindex="7">
<img src="{$captcha_image_URL}" align="center"> <br>
Anti-spam measure: please retype the
above text into the box provided.
</p>
{/if}
<p>
<input name="submit" type="submit" tabindex="7" value="{_e text="Say It!"}" />
</p>
</form>
{else} <!-- comments are closed -->
<p>{_e text="Sorry, the comment form is closed at this time."}</p>
{/if}
</div>


The Author

{the_author echo=false}

Use this tag in the post template file to display the author of the post. The name displayed can be changed in Users, Your Profile.

Todays Date

{$smarty.now|date_format:"%A, %B %e, %Y"}

Place in main index file where you want the date to appear. See http://uk2.php.net/date for date strings

Recent Posts (1)

{lastposts posts='10'}
{if $lastposts != ''}
<h2>Most Recent Posts:</h2>
<ul>
{foreach from=$lastposts key=id item=title}
<li><a href="{get_permalink id=$id}"title="{$title}">{$title|truncate:20:"..."}</a></li>
{/foreach}
</ul>
{/if}

Place in main index file, usually in the menu section.

Recent Posts (2)

{lastposts posts='20'}
{counter assign=lp print=0}
{if $lastposts != ''}
<h2>Most Recent Posts</h2>
<ul>
{foreach from=$lastposts key=id item=details}
{counter}
{if $lp > 10}
<li><a href="{get_permalink id=$id}" title="{$details}">
{$details|truncate:30:" ..."}
</a></li>
{/if}
{/foreach}
</ul>
{/if}

Place in main index file, usually in the menu section. This code shows the recent posts, minus the ones of the front page, change the ‘10′ number to the number you have on the frontpage plus one, so if you have 6 posts, change ‘10′ to 7.

Popular Posts

{popularposts}
{if $pposts != ''}
<h2>Popular Posts</h2>
<ul>{*counter assign=pp print=0*}
{foreach from=$pposts key=key item=hits}
<li><a href="{$hits.url}"title="{$hits.title}">{$hits.title|truncate:20:"..."}[{$key}]</a> </li>
{/foreach}
</ul>
{/if}

Place in main index file, usually in the menu section.

Calendar

{get_calendar}

Place in main index file, usually in the menu section.

This is the existing code in the index.html file just under the <body> tag:

{insert name="getreferer"}

For a more precise list of Referers, remove that code and place the following at the bottom of the index.html file as it can affect the margins:

<!-- WordPress Counter - Check the referers list in your backend! -->
<script type="text/javascript" language="JavaScript1.2" src="{$siteurl}/wp-counter.php"></script>
<noscript>
<img width='0' height='0' src="{$siteurl}/wp-counter.php?page=img&amp;loc={$smarty.server.SERVER_NAME}/{$smarty.server.REQUEST_URI}" alt="Stat Counter" border='0' />
</noscript>

Note: the Post Template may vary from theme to theme.

Go to Manage, Files, scroll down and click on Posts.

Change {the_content} to {the_content more_link_text=”TEXT YOU WANT TO USE”}

Use <!–more–> in the post itself, for example after a paragraph of a post.