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.
template.php file, a style.css file and an optional default-header.jpg file. And of course images related to the CSS.
<head>
<title><?php title_tag(); ?></title>
<link rel="stylesheet" href="<?php css_file(); ?>" type="text/css" />
<?php meta_tags(); ?>
</head>
<link rel="stylesheet" href="https://staticjw.com/other/ericmeyerreset.css" type="text/css" />
<?php site_title(); ?>href="index.html" to href="<?php home_url(); ?>".<?php site_description(); ?><?php navigation_ul(); ?>.
<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>
<?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.<?php content(); ?> in it's place.<?php fixed_textbox(); ?>. If there is no column and no fixed text area then don't do this.<?php copyright(); ?></body> add: <?php statistics(); ?>. This is mandatory as it does not only control statistics but important login function. Don't forget this.<?php page_url(); ?> which will print out the current URL.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.
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.
@import url('library/layout.css') and instead copy and paste the content of those CSS files inside the CSS on the same place.li.current_page_item a and li.current-menu-item a to li#active aBefore:
/*-----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;}
.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
text-align:justify; and verify that it is used in a correct way. Normally this has to be removed.
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;}
ul#nav #active a {text-decoration:underline;}
url('something') or url("something") but just url(something). This is very important!- 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.
- Some more info here.