Skinning Project

From The Shartak Wiki
Revision as of 20:21, 15 July 2014 by Simon (talk | contribs) (Added information about custom inventory appearance)
Jump to navigationJump to search

To customise the look of your Shartak page, you will need a web server to host the required files due to a security restriction in Firefox (and probably Internet Explorer too). The original Shartak Skinning Project files are hosted on Shartak's main webserver, but yours can be hosted anywhere and don't take much space.

Required files at a minimum are the stylesheet (.css) file for defining your styles and any images that your stylesheet needs.

An example of the stylesheet file can be found at http://www.shartak.com/skin/lama.css

Once you have hosted your stylesheet and image files, you need to login to your character and edit your preferences at http://www.shartak.com/editprofile.cgi

Scroll down and where it has Choose your map display preference: under the Display Options, choose Custom - Enter full URI of CSS file: and enter the full address of your stylesheet file. Click the Update Profile button at the bottom and if you've done it correctly you should see your changes.

The stylesheet explained

The first line of the stylesheet must (in order to include the default Shartak styles) be

@import url('http://www.shartak.com/styles.css');

To use the Shartak Skinning Project styles as the defaults and just amend certain bits, you can import http://www.shartak.com/skin/lama.css instead.

@import url('http://www.shartak.com/skin/lama.css');

After this, any normal CSS can be added although typically it'll just be background images for the different tile types which should be specified using the full url of wherever you've hosted the images.

To reference all map tiles, you can use table.main_map td.map in your CSS.

If you host your css at http://www.domain.com/shartak.css and put the images in the same folder as the shartak.css file then you would refer to the images in the CSS file as follows.

.beach { background: url('http://www.domain.com/beach.gif'); }

If you wanted to change the colour of the block name, you would use

 td.beach span.blockname { color: #000000; }

Style names are listed in the table below.

Class name Tile type
density0 Jungle/Camp density 0
density1 Jungle/Camp density 1
density2 Jungle/Camp density 2
density3 Jungle/Camp density 3
density4 Jungle/Camp density 4
density5 Jungle/Camp density 5
density6 Jungle/Camp density 6
density7 Jungle/Camp density 7
density8 Jungle/Camp density 8
density9 Jungle/Camp density 9
density10 Jungle/Camp density 10 (impassable)
water Shallow water
water2 Deep Water (where sharks might attack)
water3 Ocean (impassable)
swamp Swamp
beach Beach, usually adjacent to water
mountain The side of the mountain
snow Snow - currently only found in Sacred Space
lawn Lawn - currently only found in Sacred Space
mudpool Mudpools - currently only found in Sacred Space
flowers Flower garden - currently only found in Sacred Space
shrubbery Shrubbery - currently only found in Sacred Space. Shartak Skinning Project defaults to the same as density5
grassland Grassland
air Mid-air, found around the Pirate Ship Crow's Nest and up on the mountain paths (impassable)
ruins The interior of most ruins
tunnel In the tunnels under the island
pship The Pirate Ship
pnest In the Pirate Ship Crow's Nest
hut Inside an average hut
natammohut Inside the native camp weapon huts (blowpipes and darts)
natmedhut Inside the native medical huts (healing herbs)
nattrade Inside the native trading post
outammohut Inside the outsider weapon hut (rifles and bullets)
outmedhut Inside the outsider medical hut (first aid kits)
outtrade Inside the outsider trading post

There are other styles, but these are the tile styles for the main game page - http://www.shartak.com/game.cgi

Inventory appearance

Each item displayed in the inventory has a custom CSS class of "inv-XX" where XX is the two digit base-36 item id. Custom items tend to begin Y and Z, normal items begin with 0, 1 and 2 (so far).

There is also a more general "invtype-XXX" CSS class where XXX is drink, food, healing, misc, special, tool or weapon.