Instructions on how to convert a template to N.nu

These instructions are written for those employed or hired by N.nu to convert templates but others might find use of it as well. It should be noted that N.nu has a very strict standard for new templates being added. If you are a regular user of N.nu that want instructions to make a single template just for you, follow these instructions instead.

PS! This article has not been updated in several years.

Preparations

  1. Download the files here (updated february 14, 2012)
  2. Take a look at the folder twentyten. This is how the template system works in N.nu. There is a template.php file, a style.css file and an optional default-header.jpg file. And of course images related to the CSS.
  3. Upload the files to your own hosting and you can see the template when you work with it like this:
    http://www.yourdomain.com/convert-templates/?template=twentyten.
    This template is just there for you to see how it looks like.
  4. Later change twentyten to another folder name to see it, like this
    http://www.yourdomain.com/convert-templates/?template=NewTemplate
  5. I recommend you to work with FireBug so that you can edit the CSS in real time.

Prepare the new folder

  1. Make a new folder for the template inside the convert-templates folder. The name has to be the same name as the template without spaces or special characthers.
    Example of template folder names used now in N.nu: andreas03, BasicLanding, ChocoTheme, tabit.
  2. If WordPress, tumblr or other blog CMS: open up the theme in a demo page, click on the link of a post so you see only that post, click to view source and copy and paste the source code to a program such as Notepad, Editplus or whatever program you are using. Save this as template.php in the new template folder.
  3. Download the files of the template. If this was not WordPress, tumblr or other blog CMS: rename index.html to template.php.

Changes in HTML

  1. Replace the entire head with the following:
    
    <head>
    	<title><?php title_tag(); ?></title>
    	<link rel="stylesheet" href="<?php css_file(); ?>" type="text/css" />
    	<?php meta_tags(); ?>
    </head>
    
  2. If there is a CSS reset from Eric Meyer you can delete all that (inside the CSS file, @import or external file) and instead place this one before other style sheets in the head:
    
    <link rel="stylesheet" href="http://staticjw.com/other/ericmeyerreset.css" type="text/css" />
    
  3. Replace the content of the H1 or H2 or which ones that is the website title with <?php site_title(); ?>
  4. Change any links to the home page from for example href="index.html" to href="<?php home_url(); ?>".
  5. Replace the website description/tagline with <?php site_description(); ?>
  6. Replace the entire navigation <ul> with <?php navigation_ul(); ?>.
    Example of HTML that will be generated (almost always works perfectly):

    
    <ul id="nav">
    	<li><a href="http://www.username.n.nu/">Home</a></li>
    	<li><a href="http://www.username.n.nu/photos">Photos</a></li>
    	<li id="active"><a>Services</a></li>
    	<li><a href="http://www.username.n.nu/about-us">About us</a></li>
    	<li><a href="http://www.username.n.nu/contact-us">Contact us</a></li>
    </ul>
    
  7. Replace the the title of the page (page, not site) with <?php page_title(); ?>. If this was not inside an H1 element it has to be changed to be that. Of course in that case chage the style.css as well.
  8. Delete the temporary content of the page that is there and place <?php content(); ?> in it's place.
  9. Remove HTML related to comments
  10. If WordPress: If the page heading have a link then remove it. There is no need to have the article linking to itself.
  11. If WordPress: Remove post meta information such as author and date of post.
  12. Remove the content of the column/fixed textbox with <?php fixed_textbox(); ?>. If there is no column and no fixed text area then don't do this.
  13. Remove any search box that could be there.
  14. Remove the copyright notice but not any links to design credit and replace with <?php copyright(); ?>
  15. Right before the </body> add: <?php statistics(); ?>. This is mandatory as it does not only control statistics but important login function. Don't forget this.
  16. If WordPress: remove unnecessary markup in the sidebar. Usually there are a lot of things not used in N.nu such as widgets, nested lists and so on in this place.
  17. If title attributes on links with no useful information such as "Permalink to XX" or just some URL as title then remove those.
  18. Optional: If you for whatever reason want to have a link that points to the existing page such as a permalink then use the code <?php page_url(); ?> which will print out the current URL.

Custom header

Users love to have an custom header image so I would like to have that included for new templates if possible. The width of the image must to be 940px and if you have a default image it needs to have the file name default-header.jpg.

Use the following <?php header_image_if_exists(); ?> or <?php header_image_with_default(); ?> if you have a nice looking default-header.jpg fitting for the template.

The image will be wrapped around <div id="header-img"></div> meaning that you can style it with #header-img {}.

You can download nice headers from this page that we can use for free. But be sure to download in the size 1024px and then resize to 940px.

If you use a default-header.jpg then make sure it is less than 80kb big but still good quality.

Changes in CSS

Open up the CSS file and do the changes below. It is normal that you have to correct back and forth a few times before everything is as you want it.

  1. Make sure that it is h4 that are specially styled in the sidebar and not for example h2.
  2. Remove @imports from the css file such as @import url('library/layout.css') and instead copy and paste the content of those CSS files inside the CSS on the same place.
  3. If WordPress: In the CSS change all occurrences of:
    li.current_page_item a and li.current-menu-item a to li#active a
  4. For the contact form N.nu uses #contact-form instead of for example #commentform and #contact-button for the button instead of for example #submit. So change this in the css.
  5. If WordPress: Usually there are a lot of things in the sidebar not used in N.nu such as widgets, nested lists and so on in this place. This can be a bit tricky but I give you an example.

    Before:

    
    	/*-----widgets*/
    .widget {font-size:1.2em; line-height:1.4166; margin:0 0 1.25em; padding:0.4166em 5px 0.4166em 5px;}
    .widget li {margin:0.25em 0; }
    .widget li li {padding:0 0 0 15px;}
    .widgettitle {margin-bottom:3px; line-height:1.3; color:#555; font-weight:bold;}
    .widget_recent_entries li, .widget_recent_comments li {background: url(images/pp-bullet.gif) 0 0.53em no-repeat; padding:0 0 0 15px;}
    .postform {width:100%;}
    

    After:

    
    	/*-----widgets*/
    .sidebar {font-size:1.2em; line-height:1.4166; margin:0 0 1.25em; padding:0.4166em 5px 0.4166em 5px;}
    .sidebar li {margin:0.25em 0;background: url(images/pp-bullet.gif) 0 0.53em no-repeat; padding:0 0 0 15px;}
    .sidebar h4 {margin-bottom:3px; line-height:1.3em; color:#555; font-weight:bold;font-size:1.3em;margin-top:20px;}
    
  6. Remove CSS from style.css which is not used in the template.php and remove ID's and class names in template.php that is not used in style.css.

    If you are converting from WordPress you have to remove the following from the CSS:
    
    .commentlist
    .comment-author
    .nocomments
    +other CSS related to comments
    #wp-calendar
    .wp-caption
    #wp_tag_cloud
    .postmetadata
    .wp-smiley
    .alignright
    .alignleft
    .aligncenter
    .gallery
    .sticky
    .bypostauthor
    .attachment
    .format-aside
    .error404
    .size-thumbnail
    .highlight
    .nav-next
    #nav-above
    #nav-above
    +css for next and previous
    

    And the following from template.php:

    
    id="post-9"
    category-portfolio 
    format-standard
    type-post
    hentry ? (maybe not, check if used in the css)
    category-
    tag-
    format-
    status-publish
    rel="bookmark"
    div's related to next and previous
    
  7. Search the CSS file for text-align:justify; and verify that it is used in a correct way. Normally this has to be removed.
  8. If the contact form does not look well on the site you can use for example this CSS:
    
    fieldset#contact-form {margin:20px 0px 20px 10px;padding:10px;color:#000;width:380px;background:#eee;border:2px solid #aaa;}
    fieldset#contact-form label {font-size:13px;}
    fieldset#contact-form input {height:20px;font-size:15px;margin-bottom:15px;padding:3px;}
    fieldset#contact-form textarea {font-size:15px;margin-bottom:15px;width:360px;padding:3px;}
    fieldset#contact-form #contact-button {font-size:14px;height:30px;margin-left:30px;}
    input:focus, textarea:focus {background:#fff;border:1px solid #555;}
    
  9. Correct the colors and size of the contact form so that it is suitable for the template.
  10. If there is no style on the active navigation link you can use for example this CSS:
    
    ul#nav #active a {text-decoration:underline;}
    
  11. Make sure that the CSS file does not contain any url('something') or url("something") but just url(something). This is very important!
  12. Follow Common CSS mistakes and their solutions and apply it. Don't skip this.

    Here is a checklist:

    - If a CSS reset is used make sure that nothing is missing a style
    - h1-h4 has correct margins. Margin above has to be bigger than margin below.
    - Images in the main content area has a good styling
    - The body text is not too small to read
    - The line height of the body text is not forgotten and is properly set.
    - The line length of the body text is too long.
    - text-align: justify is not used on places with small line length.
    - The blockquote element has been styled to look nice.
    - The li element in the main text area and in the columnd has been properly styled with for example margin-bottom:7px;.
    - If there is a border on all links there is a solution for linked images, see the article.
    - If the template uses a liquid layout there is a solution with max-width, see the article.
    - There is a difference between visited and not visited links.
    - All occurance of text-transform: lowercase; has been removed.

Your final steps

  1. Preview the template to make sure it is all very good:
    http://www.yourdomain.com/convert-templates/?template=name.
    Change twentyten to the folder name you want to preview.
  2. Make all the corrections until it is perfect.
  3. Send the above links for the templates for me to review via email jim-at-jimwestergren.com
  4. I will send back to you a list with corrections for do. Do these and send me back again.

Final steps to be done by Jim Westergren:

  1. Upload via FTP, test and correct (or send back with a list) until perfect. Use http://www.example.n.nu/?template=nameoffolder for testing.
  2. When the CSS is perfect then minify it here but keep the original as style-nomin.css
  3. When perfect take a screenshot from the example site. crop, rezise to 150 height and then rezise manually so that the width is 200. Save as nameoffolder.jpg with quality 95 and upload to staticjw.com/n/template-screenshots/.
  4. Update include/mu-templates.php