Archive for tag 'tutorials'

Mar 13 2012

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

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] <ul id="pics">
[/html]

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

[html] <ul class="poptroxactive">
[/html]

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] <li id="portfolio" class="section">
[/html]

…and ending with:

[html] </li>
[/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:

[html] <script type="text/javascript">
$(‘#pics’).poptrox();
</script>
[/html]

…and replace those three lines with the code below:

[html] <script type="text/javascript">
$(‘.poptroxactive’).each(function() {
$(this).poptrox();
});
</script>
[/html]

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:

[html] <p class="portfoliomore">
<a href="#portfolio2">Next page</a>
</p>
[/html]

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

[html] <p class="portfoliomore">
<a href="#portfolio">Previous page</a>
</p>
[/html]

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:

[css] .poptroxactive{list-style:none;margin:0 auto;padding:0;width:100%;}
.poptroxactive li{float:left;height:110px;margin:0 30px 8px 0;}
.poptroxactive li img{border:3px solid #fff;box-shadow:1px 1px 0px #aaa;cursor:pointer;width:100px;}
[/css]

In the dark version, you also need to add;

[css] body.inverted .poptroxactive li img {border:3px solid #111;box-shadow:0px 0px 2px #000;}
[/css]

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.

By Andreas • Learn • 1 Tags: , , , ,

Feb 27 2012

“This is me” template with inverted colorscheme

On request, here is a quick example of how the colors can be changed in the new This is me template. To make the color switch easy to revert, I will do it using a custom class on the body element in the HTML.

Step 1: Add the body class

In index.html, find the <body> tag. In the default template, it is located on line 15. Add a class named “inverted” to the body element, to make it appear like this:

[html] <body class="inverted">
[/html]

This will allow you to apply styles using CSS that will only be active if the body class is included, which means that you can test different styles without having to edit the default CSS. And by removing the body class, you can easily get the default design back.

Step 2: Add some new CSS styles

Now, with the body class in place, the design will work as it does by default – but you can add new styles that rewrite the default styles if the body class is included as described on step 1. To change a style, first find out what to target. If I want to change the background color and the main text color, this is the line I want to change:

[css] body {background-color:#fafafa;color:#646464;font:12px/16px Cabin, Helvetica, Arial, sans-serif;}
[/css]

Instead of editing the default style, I’ll scroll down to the bottom of the CSS document and add a new line like this:

[css] body.inverted {background-color:#1a1a1a;color:#e0e0e0;}
[/css]

Since I do not want to change the font, I will not include it in the new inverted styles. Only the properties that should be changed, needs to be included. The rest will follow the default styles.

Step 3: Continue replacing all styles you want to modify

Repeat step 2 for all the colors that you would want to change. I decided to go with these styles, which you can use by copying the code and pasting it into your stylesheet:

[css] body.inverted {background-color:#1a1a1a;color:#e0e0e0;}
body.inverted #cardstyle {background-color:#101010;border:1px solid #2a2a2a;}
body.inverted #content {background-color:#181818;}
body.inverted h2 {color:#eee;}
body.inverted #start h1 {color:#ddd;text-shadow:0 1px 0 #111;}
body.inverted #bio img {border:3px solid #111;box-shadow:0px 0px 2px #000;}
body.inverted #pics li img {border:3px solid #111;box-shadow:0px 0px 2px #000;}
body.inverted #social li a {color:#ddd;}
body.inverted #social strong {color:#eee;}
body.inverted #address h3 {color:#eee;}
body.inverted #address {border:0;}
body.inverted a {color:#ddd;}
[/css]

The result is a design that looks like this:

Summary and final words

I have written about body classes before, as a useful tool when modifying website template designs. This is another example of how to use such a class, but as can be seen in the screenshot above, the new background color doesn’t go very well with the menu icons so the colors used in this example may not be optimal for you. If you still want to use a light-on-dark version of the “This is me” template, the next tutorial will come in handy: I’ll explain how to replace the menu icons with new images, so that you will not be limited by the few icons that are included in the template package.

By Andreas • Learn • 1 Tags: , , ,

Feb 20 2012

From template to complete website in 10 minutes

The most popular posts in this blog are the six parts of the Building your first website tutorial. However, going through that tutorial takes some time, and this post is written for those of you who want things to go faster. I am going to explain how you could turn the latest template release, the “This is me” template into a simple but fully functional website in just ten minutes. This tutorial requires some basic HTML editing knowledge, although only the very basics.

Step 1: Download the template

The first thing to do is to download the template and extract it to a folder on your computer. In the folder, you should see the following sub-folders and files:

Step 2: Open index.html using a code editor

Once unpacked, use any program capable of editing HTML code to open the file index.html. I recommend Notepad++ for Windows users and Smultron for Mac users, but basically any regular text editor will work. Using an editor that displays line numbers will be helpful.

This is what you will see if you use Smultron on a Mac:

Step 3: Delete sections that will not be used

To keep it simple, I will only use a few of the content sections in this example and remove the rest. I want to keep the front page that shows the name and the tagline, the bio section to write a short presentation of myself and the contact section to display my address.

First of all, delete the lines 23-25 to remove the menu options that I do not want to use. It should be list items (“li”) with the IDs #portfolio, #social and #custom. Left in the menu list should be list items with the IDs #start, #bio and #contact. It should look something like this:

Then scroll down to find the corresponding sections, also list items using the class=”section” and the IDs you have removed from the menu, and delete them (lines 42-75 if you deleted the menu options mentioned above, or lines 45-78 in the original version of the template).

Step 4: Replace the sample content with your own content

Now you are left with three menu options and three content sections. Time to add your own content! First of all, find the h1 element which says “Your Name” and replace the text with your own name (or the site title you want to use). Then do the same thing with the tagline below the h1. In this example, I’ll just write out my name and the tagline “Welcome to my website”. The code should now look like this:

Then continue to the next content section, the list item with the id=”bio”. The h2 element is the section title, change it if wanted or needed. The sample content starts with an img element that shows a profile photo, aligned to the left. To replace the sample image with your own photo in the easiest way possible, find a picture that you would want to use and resize it to a size that fits within the template layout. The sample image is 120×235 pixels, but you can have other dimensions if wanted as long as the image is not wider than 300px and the height is below 250px. Replace the file photo.jpg in the “img” folder with your own photo, and leave the img element as it is. If you prefer to have a right-aligned photo, change the class=”left” to class=”right”.

The sample content of the bio section is a basic “Lorem ipsum” text, in two paragraphs (“p” elements). Write a presentation of yourself, with each paragraph in its own “p” element. The layout space is limited, so you need to keep the text fairly short to make sure that all of it is visible on the site. For this example, I will just write a few short facts about myself in two paragraphs.

Once the presentation is written, move on to the third content section with the id=”contact” and replace the address with your own information. Line breaks are written using the “br” tag (see the code for examples).

If you want to include a map, go to Google Maps and type in your location. Then click the link icon in the left sidebar and “Customize and preview embedded map” link. Choose the “custom” option and set the width to 305 pixels and the height to 200 pixels. Copy the code and paste it into the div with the id=”map” in index.html.

Step 5: Edit the footer text

Finally, scroll down to the bottom of the index.html code and find the div with the id=”footer”. Change the copyright information text that says “Your Name” into your own name, and then save the document. Then open index.html in a web browser to see what it looks like. If you have followed this tutorial in detail, you should now have a very basic but fully functional website that is ready to be published on the web:

Step 6: Publish the site

If you are happy with the result, then the final step is to publish all files in your template folder to your web hosting account. If you don’t have any hosting ready, there are plenty of options to choose from. Personally, I use Svenska Domäner AB which is a great option for me and for andreasviklund.com, but there are lots of different providers offering a wide range of services depending on your needs, so there are some things to keep in mind before choosing a web host.

I will write more about how to find a good hosting provider and how to upload files to a hosting account in a future post soon.

I hope that you have found this tutorial useful. If you have questions comments or just general feedback, feel free to post a comment either here or on the official andreasviklund.com Facebook page. You can also send feedback or questions to @andreasviklund on Twitter or in an e-mail.

By Andreas • Learn • 6 Tags: , ,

Jan 31 2012

Centered horizontal menus with CSS

Source: matthewjamestaylor.com

I got an e-mail asking how to make a centered horizontal menu, using XHTML and CSS. It may sound easy, but it cause me a lot of headache before I learned how to do it. After trying a lot of “text-align:center” and “margin: 0 auto;” approaches that didn’t work as I wanted, I realized that the trick is to think outside the box when positioning the unsorted list I use for navigation menus.

Rather than just answering the e-mail question, I want to share a link to an excellent and very well illustrated guide on how to make centered horizontal menus. The guide is written by Matthew James Taylor, and it has a no-hacks approach that keeps the code clean and efficient. A few examples are provided that you can use and learn from. Check it out, and don’t miss the many other good posts in Matthew’s design blog.

By Andreas • Learn • 3 Tags: ,

Jan 20 2012

Video tutorials: Learn to write XHTML and CSS manually

After being asked about HTML/CSS coding tutorials for beginners, I ran across a site with a number of excellent guides: LearnWebCode.com. In a number of simple steps, you can learn the basics of both (X)HTML and CSS, and along with the texts you can find a number of videos that give you a visual guide on how it works. After viewing several videos and reading a number of the tutorial posts, I can warmly recommend it for anyone who wants to learn how to build websites from scratch using manual coding. Read more by following the links below:

XHTML and CSS tutorials (text with code examples)
CSS video tutorials
HTML video tutorials

Thanks Brad for these guides, I think that they could be really useful to a lot of aspiring site builders…

By Andreas • Learn • 7 Tags: , , ,

1 2 3 4 5 6 7 8