DragonPrime - LoGD Resource Community
Welcome Guest
  • Good morning, Guest.
    Please log in, or register.
  • November 24, 2017, 01:05:20 AM
Home Forums News Downloads Login Register Advanced Search
* *
DragonPrime Menu
Login
 
 
Resource Pages
Search



How to: Create Skins

Author: Ben 'blarg' Wong




Contents



Introduction

So you want to create a new skin for LoGD. That's great, because they're looking for new skins! But where do you start? The general consensus is to take a look at how the existing skins work and go from there. Having personally done that, I found it really wasn't that difficult. However, it wasn't that easy either, so I decided to have a try at documenting it a bit and this document was born. I hope it works for you.

Disclaimer: I am not a CSS nor HTML expert. Everything I know about them was learned from the Internet, either through trial and error or good ol' Google. So, any readers more versed in these subjects are encouraged to submit corrections/improvements for any problems or errors I may have made. Thanks!


Return to Contents

Before You Start


A few things you need to know about before you start working on your skin.

Obviously, you'll need at least some basic knowledge of CSS and HTML. You can find tutorials-a-plenty about these topics on the web; just do a search. Please note that this document is NOT meant to teach either of these topics.

The other thing that will be handy to have is a LoGD server to test on. If you want to do this yourself, check the documentation (especially the main readme file) for LoGD to find out how to get the game running. Alternatively, seek out a friend that can do this and have them setup a server for you. ;)

I should also note that this document is based on the current 0.9.8 pre-releases of LoGD which you can find on DragonPrime.net.


Return to Contents

Let's Begin


The first thing we need to do is come up with a design. You don't necessarily need to have something fully fleshed out, but at least a good general idea of what you want the skin to look like.

Some general things to think about include:

- what colours you want for the text and backgrounds
- which fonts you want to use
- any images you want to include

So with your concept in hand, let's start coding. There are 2 main files used in a skin, the CSS file and the HTM file. The CSS controls the visual aspects, while the HTM controls the layout.

The easiest way to start is to take an existing skin, make copies of that skin's CSS and HTM files, and then start modifying them to suit your design.


Return to Contents

Images Directory


If you have or want to create images for use in your skin, these will need to be stored in a subdirectory within the LoGD templates directory. It should be named the same as your skin. At this point, your directory structure will probably look something like this:

The recommended filetypes for images are either GIF or JPG. PNGs would have been great, but we are currently limited by the inconsistent support for them in IE.


Return to Contents

The CSS File


The CSS file controls the visual styles of your skin. For the most part, these are your colours, fonts, and element dimensions.

I have organized my CSS files as follows: First, I have general tag styles, followed by general class styles, and then specific tag-and-class styles.

Note that the styles listed here are the core styles that the game requires. You are, of course, free to add additional styles to suit the design of your skin.


Return to Contents

General Tag Styles


These styles are useful for general style defaults you want to have in place when there isn't a more specific tag and/or class to use. Currently, there are 4 main ones that are regularly used:

Tag Typical Attributes Tag Used For
td font-family
font-size
default for table data cells
a color
text-decoration
default for links
input font-family
font-size
border
color
background-color
Default for input fields
e.g. village chats
select border
color
background-color
Default for selection boxes
e.g. user preferences, drop-downs,
choosing lottery numbers

Return to Contents

General Class Styles


These are useful for defining a more general style that can be used in many different html tags via the 'class=' attribute. There are 25 required classes:

Class Typical Attributes Class Used For
.pagetitle font-family
font-size
color
Main page title at the top of a page
e.g. "Degolburg, the Capital City",
"LoDG News", "The Forest"
.navhead height
width
padding
border
color
background-color
float
clear
font-weight
text-decoration
text-align
line-height
Headings in the Navigation Menu
e.g. "City Gates", "Combat Avenue",
"Store Street", "Ale Alley"
.navhelp height
width
padding
border
float
clear
text-decoration
A way to highligh items in Navigation Menu
e.g. Skill headings like "Dark Arts"
.navhi color
background-color
text-decoration
The hot key for a nav menu item
e.g. the 'F' in Forest, the 'T' in Travel
.input border
color
background-color
Fields for text input
e.g. the large textarea in YOMs
.button font-family
font-size
border-top
border-left
border-right
border-bottom
color
background-color
Input buttons
e.g. Login, Submit, Search, Add
.trhead color
background-color
Table headings
e.g. Alive, Level, Name, Location
.trlight color
background-color
Light coloured table rows
.trdark color
background-color
Dark coloured table rows
.trhilight color
background-color
Highlighted table rows
e.g. the line your username is on
.colDkBlue color dark blue text
.colDkGreen color dark green text
.colDkCyan color dark cyan text
.colDkRed color dark red text
.colDkMagenta color dark magenta text
.colDkYellow color dark yellow text
.colDkWhite color dark white text
.colDkOrange color dark orange text
.colLtBlue color light blue text
.colLtGreen color light green text
.colLtCyan color light cyan text
.colLtRed color light red text
.colLtMagenta color light magenta text
.colLtYellow color light yellow text
.colLtOrange color light orange text

Return to Contents

Specific Tag-and-Class Styles


These styles are used when you have a specific look and feel for an exact tag AND its class.

Tag/Class Typical Attributes Tag/Class Used For
a.nav height
width
padding
float
clear
text-decoration
The links in the Navigation Menu
e.g. Forest, Travel, Preferences
a:hover.nav color
background-color
Mouseover effects for nav links
a.motd height
width
padding
float
clear
color
background-color
text-decoration
text-align
Links for MoTD, YOM, and Petition
a:hover.motd height
width
padding
color
background-color
Mouseover effects for MoTD, YOM, and Petition
a.hotmotd height
width
padding
float
clear
color
background-color
font-weight
text-decoration
text-align
When a new MoTD/YOM is available
a.t font-size
height
width
border
padding
color
background-color
Translater tool links
a.thot font-size
height
width
border
padding
color
background-color
Translation tool links for lines currently without a translation
td.pageheader height
background-color
Heading for main page
td.popupheader height
background-color
Heading in a popup
e.g. MoTD, YOM
table.nav width
border
color
background-color
The overall Navigation Menu
td.nav a.t position
left
height
Forces translation links to a certain position (typically to the left edge of the page)
td.nav a.thot position
left
height
Forces untranslated links to a certain position (typically to the left edge)
table.vitalinfo width
border
background-color
Wrapper table for vital info
table.charinfo width
background-color
The table with character stats
td.charhead border
color
background-color
Character stat category heading
e.g. Vital Info, Equipment Info
td.charinfo border-top
padding
color
Specific character stat data
e.g. Name, Level, Hitpoints, Turns
table.noborder border Table in page footer
td.footer background-image Table data in the page footer
td.noborder border Borderless data in page footer
div.debug font-size
height
width
border
color
background-color
Debug messages

Return to Contents

The HTM File


The HTM file controls the layouts of the various components of the skin. These are mostly done through extensive use of tables.

There are two main things to take note of in this file: 'template sections' and 'replacement tokens'.


Return to Contents

Template Sections


Each template section starts with a comment of the form:

<!--!sectionname-->

The end of that section is signified by the beginning of a new section (i.e. there is no "end-of-section" delimiter). Here is a table of the sections currently available in the htm file.

Section Name Description
<!--!popuphead--> The header area in popup windows
e.g. MoTD, YOM
<!--!popupfoot--> The footer area in popup windows
e.g. copyright
<!--!header--> the header area of the page
e.g. title, logo
<!--!footer--> the footer area of the page
e.g. copyright, source, version, pagegen
<!--!navhead--> the headings in the navigation menu
e.g. City Gates, Combat Avenue, Store Street
<!--!navhelp--> a highlighted item in the navigation menu
e.g. Skill headings like "Dark Arts"
<!--!navitem--> a link in the navigation menu
e.g. Forest, Travel, Preferences
<!--!statstart--> the start of the 'vital info' table
<!--!stathead--> a heading in the 'vital info' table
e.g. Vital Info, Equipment Info
<!--!statrow--> a stat's name/value pair
e.g. "Name Farmboy blarg", "Level 1"
<!--!statbuff--> a buff name/value pair
e.g. "Buzz (10 rounds left)"
<!--!statend--> the end of the vital info table
<!--!petitioncount--> the number and type of petitions there are
<!--!adwrapper--> a container for ads
<!--!login--> the login image, username/password fields, and button
<!--!loginfull--> a disabled login section for when the server is full

Return to Contents

Replacement Tokens


Replacement tokens take the following form:

{tokenname}

That is, the name of the token surrounded by curly braces. Note that some of the tokens will only work if they are found in certain template sections and still others are required to exist or the template won't work at all.

Here is a table of the current replacement tokens, what sections they go in, and what they are for based on their context. Required tokens are red and italicized.

Token Name Valid Sections Token Used For
{title} popuphead the title that goes in <title> </title>
- the actual title on the page
header the title that goes in <title> </title>
- the actual title on the page
navhead a heading in the navigation menu
stathead a heading in the character stats info
statrow name of a specific stat
statbuff name of a buff
{copyright} popupfoot the game's licensing and copyright information
footer the game's licensing and copyright information
{headscript} header JavaScript for the <head> section of the html page
{script} header any other JavaScript for the page
{motd} header OR footer link for the 'Message of the Day'
{mail} header OR footer link for 'Ye Olde Mail'
{petition} header OR footer link for 'Petition for Help'
{navad} any An ad intended to be included in the navigation area
{nav} header OR footer the navigation menu
{text} navhelp the text in a navhelp item
navitem a link's text
{link} navitem target URL for a navigation menu item
{accesskey} navitem keyboard shortcut key for a navigation menu item
{popup} navitem call to JavaScript function if a link is for a popup
{stats} header OR footer the vital info table
{value} statrow the value for a character stat
statbuff the value of a buff
{headerad} any an ad intended for the header area of the page
{bodyad} any an ad intended for the main body area of the page
{petitioncount} petitioncount a listing of the current number and types of petitions
{petitiondisplay} header OR footer where the petitioncount will show up
{paypal} header OR footer Paypal links/images
{verticalad} any a vertical ad
{pagegen} footer the page generation times
{source} header OR footer link to view the PHP source of the page
{version} footer the current game's version info
{content} adwrapper the content of an ad
{username} login the username label
{password} login the password label
{button} login the text on the login button

Return to Contents

Testing


To test your skin, upload/copy/etc. your files to your LoGD server into the templates directory as indicated previously. Don't forget your images directory if you have one.

Login to the game and your new skin should automatically show up on the User Preferences page.

Now take your skin for a test drive and see how everything looks. Note that you will need to be an admin-type (or enlist the help of one) to see how the translator and the debugging styles look.


Return to Contents

References


Here are some of the sites I've used while working on skins.

The Web Design Group's HTML Reference
Dave Raggett's Introduction to CSS (especially for the Colour Palette)
Code Style's Font Samplers
Somacon's CSS Color Chart


Return to Contents

Tools


Here are some of the tools I've used while working on skins.

  • XEmacs
    Currently my favourite text editor. Think of it as a GUI version of Emacs. Originally for the X-Windows system, it's been ported to other platforms as well.

  • Mozilla Suite and Firefox
    My web browsers of choice. The best part about these is the Web Developer Extension by Chris Pederick. Among other things, this extension lets you swap out CSS files on the fly with any website, even live ones!

  • For any graphics I make, I use Paint Shop Pro and Photoshop. Unfortunately, these are commercial, though they both have trial versions you can download. The free alternative I sometimes use is The Gimp.

  • W3C CSS Validator and HTML Validator
    And lastly, having learned this later on, it really helps with things like cross-browser compatibility if your skin successfully validates against the W3C's CSS and HTML validators.

Return to Contents

Credits


Thanks, of course, must go out to MightyE and Kendaer for their fantastic game and their incredible amount of involvement with both the user and the modder community. Thanks also to the users and modders who tried out my skins and gave their feedback.


Return to Contents

Closing


And finally, thanks to you for reading at least some of this.. I hope it helps you with creating your own skins for LoGD and I can't wait to see some of them get posted to DragonPrime!

If you would like to contact me about anything in this document, the best place would be on the DragonPrime.net forums (post or PM), but you're also welcome to PM me on the main lotgd.net forums or even send me a YOM on Central or DragonCat. My username on all those servers is 'blarg'. Or if you would prefer to email me, send it to blargeth at gmail dot com with 'LoGD' somewhere in the subject.

Now stop reading and get creating! :D

-- Ben 'blarg' Wong



Return to Contents

Document History


2007/09/12 - version 0.4web
  • [BW] Fixed broken/incomplete html and a few other minor tweaks
2006/02/05 - version 0.3web
  • Converted to HTML for use on DragonPrime by Talisman
  • Formatted document incorporated in DragonPrime
  • Edits by Chris Vorndran

2004/11/09 - version 0.3
  • fixed some spelling/wording errors
  • added a small section about tools

2004/10/30 - version 0.2
  • Added 'valid section' column to the table of replacement tokens

2004/10/28 - version 0.1
  • Completed first draft of this document
  • Posted to DragonPrime

Return to Contents


*
DragonPrime Notices
Play LoGD on Dragonprime

Support Us
No funds raised yet this year
Your help is greatly appreciated!
Recent Topics
DragonPrime LoGD
Who's Online
21 Guests, 0 Users
Home Forums News Downloads Login Register Advanced Search