Metal Toad University #8: The Wolf Theme

This session had us finding new images to create a new theme for our site. Once our new wolf images and patterns were created and exported, we went about with the theming. I added one class to the HMTL: wolf. Then we found the styles that were specifying images and copied them to a new location in our CSS and prefixed them with the wolf class. That made this:

h2:before {
content: ".";
background: url(../img/skull.png);
width: 52px;
position: absolute;
left: 0px;
height: 82px;
font-size: 0px;
}

Into this:

.wolf h2:before {
background: url(../img/wolf/bullet.png);
height: 56px;
top: 11px;
}

We didn't have to specify things like position in our new rule because that is still picked up by the original rule.

Once we had created a new theme, we added a toggle for each theme that allows us to switch between the two just by adding and removing the wolf class.

This week we're going to make it live on a VPS (virtual private server), purchase a domain name for it, and talk about version control with github. These types of things are commonly being referred to as DevOps or Developer Operations these days and have a lot to do with serving your pages to the interent rather than the building of the sites that we've been doing. Look for Tom Martin to help out and talk about some of the lower cost options.

Here's the video from last week: