Archive for tag 'css'

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: , , , ,

Mar 1 2012

“This is me” (dark version) released!

Here it is, the “This is me” template with inverted colors based on the tutorial posted a few days ago. Beside refreshing the colors, I have also refreshed the menu icons to make them fit with the dark background, as well as adding a set of sample photos to give you a better idea of what the gallery can look like.

Download the template directly from here: this-is-me-dark.zip (1.25 Mb, .zip) or read more about the template on the This is me (dark) page. A live demo is also available.

By Andreas • Build • 2 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: , , ,

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