How to change the world

The layout and styling for your portfolio is handled by Themes. If you want a different look for your portfolio it's as simple as enabling another Theme. But what if you want more control? What if you want green links instead of blue? What if what if?

That's where overrides come in. Underneath each Theme you'll see links to edit and show CSS. Each Theme comes with a second stylesheet and it's here that you can make any change your heart desires.

Lets indulge in a bit of background to get us all on the same page. As far as we're concerned webpages are made up of two important ingredients. HTML and CSS. The HTML file contains the content. It contains all the words you see and (links to) images, links and a bunch of background stuff that's important but isn't seen. The CSS file directs the browser to render the HTML, the content, in a certain way. Left to it's own devices, if no styling is given, you'll see your content as black text on a white background. You can add a CSS file that says "actually, the text should be white and the background should be grey" - much like the page you're looking at now. The HTML has nothing to say on how things are presented to the viewer, it only knows what should be displayed. It's the CSS that takes care of the layout, the positioning, the sizes and the colors of everything. It's the how to the HTML's what.

A Seamless Theme contains both HTML and CSS. The default Theme, for example, says that the background should be white, and the text should be black (mostly). If you don't like that, Seamless lets you change it by overriding what the Theme's CSS is saying to do.

Ok, but what is CSS?

Actually, I know what CSS is and I want to skip this bit.

CSS is a language, but it's a very simple one and you should be able to pick up the basics of it quite easily. Even if it's through trial and error. One of the important aspects of CSS is that it's all hierarchical and the hierarchy is based on the HTML layout. It's easier if I show you.

Lets say we have a div in the HTML that contains a header and a paragraph with a link.

  <div id="some_div">
    <h1>I am a very important heading</h1>
    <p>And I'm a quite important paragraph. Look, I even have a <a href="http://www.example.com/">link</a>!</p>
  </div>

A HTML element has two tags that describe what the content is. One is a start tag and the other an end tag. HTML tags sit inside of angle brackets and a forward-slash (/) in a tag means that it's the end tag. That's how you (and your browser) know what's an element and what's content. Lets take a look at what this code would produce.

Now if we wanted to change the color of our link we'd write some CSS that changes the color of link elements (HTML calls them anchors, or just "a" for short).

a {color: red;}

The syntax is

element {attribute: property;}

The curly braces are the start and end points. Everything between them refers to the same element (so you can style multiple attributes at the same time). The attribute is the thing you want to change. Could be the color, could be it's width or height. Could be something more esoteric like float or z-index. The property is the value of the attribute. For example if you're setting the height attribute of something, the property is going to be the height you want, say 50px. The list of possible attributes is HUGE, but thankfully most of them are self-explanatory. I recommend viewing a site in Safari of Firefox and hitting right-click "Inspect Element". This brings up a special window that you can use to look around a page and view it's raw HTML and CSS side-by-side and see how webpages are put together.

If we view our simple example now, with a {color: red;} we'll see a red link*.

Great but this is just a simple example with one link. What if we had a more complex example with links in different places and we wanted links to be different colors depending on where they were? That's where inheritance comes in. Right now, the CSS we wrote says to "make every 'a' element's color red". We can get more specific by specifying a hierarchy. Again, it's easier to show you.

If we look back at our example we can see that our link is between the opening and closing tags of a paragraph (p). You can also see that the p is in between the opening and closing tags of the division (div**). We can say that the link is inside the paragraph and the paragraph is inside the div(ision). Knowing this we can then change our CSS to only style this link and not other links on the same page. Yay for hierarchal inheritance! (Now that we know what it means!)

But there's a catch...

There are a hundred ways you could do this based on how specific you want/need your CSS rule to be.

Do you want to target all links within all paragraphs?

p a {color: red;}

Do you want to target all links within all paragraphs but only if they are within the div who's id is "some_div"?

div#some_div p a {color: red;}

Or how about any link inside of the div "some_div", no matter if it's inside a paragraph or not?

div#some_div a {color: red;}

 

And herein lies the double-edged sword of CSS. It lets you be very specific or very vague. And sometimes you'll make a simple change and get an unexpected result because you aren't being specific enough or your aren't being sufficiently vague somewhere in your CSS. My advice to you is to be painfully, laboriously, specific with your CSS while you're learning. Once you're a bit more experienced and confident you can start being lazy/smart.

...but there's always a way

But all's not lost. HTML can help us out here. A HTML element (remember, an element specifies some particular type of content like a link or a heading) can be given a name and we can refer to that name in our CSS. A HTML element's "id" is it's name. That id should be unique on the page. It's like working with three Bobs. Yell "Hey Bob" and three confused faces turn to look at you. Sure, it's comical at first but I digress. Anyway. HTML elements can also have classes. A class works just like a name but we all know you're referring to a group of people when you yell "Hey, Bobs!".

In our example you can see that I gave the div an id of "some_div". To target an id in CSS...

#some_div {color: red;}

The hash/pound sign/# says that you're talking about an id called "some_div" rather than a some_div HTML element (which doesn't exist). Classes work exactly the same but with a dot (.) to mean class.

.some_great_class {width: 800px;}

And just like before, we can be specific with classes and ids...

div#some_name {color: red;}

This will only targets divs with the id of some_name - if you've got a paragraph with that id it's color won't be set to red)

All this brings us to override.css

The beauty of the override

Each Theme you install comes with a blank stylesheet (CSS file) called override. In this stylesheet you can set your own CSS rules to override the styles in the Theme. So for instance those green links that we wanted, we can do that even though the Theme says they should be blue! And you can be as drastic and as daring as you like because the changes you make are not permanent. They're simply instructions on how to display a webpage. You can't break Seamless or your portfolio by experimenting and making mistakes so please do, that's how you'll learn. In fact if you work on any Theme that's not your active Theme, Seamless allows you preview your changes far from the prying eyes of the public. That green not working out for you? Who cares, no-body saw a thing because they were all looking at your public site which was running a completely different Theme!

The best way to start with customising a Theme is to take a look at the HTML of the Theme to see how it's constructed and what some of the element class names and ids are. This video goes over some ways of doing that. Once you know what it is you want to change you can put your own style rules in the override.css file and see what it looks like. Sometimes you may not get the change you expected, or get no change at all. This is usually because you're not being quite specific enough with your selectors.

I'm in the process of making some "maps" of how I put the Themes together which should help make it quicker and easier for you to target what you want to change.

Some useful resources

• Chris Coyier has a great site at css-tricks.com with lots of great lessons and videos. Like this one!
• Whenever I need to look something up (like what does this attribute do and what properties can I set) I go to W3C. It's a bit dry but it's a great reference.
• Seamless help articles on Themes
• A video I put together for this post
• X-Ray. A really useful tool for figuring out how a page is put together (it's free)
• Safari's Inspect Element tool (Mac or Windows)
• Xyle Scope. Like Safari's and Firefox's Inspect Element on steroids (free but Mac only)

 

*If you look at the source for this page you'll see that I've cheated and put the example inside of a div called "with red" and the CSS I'm actually using is #with_red a {color: red;} - I had to scope this to just that one example because otherwise it would set all the links in the blog from blue to red!

**A DIV element is just a generic element that carries no meaning about its contents. They're there really to provide a holder for other elements. You only need DIVs if you want to easily refer to a group of elements.