Jim Westergren
About me, my projects, SEO, Web Development and Personal Development since 2005
"If we did all the things we are capable of, we would literally astound ourselves." - Thomas A. Edison

How to use a WordPress theme or CSS template for your N.nu website

There are thousands of WordPress themes, CSS templates and other website templates available for free to download and use. Just make sure that you abide by the license which normally is to just keep the credit links in the footer. The existing templates already converted and ready to choose with a click can be seen on this page.

Please note that modern WordPress themes are around double as difficult to convert to N.nu than a normal CSS template due to their complexity. If you choose a CSS template make sure that the navigation menu is made as an unordered list (<ul>) which is normally the case.

Recommended sources for download templates:

Requirements to add a template to N.nu

Help

Due to limited resources N.nu cannot offer help or support for this. But there are people with experience in this that can help you if you pay them. For Swedish: SussCreations, English: SussCreations, Spanish: none yet. Want to be here? Contact me.

Examples of custom templates used in N.nu

Guide

Step 1: Changes in HTML

  1. If WordPress: open up the theme in a demo page, click on the link of a post so you see only that post and copy and paste the source code to a program such as Notepad. Download the files as well.
  2. If CSS template: Download the files of the template to your computer.
  3. Replace the entire head with the following:
    <head>
    <title>##title_tag##</title>
    ##meta_tags##
    ##load_css##
    </head>
  4. 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="https://staticjw.com/other/ericmeyerreset.css" type="text/css" />
  5. Sometimes you can see the following in the head:
    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="http://wp-themes.com/wp-content/themes/primepress/library/ie6.css" /><![endif]-->

    "if lte IE 6" means if less than or equals to internet explorer version 6. The solution to include that CSS file even though you can only have 1 CSS file is either to paste the content of that CSS in the head as embedded CSS or keeping it as it is in the head (hotlinking). If embedded in the head it could look like this:

    <!--[if lte IE 6]>
    <style type="text/css">
    Here comes all the CSS for IE6.
    </style>
    <![endif]-->
  6. Replace the content of the H1 or H2 or which ones that is the website title with ##site_title##
  7. Change any links to the home page from for example href="index.html" to href="##home_url##".
  8. Replace the website description/tagline with ##site_description##
  9. Replace the entire navigation <ul> with ##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>
  10. Replace the the title of the page (page, not site) with ##page_title## (should be inside an H1 element)
  11. Delete the temporary content of the page that is there and place ##content## in it's place.
  12. Remove HTML related to comments
  13. If WordPress: If the page heading have a link then remove it. There is no need to have the article linking to itself.
  14. If WordPress: Remove post meta information such as author and date of post.
  15. Remove the content of the column/fixed textbox with ##fixed_textbox##. This is optional.
  16. Remove any search box that could be there.
  17. Remove the copyright notice but not any links to design credit and replace with ##copyright##
  18. Right before the </body> add: ##statistics##. This is mandatory as it does not only control statistics but important login function.
  19. 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.
  20. Optional: If you want to display your e-mail as part of the template such as in the footer use the code ##EMAIL##
  21. 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 ##page_url## which will print out the current URL.
  22. Paste everything in the HTML box.

Changes in CSS

Open up the CSS file and do the changes below and then paste the content of the CSS file into the CSS field. 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. Upload all the images one by one from this page. Change to current location in the CSS. For example from url(../images/stripes.png) to url(https://images.staticjw.com/exa/example/stripes.png)
  6. 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/username/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;}
    
  7. If WordPress: If you want you can delete stuff from the CSS file which is not used in the N.nu such as #wp-calendar, .commentlist, meta information on posts, .wp-caption, css specific for comments and so forth.
  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. If there is no style on the active navigation link you can use for example this CSS:
    
    ul#nav #active a {text-decoration:underline;}
    

Building your own template from scratch

Example of HTML

<!DOCTYPE html>
<html>
<head>
<title>##title_tag##</title>
##meta_tags##<br />##load_css##<br /></head>

<body>
<div id="header">
	<h4><a href="##home_url##">##site_title##</a></h4>
	<h5>##site_description##</h5>
	##navigation_ul##
</div>

<div id="content">
	<h1>##page_title##</h1>
	##content##
</div>

<div id="footer"><p>##copyright##</p></div>

##statistics##
</body>
</html>

Example of CSS

body {font: 1em/1.6em Georgia;width:1000px;margin:50px auto;color:#444;}
a {color:#55f;}
a:hover {background:#eee;padding:3px 0px;color:#00d;}
li {margin-bottom:8px;}
code, pre {line-height:1.3em;}
pre {border:1px dotted #333;padding:10px;}
blockquote {background:#f5f5f5;padding:1px 15px;font-style:italic;}

#header {text-align:center;display:table;margin:0px auto;}
#header h4 {font-size:60px;margin:0px;letter-spacing:0.1em;font-family:Baskerville,Garamond,Georgia;text-shadow:7px 7px 4px gray;}
#header h4 a {text-decoration:none;color:#000;}
#header h5 {font-family:"Lucida Grande","Lucida Sans Unicode","Trebuchet MS";color:#777;font-style:italic;letter-spacing:0.1em;}

ul#nav {list-style:none;border-top:1px dotted #555;padding-top:10px;height:35px;}
ul#nav li {float:left;margin:-5px 10px;}
ul#nav li a {display:block;padding:7px;text-decoration:none;font: 1.0em/1.5em "Lucida Grande","Lucida Sans Unicode","Trebuchet MS";color:#55f;text-shadow:1px 1px 1px #bbb;}
ul#nav li#active {background:#eee;}
ul#nav li#active a, ul#nav a:hover {color:#009;padding:7px;text-shadow:1px 1px 1px #444;}

#content {margin:auto;width:700px;}
#content h1 {text-shadow:2px 2px 1px #aaa;}
#content h2 {margin-bottom:-5px;text-shadow:1px 1px 1px #bbb;}
#content h3 {margin-bottom:-7px;text-shadow:1px 1px 1px #ccc;}
#content h4 {margin-bottom:-12px;text-shadow:1px 1px 1px #ddd;}
#content img {border:2px solid #aaa;border-top:none;border-left:none;}

#footer {border-top: 1px dotted #333;font-size:0.7em;color:#777;margin:40px;letter-spacing:0.04em;}
#footer p {text-align:center;}
#footer p a {color:#aaf;}

fieldset#contact-form {margin:20px 0px 20px 40px;background:#eee;padding:10px;color:#000;width:400px;}
fieldset#contact-form label {font-size:14px;}
fieldset#contact-form input {height:20px;font-size:16px;margin-bottom:15px;}
fieldset#contact-form textarea {font-size:16px;margin-bottom:15px;width:380px;}
fieldset#contact-form #contact-button {font-size:15px;height:30px;margin-left:30px;}

See the result of the above on www.example.n.nu.

If you want a resume type of site, check this out.

Full list of functions

A full explanation of this will come later. Here is an article but it is a bit outdated.

Custom header

Use the code ##header_image_if_exists## for the custom header with width 940px. If you use a slider be here as well.

23 Nov 2010

About the Author Jim Westergren Jim Westergren is a Swedish web entrepreneur currently living in Spain. He is happily married and has three lovely children. Some of his interests are web development, SEO and writing.
He is the Founder of DomainStats and N.nu. Read his .