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:

Filed under:

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Ready for transformation?