Creating an Atlas Quest Theme
Custom Options
Creating themes is generally all about setting colors and images, but you can add additional custom tweaks to personalize features in ways that the official themes won't do.
Hiding Elements
Is there a feature on Atlas Quest you don't like and think the site would be better off without? Often time, you can do that yourself by setting the display property to none. For instance, some people do not like the emotion buttons on the message boards—the funny, educational, interesting, agree, disagree, huh, hug, and rude buttons. Through the power of CSS, you can get rid of them all in one fell swoop:
display: none
}
If you take a gander at the HTML code, you'll notice that all of the emotion buttons are enclosed in a div tag assigned to the emotions class. Most of the time, the default display property is set to block (for block-like structures such as body, div, table, etc.) or to inline (for non-block structures such as i [italics], b [bold], span, etc.). But there's a third option—none, which causes the browser not to display that element at all! Poof, the feature essentially disappears.
Some people find the use of drop-down menus annoying—getting in their way when they want to click something in the #content section, so they may want to disable the drop-downs completely.
display: none !important;
}
This targets the submenu that makes up the drop-down menu, and tells the browser not to display it. And poof—the drop-downs are gone.
Or maybe you feel that two menubars are completely unnecessary, so you want to turn off the bottom one completely.
display: none;
}
Or maybe you feel that the headers on every page take up way too much space, making you scroll down to get to the good stuff. You can get rid of it easily enough:
If you use a slow, dial-up connection, those decorative pictures in the corner of the #content page could slow things down to an unacceptable level. So just get rid of them:
background-image: none !important;
}
Atlas Quest uses this trick to remove unnecessary elements when you print a page or view the website through a mobile device. When you print a page, it'll hide elements like the menubars (which is completely useless on a printout) and the footer (which are simply links, and therefore completely useless on a printout). Mobile devices, with their often times limited bandwidth, limited functionality, and limited screen space, will hide the corner images and the drop-down menus.
Font Options
The default font options are suitable for most people, but there are a wealth of options you can make use of to customize them further. The most common is the font size:
input, select, textarea, button,
.note, .note .header {
font-size: 12pt;
line-height: 16pt;
}
You'll notice that I had to set the font size for a multitude of elements that cover every part of the page. This specifies the 'normal' font size for most text on Atlas Quest. Other elements, such as h1, h2, and h3 have not been set because the default settings for those are based on relative font sizes. For instance, the default h1 font size is set to 3.2em, or 3.2 times the 'normal' font size of 12pt. As you increase or decrease the normal font size, the relative size of h1 will stay the same—in this case, 3.2 times 12pt or 38.4 points.
Each line of text also has a height, which is normally slightly larger than the font size. (You don't want one line of text resting directly on top of another line of text, and you also want an additional gap so characters that hang down like g, y, q, and p don't overlap the letters of the line below it. As a general rule of them, whenever you change the font size, you'll usually want to adjust the line height as well. If you find it easier to read double-spaced lines, set the line height to 2em—or twice the regular font size.
input, select, textarea, button,
.note, .note .header {
line-height: 2em;
}
You'll find a bewildering number of options for setting font properties. You can make the first letter of every paragraph double the normal size and with a fancy font with:
font-size: 2em;
font-family: "Lucida Blackletter", "Harrington",
"Tempus Sans ITC", "Times New Roman", serif;
}
The font-family property allows you to set the type of font to be used. Browsers will run through the list, starting at the beginning, until it finds a font that your computer has installed and use that font. In this case, your browser first tries to use Lucida Blackletter. If that font is not installed on your computer, then it'll try Harrington. If that fails, it'll try Tempus Sans ITC. Those three tend to be specialized fonts that many computers don't have installed, but almost every system has the next one installed: Times New Roman. And, if all else fails, it'll try serif—a value that all browsers will always support and basically means, "Use the fanciest font you can find!"
Most links are typically underlined, but you can tell the browser to underline any text you choose by setting the text decoration:
Or maybe you want to use a bold font:
Positioning Elements
We discussed positioning a bit with regards to setting the corner images of the #content page, but you can actually position any element on the page. Perhaps you prefer having the menubar along the left side of the page rather than across the top. It's possible to entirely reposition the menubar with:
position: absolute;
left: 0;
width: 13em;
height: auto;
border: 1px solid black;
z-index: 1001
}
#content {
padding-left: 14em;
}
Repositioning the menubar takes a bit more effort than the minor tweaks you'll likely do. Once the main menubar has been moved, then we have to tweak the submenus to work with the new layout, and adjust the #content section to make room for the space that the menubar displaces.
The point to take away here isn't to learn how to move elements around. Most of the time, you probably won't to. But the option is there, however, and you should know it exists. If you are interested in learning more about these sorts of advanced techniques, search for information about the CSS properties position, clear, margin, padding, z-index, and float. Collectively, they all come together to position elements.
Importing Styles
Sometimes, you don't want to build a theme from scratch. You just want to reuse an existing theme, but with a few tweaks. I do this with the 'art gallery' theme. There are several variations to this theme—Monet, van Gogh, Picasso, and so forth. All of the themes are inside of an art gallery, but the pictures change depending on who the featured artist is. Rather than copy a lot of the CSS over and over again for every theme (and heaven forbid, if I ever decide to tweak a color, I'd have to tweak it for every variation there is), I created a single theme that each of the variations imports:
For instance, the CSS for the van Gogh theme might look something like this:
The first line imports the CSS that creates the look and feel of an art gallery, then I 'hang' van Gogh paintings in the two bottom corners to make it a van Gogh theme.
You'll also see this technique used in the Zodiac theme where the colors and images are mostly the same, except for a couple of places that are customized specifically for the featured zodiac sign.
The imports must be the first thing in the file if you use them, and you can import multiple CSS pages if it suits your particular purposes.
Print-Friendly Pages
Sometimes it's useful to apply a style specifically to make it print better. You might want all printouts to show as black text on a white background. The navigation bar is pretty useless on a printout, so it would be nice not to display that on a printout. Or perhaps you want to shrink the size of the text to save ink and paper. It's possible to apply styles selectively—only when a page is being printed or if you view it using the print preview option in your browser. Atlas Quest already applies many styles specifically targeting printouts, but you may want to adjust or add your own styles customized to your own needs.
To mark styles that should be applied only to printouts, surround the styles with @media print { Your styles here }. Technically speaking, there are several other media types available including aural (for use with speech synthesizers), braille (for use with braille devices), handheld (for mobile devices), and so forth, but you'll be hard-pressed to find devices that support such options. The print media type, however, is very well supported and incredibly useful!
Here's an example of some of the print-friendly styles applied to any page you print from Atlas Quest:
#welcomeStats, #welcome, #headerSubtitle
#headerBar, #headerTitle, #footer,
#contentCornerUL, #contentCornerUR,
#contentCornerLL, #contentCornerLR,
nav.main, .logoBg {
display: none;
}
body {
color: red;
background: white none;
}
#content {
padding: 1px;
margin: 1px;
color: red;
background: white none;
}
}
This is only a partial list of all of the styles Atlas Quest applies to printed out pages, but it includes the main ones that do the bulk of the work. The first part hides lots of elements that have no use on a printout—it removes all of the pieces that make up the header and footer, the menubar, the decorative background corner pieces, and the AQ logo if the page has any. No sense in wasting ink or paper for a logo! All of these elements we just get rid of completely by setting their display property to none.
Then we set the text color, background color, and background image in print-friendly colors: red text on a white background. The background image, if there is one, is removed. No matter what theme is current, our pages will always print with red text on a white background. The real print-friendly styles on Atlas Quest use black text on a white background, but we'll use red in this example so you can see our new styles in action.
If we left it at that, however, you might find that most pages on Atlas Quest don't actually print red on white. Turns out, the content element's colors are set in the #content element, which trumps the body element. So we also set the colors in the #content element. Why bother with setting the body element? The clue pages break out of the normal 'look' for Atlas Quest and has no #content section. No header, no footer, none of that fluff. By setting the color for the body element, we make sure all pages on Atlas Quest print red on white—not merely most of them.
We also adjust the padding and margin to next to nothing. The printer already includes margins without even trying, and we don't want to leave enormous gaps on each side of the page. On your monitor, the text feels crowded if it's pushed right up against the edges of the page, so there's a built in gap. That gap is not desired on a printout, however, so we remove it here.
In total, there are four different views you can see:
| Screen | ||
|---|---|---|
| No Style | default text | black text |
| Applied Style | default text | red text |
Whether or not a print style is applied, it has no effect on the screen display. The text color for most themes is black, but some themes may use another color. For printed pages, the text color will be black if we use the default print styles on Atlas Quest while the text color will be red if we apply the last style.
Opacity
I don't find much use for it in official AQ themes, but it is possible to make an element partially transparent. One place you may have noticed it being used is in this tutorial for the CSS Test box. I didn't want the test box to completely block everything behind it, so I gave it an opacity value of 0.75. An opacity of 1.0 is completely 'solid' while an opacity of 0.0 is completely transparent.
Internet Explorer and all other browsers have two completely different ways of specifying the opacity of an object—it's one of those areas where standards are still untamed. But there's an easy fix to make it work for all browsers. The opacity can be set for any element on the page—in our example, it's go big and make the entire #content window partially transparent:
background: blue url(/css/normal/logo.gif);
}
#content {
background: white none;
opacity: 0.85;
}
The latest official CSS standards require that transparency be set using the opacity property, but as is often the case, Internet Explorer doesn't follow the standards. In future versions, perhaps it will, but until then, you can force it to add transparency with the filter property.
Browers such as Firefox or Safari that follow standards will not recognize the filter property and therefore ignore it, while Internet Explorer will not recognize the opacity property and will therefore ignore it. Between the two lines, all modern browsers will display as expected.
In this example, I've set the background color of the body element to blue and applied the AQ logo as the background image. The #content element has a white background with no image. Except.... the opacity was set to 0.85, which tells the browser to make the #content element 85% opaque (or 15% transparent). Since the #content element is directly on top of the body element, 15% of the colors from body will show through into the #content element, so you'll see a light blue background color (blue + white = light blue) with a hazy logo (AQ logo + white background = hazy AQ logo). Increasing the opacity will make the background even lighter (close to a solid white with no image) while decreasing the opacity will make the background of #content turn a darker blue with a better defined logo. By the header and footer, the bright blue background and logo shows through unobscured since the #content window isn't obscuring what's underneath.
On an unrelated note, notice that you can write comments within the CSS by surrounding the comments between a slash-star (/*) to start a comment and a star-slash (*/) to end the comment. If someone else will be reading your code, you can describe in more depth about what you're trying to accomplish, as I did explaining why there are two lines doing what seems like the same thing.
Rounded Corners
For those of you using almost any browser other than Internet Explorer, you'll see rounded corners all over the place. In headers, in frames, and even the border around the CSS examples of this tutorial. At the time of this writing, no browser supports the official CSS standards currently in development, but most browsers have some support for rounded corners (Internet Explorer being the main exception). First, let's take a look at how you would created rounded corners using the official standards to create a full title with rounded corners:
margin-left: 1em;
margin-right: 1em;
border: 1px solid black;
display: block;
border-radius: 1em;
}
The first few lines make sure the title bar is there and provides margins to make the rounded corners stand out—just in case the default theme does weird things that would otherwise hide the effect. The last line is the one that creates the rounded corners: border-radius. At the time of this writing, no browser supports that property, but hopefully they all will within the next few years. This property gives the corners of the #title element a radius of 0.5em. It's that simple! In theory....
While no browsers currently support border-radius, most modern browsers do support their own versions of it:
margin-left: 1em;
margin-right: 1em;
border: 1px solid black;
display: block;
border-radius: 1em;
}
This is the same as before, except we added a couple of additional lines. The -moz-border-radius property works with Firefox browsers (and Chrome, which is closely related). The -webkit-border-radius property works with Safari browsers. Internet Explorer, at this time, has no equivalent property for rounded borders, so if you use Internet Explorer, sorry. It's a rough life. Hopefully new versions will support it soon!
It's safe to include all three border-radius properties in the same CSS file since browsers will ignore any property they do not understand. Firefox will not understand border-radius or -webkit-border-radius and will ignore them, but they will apply the -moz-border-radius style. When browsers start supporting border-radius, they'll use that one instead and not the alternates.
So for now, you're best best is to use all of them to cover all of the major browsers that support some form of rounded corners. Rounded corners can really give a professional look to your theme.
Other Options
For a complete guide to all of the options available to you, you'll want a lot more than just this tutorial. If you're interested in additional information, run a Google search for CSS tutorials or find a good book about the subject at your local bookstore. I've listed a couple of my favorite books to the side, and they'll give you a wealth of interesting ideas!
