Connections Template

I’ve put the current contents of my template files up on this page. You’ll always be able to find the latest version of my templates there.

WYSIWYG comments.

Editing comments in IE is annoying - until just now I had a width:100%; clause in my StyleSheet, and this somehow caused IE to resize the box every time a character is typed. Now, you lose access to the scrollbar, but it doesn’t do the jumping thing. It actually got me thinking about how to implement WYSIWYG commenting. Instead of typing into a TextArea form, you type into a div. This div doesn’t allow for HTML to be actually typed in, but does have the quicktags. Any HTML code is actually converted to how it would display. Pressing any of the quicktags formats the text automatically. The raw text (actually, the raw HTML) is also stored in a hidden textarea, and this is what is sent to the server. This kills a few birds with one stone:

  • Only allows HTML that is ‘approved’ to be typed in.
  • Fixes any problems with Safari and inability to find cursor position in textarea (which has been fixed in recent builds of the WebKit, btw).
  • Removes the need for a Comment Preview box.

Potential problems that may appear (this may be extended):

  • Clicking a buttons removes the selection from the div - no idea where to insert the formatting tags,
  • Doesn’t seem to be a way to make just any part of the page editable.

Changing FavIcon

I’ll do this later, but to change the favicon (the one that newer browsers show next to the URI), you need to include the following in your Main Page template. <link rel="shortcut icon" href="insert path of file here" /> Probably you should put it near the top. I’d suggest uploading a file called favicon.gif, and then making the code: <link rel="shortcut icon" href="/images/favicon.gif" /> That way you can change it by uploading another one with the same name later. Favicons should be 16x16 pixels, or possibly up to 32x32 for display in a _Favourites _menu.

CSS Lists

Lists are useful in Template design - for instance, the Navigation links at the top of this blog are done with links, and CSS to position them, and remove the bullets, and so on. The code that handles it:

 1    #topnav 
 2    {
 3    	list-style:none;
 4    	font-size:0.9em;
 5    	margin:0 auto;	
 6    	padding:12px 20px 0 0;
 7    	text-align:right;	
 8    	font-family:Verdana, Arial, Sans-Serif;
 9    }
10    #topnav li 
11    {
12    	list-style:none;
13    	display:inline;
14    	padding:0;
15    	margin:0;
16    	font-weight:bold;
17    }

The important bits are the list-style:none;, text-align:right; and display:inline; clauses. They remove bullets, place the text on the right, and make them appear on the same line. What I’d really like to be able to do is have the CSS put in the ‘pipe’ symbol (|) automatically. That is, all the template user needs to do is put a list item in, and it puts | between each item. This doesn’t seem to be possible with CSS, or at least, I can’t figure out how to do it.

WordPress Template Help

I get quite a few people emailing or leaving comments asking for help with Templates and so on for WordPress, or issues with Blogsome that I’ve dealt with, but don’t appear in the forums.

Matt, Can you give a newbie some advice about installing the Connections theme? In the top nav menu there are five buttons: Home, About, Archives, Links, and Contacts. I can’t figure out how to make these links work. The Home button works ok, but not the others. My feeling is that I need to edit the links in header.php, but what do I put? Do I need to create pages first? If so, how do I do this? Also, can you tell me how to add a calendar like you have on your site? Thanks for all your help, Caitlin

It won’t matter if you have Pages created or not - and you can do this with Posts, or any URI. If you do have a Page or Pages created, you can then use the URI the Dashboard gives you in one of the later steps. To create a Page, use the ‘Write - Write Page’ menu in the Dashboard. Pages can not currently be created from ecto, or other off-line editing tools. Note that Pages use a different template file from posts, so if you are using Blogsome, you will have to hand code any markup in your Pages, they don’t just add the Page content into the {content} section. You will need to edit your Template to change the links at the top of the Connections Theme. If you are using Blogsome, or any WordPress Multi-User system, the changes will need to be made in the Main Page (index.html) template. Otherwise, under standard WordPress, the changes will indeed need to be in the header.php file. Either way, open the relevant file, and find the section that begins with <ul id="topnav"> There will be a series of list items (probably on seperate lines, although the Stylesheet will place them all on the same line). Each list item contains a URI, and the Link Text. Connections also has a seperator, of the Unix Pipe character: |. Each item you want in your navbar must appear, in the order you want them in your list of list items. Mine looks like the following: ` <li>Home </li> <li>About </li> <li>{wp_loginout} </li> <li> {wp_register} </li> <li> RSS </li> <li>Contact </li> ` Notice that mine has a whole heap of curly brackets - that’s because I use Blogsome, and they have Smarty Tags instead of raw PHP code. It’s taken me a while to get used to them, but they are kind of cool. If you are using standard WordPress, you’ll need to replace them with the proper PHP code - go to the WordPress Codex for examples of how they work. Basically, the curly braces need to be replaced by <?php and ?>; and the arguments are not named, are in parenthesis, and commands are followed by a semi-colon. For example, the first entry, Home should be: <li><a href="><?php bloginfo('url'); ?>" id="navHome" title="Posted Recently" accesskey="h">Home </a>|</li> Finally, the calendar is really easy to implement. PHP Code: <?php get_calendar(); ?> Smarty Code: {get_calendar} You can also alter your Stylesheet to modify the display styles of the calendar - look at the Source Code for your page to see what the classes are called. I also received the following question via email from Peter Valentino:

I just dunno who or where to turn to.. The blogsome forum doesnt help at all. I usually have long blog entry and want to cut it to the first small paragraphs view in the index page, and use that excerpt/more feature to read the rest. The trouble is i dunno how to do it. I have filled the excerpt box for every post and checked the view the excerpt option on the dashboard cpanel, but it still doesnt work. I’m thinking that prolly I delete the html tag for the feature in index.php, and if it’s true, I dunno where to find the original tag. This is also my problem: where can I go to easily get the original coding for each default templates provided by blogsome? Thanks for your help, Peter

This one’s easy - when posting using the Dashboard, locate the cursor where you want the break to be, and press the little more button from the Quicktags. Or, type in <!--more-->. If you are using ecto, typing into the first box will create text before the more seperator, the second box will be after. The trick here is that it’s not an excerpt or summary, but more of a teaser. I recall that it’s also possible to change the text that is displayed, but I’ll leave that as an exercise for the reader (hint: this may not work in Blogsome, IIRC). I’m more than happy to help with other issues, but be aware that I’ll post responses to my site, in preference to email, as this might help someone else out in the future.

I'm a CSS Star! (Almost)

I’ve played around with CSS for the last couple of hours, and have finally got my RSS/RDF links to be rendered like icons (with a border and so on). It took me ages to figure it out, but I was only able to change the background colour, until I removed the <li> tags from the links - that was overriding the ability to change border and text colour. I then spent a couple more hours trying to make the same thing happen for the Search and Post Comment buttons, before discovering that Safari, and Camino, don’t support changing the look of form buttons. And I’m not going to bear using IE to test it under…I’ll live with the images I’ve made (for now). What would be cool is to make all of the elements of Connections work in CSS - like the top and bottom bits of the sidebar boxes, and so forth. Well, the bits than can be made by CSS, anyway.

RSS icons as CSS code.

I found a few sites around that give instructions on how to use CSS code to create those classy RSS icons. Using CSS is good for a couple of reasons - if you decide to change the style you only need to do it once, even if the code was used in a post, or page, not just a template. Secondly, some people live some of their life behind crappy corporate firewalls that block images from certain sources, and people using text-only browsers, or using text-to-speech features, will still be able to view what it was you intended them to see. This is what I have in my stylesheet:

 1    .rss
 2    {
 3        color:#FFFFFF;
 4        background-color:#FF6600;
 5        border-color:#FF6600;
 6        border-style:outset;
 7        text-decoration:none;
 8        margin:2em 0em 0em 0em;
 9        padding:0em 0.5em 0em 0.5em;
10        border-width:1px;
11        font-family:Arial;
12        font-size:0.8em;
13    }
14    .rss:hover
15    {
16        background-color:#FF9900;
17    }
18    .rss:active
19    {
20        border-style:inset;
21    }

Then, whenever or wherever you have a link that needs to look like an RSS button, just use class="rss" inside the a tag, and it will look classy! It is also possible to format a whole paragraph using a p tag with the class="rss". If it doesn’t work, then it’s likely that another CSS statement is vying with the class tag for precedence - for instance if your links are inside the sidebar, as part of a list, then the list, sidebar and a tags from the CSS may take precedence. In my case, removing the links from the list item (leaving them in the unordered list to keep positioning) fixed the problem. Note: I was originally using #rss in the stylesheet, and id="rss" in the pages, but should have been using .rss and class="rss" to be more compatible. The one I was using is intended that each tag appears only once in a document, I think.

Images other than inline.

000 0020 Is it possible to have images not inline in ecto - that is, spanning more than one line? In short, no. To do it like this page is, you’ll need to hand edit the HTML code (which almost removes the beauty of ecto), and put in a table. Just placing the photo and text inside a <table>, and <tr>, but with the image in one <td>, and the text in another <td> will do it. Update: A better method can be found at Using CSS to replace Tables.

Resizable Text Area

I found an old entry on Peter B’s site about making text entry areas resizable, and thought I might implement it on my site. It’s not working yet, but this is more of a reminder for me to do it…

Hilighted Comments

I’ve noticed a couple of blogs that hilight the comments made by particular users, mainly the blog owner, but in one case there were two writers, male and female that had blue and pink comment boxes respectively, and everyone else had another colour. I might implement this for another blog I’m working on, to do with a Touch team I’m Assistant Coach of. (South Australia Mens Open). I’ll also probably implement it here, at least for testing purposes.