Create Skins

Create Skins

How to:  Create Skins
Author:  Ben 'blarg' Wong



Contents



Introduction
Before You Start
Let's Begin
Images Directory
The CSS File
  
    General Tag Styles
     General Class Styles
    Specific Tag-and-Class Styles
  
The HTM File
  
    Template Sections
    Replacement Tokens
  
Testing
References
Tools
Credits
Closing
Document History



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-familyfont-size
  default for table data cells

  a
  colortext-decoration
  default for links

  input
  font-familyfont-sizebordercolorbackground-color
  Default for input fieldse.g. village chats

  select
  bordercolorbackground-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-familyfont-sizecolor
  Main page title at the top of a page
      e.g. "Degolburg, the Capital City","LoDG News", "The Forest"

  .navhead
  heightwidthpaddingbordercolor
      background-colorfloatclearfont-weight
      text-decorationtext-alignline-height
  Headings in the Navigation Menu
      e.g. "City Gates", "Combat Avenue","Store Street", "Ale Alley"

  .navhelp
  heightwidthpaddingborderfloatclear
      text-decoration
  A way to highligh items in Navigation Menu
      e.g. Skill headings like "Dark Arts"

  .navhi
  colorbackground-colortext-decoration
  The hot key for a nav menu item
      e.g. the 'F' in Forest, the 'T' in Travel

  .input
  bordercolorbackground-color
  Fields for text inpute.g. the large textarea in YOMs

  .button
  font-familyfont-sizeborder-topborder-left
      border-rightborder-bottomcolorbackground-color
  Input buttonse.g. Login, Submit, Search, Add

  .trhead
  colorbackground-color
  Table headingse.g. Alive, Level, Name, Location

  .trlight
  colorbackground-color
  Light coloured table rows

  .trdark
  colorbackground-color
  Dark coloured table rows

  .trhilight
  colorbackground-color
  Highlighted table rowse.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
  heightwidthpaddingfloatcleartext-decoration
  The links in the Navigation Menu
      e.g. Forest, Travel, Preferences

  a:hover.nav
  colorbackground-color
  Mouseover effects for nav links

  a.motd
  heightwidthpaddingfloatclearcolor
      background-colortext-decorationtext-align
  Links for MoTD, YOM, and Petition

  a:hover.motd
  heightwidthpaddingcolorbackground-color
  Mouseover effects for MoTD, YOM, and Petition

  a.hotmotd
  heightwidthpaddingfloatclearcolor
      background-colorfont-weighttext-decorationtext-align
  When a new MoTD/YOM is available

  a.t
  font-sizeheightwidthborderpaddingcolor
      background-color
  Translater tool links

  a.thot
  font-sizeheightwidthborderpaddingcolor
      background-color
  Translation tool links for lines currently without a translation

  td.pageheader
  heightbackground-color
  Heading for main page

  td.popupheader
  heightbackground-color
  Heading in a popupe.g. MoTD, YOM

  table.nav
  widthbordercolorbackground-color
  The overall Navigation Menu

  td.nav a.t
  positionleftheight
  Forces translation links to a certain position 
      (typically to the left edge of the page)

  td.nav a.thot
  positionleftheight
  Forces untranslated links to a certain position 
      (typically to the left edge)

  table.vitalinfo
  widthborderbackground-color
  Wrapper table for vital info

  table.charinfo
  widthbackground-color
  The table with character stats

  td.charhead
  bordercolorbackground-color
  Character stat category headinge.g. Vital Info, Equipment Info

  td.charinfo
  border-toppaddingcolor
  Specific character stat datae.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-sizeheightwidthbordercolor
      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 windowse.g. MoTD, YOM

  <!--!popupfoot-->
  The footer area in popup windowse.g. copyright

  <!--!header-->
  the header area of the pagee.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 menue.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 paire.g. "Name  Farmboy blarg", "Level  1"

  <!--!statbuff-->
  a buff name/value paire.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
W3 School's CSS2 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