andreasviklund.com

Two new templates: Inland Earth and Inland Wood

Andreas — Thu, 19 Apr 2012 15:40:17 +0000

Two new free website templates have been released: Inland Earth and Inland Wood. Both are based on the popular Inland CSS template, with additions such as background images and CSS3 effects that change their visual appearance. As with Inland, the design has been in focus – while simple and effective code has been a top priority. Both templates include the NivoSlider image slideshow plugin, and a set of beautiful photos by Thomas Wallström have been included to bring more colors into the designs. This is what the new templates look like:

You can read more about Inland Earth and Inland Wood and see live demos on their respective template pages, or download them directly from here:

Inland Earth: inland-earth.zip (1.4 Mb .zip)
Inland Wood: inland-wood.zip (1.5 Mb .zip)

Theme test site upgraded to WordPress 3.4 (beta 2)

Andreas — Wed, 18 Apr 2012 10:01:52 +0000

The theme demo site where you can preview the WordPress themes from this site, has been upgraded to the new beta version of the upcoming WordPress 3.4. I’ll be reviewing all themes and make sure that they are fully functional with WordPress 3.4 once it is released, but I would still like to ask for your help. If you spot any bug or error when you browse the demo site, or if you download one of my themes and use it with the 3.4 beta and run into problems, please let me know about it.

WordPress 3.4 will introduce some new features which I will look closer at soon, including a new theme customizer which seems both interesting and useful. With version 3.4, it will also become possible to install child themes hosted at the official WordPress theme directory, from inside the administration area of your site. Both those features are highly relevant for me to support, so I will write more about these features once I have experimented with including support for them in the themes.

Enhance your WordPress theme with code snippets

Andreas — Tue, 10 Apr 2012 21:32:18 +0000

As much as I love building themes for WordPress, I am much more of a CSS designer than a coder. In order to make theme development easier, I started to build a library of useful code snippets that I could re-use in future projects. Seeing how useful it was, I started looking around for sites with more snippets that I could use. Today, WordPress Tavern published a post with a link that is well worth passing on to anyone who could find short code snippets for WP-theme development useful…

WPfunction.me contains a collection of snippets which you can copy and paste into the functions.php file of your theme to add new features to it. Using a simple interface, you can sort snippets by category and then select the features you want to add. After selecting, you click a “Get my code” button to get all the code you need. Paste the code into your functions.php file, and you are all ready to go.

It is not the largest collection of WordPress-related code snippets I have seen, but the way that features are selected and the code is customized according to the selections that are made, is simply beautiful. Check it out, and if you want more code examples to choose from, move on to the excellent list of code snippets compiled by CatsWhoCode.

Moving into the world of Creative Commons

Andreas — Tue, 03 Apr 2012 12:35:05 +0000

Starting today, all future free HTML/CSS templates (both new designs and updates of previous releases) will be released under a Creative Commons CC-BY license. It will not mean any difference in terms of how the templates can be used, modified and redistributed, as the templates will remain free to download, free to use for both commercial and non-commercial purposes and free to modify and redistribute. The only difference in practice will be that attribution must be given when the templates are used or redistributed. By using an established license, there will be no more confusion about copyrights, limitations and the legal status of the designs.

To learn more about Creative Commons, I suggest watching this video presentation.

(Note: The WordPress themes will still be GPL)

New Drupal theme: Inland

Andreas — Wed, 21 Mar 2012 07:13:07 +0000

The Inland CSS template has now been ported into a theme for Drupal and added to the Drupal themes page. The Inland theme for Drupal was created by Nick Young, and the theme includes support for the Nivo Slider header image slideshow. The project is under active development, and Nick is planning to add support for all layout features included in the template. If you use Drupal and you are looking for a new look for your site, check it out!

Coming up: Drupal and WordPress theme versions of the Inland CSS template

Andreas — Fri, 16 Mar 2012 23:51:54 +0000

Drupal theme designer Nick Young, who have made the Drupal themes linked from this site, is reporting on Twitter that a Drupal theme version of the Inland CSS template is in progress and that it will be released soon. I can also reveal that I am working on a WordPress theme version, as well as on expanding the CSS template with a layout for mobile devices. Exciting news coming up soon, in other words. Stay tuned for updates!

Pinning images from this site on Pinterest

Andreas — Thu, 15 Mar 2012 19:44:57 +0000

Screenshot of Pinterest.com

The online pinboard service Pinterest is a fast-growing site for pinning and sharing images and links of various kinds. In terms of popularity, it is a huge phenomenon that is used and appreciated by a large number of people worldwide. But Pinterest has also got a lot of criticism as the concept of pinning images can violate copyrights. This can make the seemingly innocent act of sharing a photo into a crime, as explained in this blog post from the Wall Street Journal. Since site owners have different views on copyright and pinning, I want to clarify my view regarding pinning images from andreasviklund.com:

Pinning content from andreasviklund.com on Pinterest is perfectly OK. I encourage it, and appreciate it as it helps others find my work. If you are inspired by the templates and themes that you find here, do not let scary blog posts like the one above stop you from using Pinterest – atleast not for images you find on this website.

I have added a “Pin it” button to the sidebar, and I am working on updating the layout of the template gallery and the single template pages to make it easier to share screenshots for those who want to. I will also be around myself, with a pinboard dedicated to design inspiration. More about that in future posts…

“This is me” template updated to v1.1

Andreas — Tue, 13 Mar 2012 22:41:34 +0000

As described in the post from yesterday, the This is me and This is me (dark) templates have been updated to support multiple image gallery sections, with internal navigation links between the sections. In terms of code modifications, it is a minor update. But a very useful one, as I have seen that the two “This is me” templates are used by several professional photographers who would most certainly want to show more than eight images on their site.

A tutorial on how to update existing websites built with v1.0 with this new feature, can be found here.

How to add multiple image sections to “This is me” v1.0

Andreas — Tue, 13 Mar 2012 20:54:58 +0000

To add support for more than one gallery section in the “This is me” and “This is me (dark)” templates, there are a few things that need to be done in the HTML and CSS code. The following step-by-step tutorial works for both the light and the dark version of the “This is me” template.

Please note that the changes described below has been included in v1.1 of the templates, so this tutorial is only interesting to those of you who have already built (or started building) websites with version 1.0 of the two templates.

1. Locate the unsorted list (ul) that lists the image thumbnails

The ul element should look like this:

[html]

…and replace the id=”pics” with class=”poptroxactive” to make it look like this:

2. Copy and paste the portfolio section code

Copy all code for the entire list item (li) that contains the gallery/portfolio, starting with:

[/html]
…and ending with:
[html]

Then paste the copied code directly after the closing of the list item, below the section that you just copied. Rename the ID of the second gallery/portfolio section from id=”portfolio” to id=”portfolio2″. ID:s must be unique, unlike classes which can be re-used. This is the reason why id=”pics” was replaced by class=”poptroxactive” earlier.

3. Replace the JavaScript

Then scroll down to the bottom of the HTML code and locate the code that triggers the Poptrox javascript. It should look like this:

…and replace those three lines with the code below:

This is what enables the Poptrox jQuery plugin to work on more than one gallery section. Instead of triggering Poptrox for the ul with id=”pics” (which again could only be used once, and therefore only one gallery page can be used in v1.0 of the template), the script is now triggered by the class=”poptroxactive” which you added to both ul elements earlier. That class can be used on any number of gallery thumbnail lists, but in this example I am only adding a second one.

4. Create the internal navigation links

Add a text paragraph in each of the sections, directly below the ending of the ul element that contains the thumbnails. In the first section, the paragraph should look like this:

…and in the second section it should look like this:

This creates links between the sections, so that visitors on the site can navigate to the second gallery page and then back to the first one. Of course, link texts can be whatever you think works best. Just make sure that the link href matches the ID of the section you want the link to lead to. The class .portfoliomore can be styled in the CSS if you want to change the way that the links look, or their positions.

5. Edit the CSS (this-is-me.css or this-is-me-dark.css)

Since the thumbnail gallery layout styles were written for the id=”pics”, they need to be changed so that the styles are triggered by the class=”poptroxactive” instead. To do this, simply replace all occurances of “#pics” in the stylesheet into “.poptroxactive”, like this:

In the dark version, you also need to add;

6. Add more images

Finally, add more images in the second gallery section (the one with id=”portfolio2″) – and then save the document to preview the result in your web browser! If you have followed this tutorial step-by-step, the gallery/portfolio section should now look the same as the new version 1.1 of the template.

If something would not work, or if you have ideas or requests for further modifications, post a comment to this post.

Adding more gallery pages to the “This is me” template

Andreas — Mon, 12 Mar 2012 21:25:12 +0000

The new This is me and This is me (dark) templates have got great feedback, and there are already a number of websites based on the templates running live on the web. After reviewing the feedback from users of the two templates, I am now working on updates based on your comments, ideas and requests.

One of the most common questions has been how to add more images to the image gallery in the portfolio section of the templates. Today, I have been rewriting the image gallery a bit to allow more images to be added. In short, the code that activates the Poptrox image gallery script has been modified to make it work on a class rather than on the id=”pics”, which means that an unlimited number of gallery pages can be added. Along with this modification, I will also add internal navigation between those gallery pages. Version 1.1 of the two templates will be published tomorrow, along with a short tutorial on how to update websites built with the first version of the templates to support this new feature. I will also post links to some of the sites that have been built with the templates. If you have have a site that I should include, please post a comment to this article and let me know!