Introduction to Theming Penismightier.com has the unique feature of entire site theming. On this left side of this page, you'll see several small images that are previews of themes that you can choose from. Clicking any one of them will load that theme on your browser.

If you don't like the way that the site looks, don't like the arrangement of the page, or don't like the color scheme, you can change all of it, or as little of it as you'd like. How It Works If you're just interested in making a simple theme, you can probably skip this section.

The penismightier page is built almost entirely by JavaScript, and modified with CSS. Each block of the page is made with a JavaScript function, each image is referenced by a JavaScript variable, and all elements are styled with CSS. If you look at the code to a page, all it contains is that page's individual content, speckled with bits of JavaScript code.

So, how does theming work?

Each page loads a standard JavaScript file that containing some generic function. Two themes are then loaded. The first theme is the default theme, Minimalist Grey. This theme contains everything that is needed to build the site. The files "script.js" and "style.css" are loaded from this theme's directory, which contain the JavaScript and CSS for the page.

The second theme that is loaded is the user-selected theme. The page will attempt to load "script.js" and "style.css" from the user selected directory. This is the key to extensable theming: Writing code to these files will override existing functions, variables, and style tags made in Minimalist Gray's theme.

In this way, you only need to override the parts of the theme that you want to override. A simple theme can contain no JavaScript or CSS at all, and just override the images. A more advanced theme could add CSS to give the page a new look, or JavaScript to change the way a component is designed. A very ambitious theme could change the way the entire page looks.

The end result is a completely themable website that is simple enough for novices, and as advanced as an expert can want it to be. Getting Started: Simple Theming To get started on a theme, just follow a few simple steps:
  1. Download the theme kit here. This contains all the images, and sample CSS and JavaScript, as well as a file called "theme_template.jpg", which will help you design the page layout. You can also download Minimalist Blue here to see how it was done.
  2. Unzip all the files to a folder on your computer.
  3. Update the images as you see fit. See the list of file names below for a reference as to what they are.
  4. Write CSS tags and JavaScript modifications necessary to make the page flow correctly. We advise that you update only what is different from the default theme, and only what is necessary. The less modification, the less likely it is your theme will break.
  5. Upload the files to web space, and enter http://www.penismightier.com/index.html?http://your.complete/theme/url to see how it looks (yes, you can look at themes not hosted on the site!)
  6. Wash, rinse, and repeat until your theme looks perfect!
Advanced Theming If you really are dedicated to theming, here's how it works. All pages are built in the following way:

<!-----------------------------------------
LINK IN THE THEMES GLOBALS AND THEMES LIST
------------------------------------------>
<SCRIPT LANGUAGE="Javascript" SRC="themes/themeglobals/themes.js"></SCRIPT>

<!-----------------------------------------
LINK IN THE BASE JAVASCRIPT AND CSS
------------------------------------------>
<SCRIPT LANGUAGE="Javascript">
loadtheme("");
</SCRIPT>
<!--
THE BODY OF THE PAGE FOLLOWS.
-->

<body class="pen_body">

<!--
OUTPUT EVERYTHING THAT GOES BEFORE THE ENTRIES
-->
<SCRIPT LANGUAGE="Javascript">
do_preEntries();
</SCRIPT>

<!--
NEWS ENTRY
-->
<SCRIPT LANGUAGE="Javascript">do_preEntryTitle(); </SCRIPT>
POST TITLE
<SCRIPT LANGUAGE="Javascript">do_postEntryTitle(); do_preEntryTimestamp(); </SCRIPT>
POST TIMESTAMP
<SCRIPT LANGUAGE="Javascript">do_postEntryTimestamp(); do_preEntryBody(); </SCRIPT>
POST BODY<BR>
POST BODY<BR>
POST BODY<BR>
POST BODY<BR>
POST BODY<BR>
<SCRIPT LANGUAGE="Javascript">do_postEntryBody(); </SCRIPT>

 The above code builds the pages by inserting all common elements through the use of JavaScript functions. These functions output to the page using document.write(string) and calling other functions that do so. By overriding specific functions, you can change certain parts of the page without breaking the rest of the page. You code only what you need to.

The best way to get started is to look at portions of the code, starting with the do_preEntries() function. Follow the path that code execution takes, and you'll soon see how the page is built.

Here's some useful tidbits: Polishing & Publishing a Theme To make a theme complete and become pen-sanctioned, make sure the following things are done:
  1. Make sure your theme looks nice and functions on all major browsers (IE, Mozilla/Netscape, Opera)
  2. Override the function STRING_standardfooter() function to return a string crediting you as the maker.
  3. Update the file "128x32preview.gif" to provide a 128 pixel wide by 32 pixel high GIF file that contains the name of your theme, in the style representative of your theme. (These files are displayed on all theme pages, and when clicked, activate your theme.)
  4. Submit the theme to a staff member, and hope that they deem it worthy for becoming a standard Penismightier theme.
File Reference These files are included in the theming kit:

script.jsThe main JavaScript file, contains all JavaScript code loaded by the theme loader. By default, this contains nothing, but you can fill it with whatever code you wish to override.
style.cssThe main CSS file, contains all CSS style tags loaded by the theme loader. By default, this contains nothing, but you can fill it with whatever tags you wish to override.
unused_script.jsA sample JavaScript file, taken from the default theme, that contains most of the code for you to look at, or copy and modify.
unused_style.cssA sample CSS file, taken from the default theme, that contains most of the code for you to look at, or copy and modify.
128x32preview.gif128x32 pixel preview of the theme, to be used as a link to activate this theme.
theme_template.jpgA template, not actually used on the page, but for development purposes.
img_banner.jpg768x128, the banner that appears at the top of the page. The height of this image can be changed without any code changes.
img_caption_bottom.jpg576x16, the image that appears beneath the title of each entry header. The height of this image can be changed without any code changes.
img_caption_center.jpg576x8, the image that appears in the background of the title of each entry header. The height of this image can be changed without any code changes.
img_caption_top.jpg576x16, the image that appears above the title of each entry header. The height of this image can be changed without any code changes.
img_inset_cc.jpg16x16, the center background part of the inset window in the left panel.
img_inset_cl.jpg16x16, the center left part of the inset window in the left panel.
img_inset_cr.jpg16x16, the center right part of the inset window in the left panel.
img_inset_lc.jpg16x16, the lower center part of the inset window in the left panel.
img_inset_ll.jpg16x16, the lower left part of the inset window in the left panel.
img_inset_lr.jpg16x16, the lower right part of the inset window in the left panel.
img_inset_uc.jpg16x16, the upper center part of the inset window in the left panel.
img_inset_ul.jpg16x16, the upper left part of the inset window in the left panel.
img_inset_ur.jpg16x16, the upper right part of the inset window in the left panel.
img_lowerbanner.jpg768x16, the image that appears below the menu bar beneath the banner. The height of this image can be changed without any code changes.
img_menu1.jpg128x32, "News" menu button
img_menu1_over.jpg128x32, "News" menu button, when the mouse is hovering above it
img_menu2.jpg128x32, "Board" menu button
img_menu2_over.jpg128x32, "Board" menu button, when the mouse is hovering above it
img_menu3.jpg128x32, "Articles" menu button
img_menu3_over.jpg128x32, "Articles" menu button, when the mouse is hovering above it
img_menu4.jpg128x32, "Penternet" menu button
img_menu4_over.jpg128x32, "Penternet" menu button, when the mouse is hovering above it
img_menu5.jpg128x32, "Crapper" menu button
img_menu5_over.jpg128x32, "Crapper" menu button, when the mouse is hovering above it
img_menu6.jpg128x32, "Links" menu button
img_menu6_over.jpg128x32, "Links" menu button, when the mouse is hovering above it
img_side_cc.jpg16x16, the center background part of the left panel.
img_side_cl.jpg16x16, the center left part of the left panel.
img_side_cr.jpg16x16, the center right part of the left panel.
img_side_lc.jpg16x16, the lower center part of the left panel.
img_side_ll.jpg16x16, the lower left part of the left panel.
img_side_lr.jpg16x16, the lower right part of the left panel.
img_side_uc.jpg16x16, the upper center part of the left panel.
img_side_ul.jpg16x16, the upper left part of the left panel.
img_side_ur.jpg16x16, the upper right part of the left panel.
Sample HTML Output This is how some standard tags will appear on your page:

standard text The quick brown fox jumps over a lazy dog.
<B> bold The quick brown fox jumps over a lazy dog.
<U> underline The quick brown fox jumps over a lazy dog.
<I> italic The quick brown fox jumps over a lazy dog.
<TT> typewriter The quick brown fox jumps over a lazy dog.
<EM> emphasis The quick brown fox jumps over a lazy dog.
<A> link The quick brown fox jumps over a lazy dog.
<UL> and <LI> bulleted list
  • Item 1
  • Item 2
  • Item 3
<OL> and <LI> numbered list
  1. Item 1
  2. Item 2
  3. Item 3
<BLOCKQUOTE> quote
"Never rub another man's rhubarb."
<CODE> source code foo(bar());
Files Theme Kit - themekit.zip
Minimalist Blue Theme - minimalist_blue.zip