Difference between revisions of "Skinning Project"

From The Shartak Wiki
Jump to navigationJump to search
(How to style shartak with your own images)
 
(→‎Inventory appearance: Removed item never used)
 
(5 intermediate revisions by the same user not shown)
Line 4: Line 4:
  
 
An example of the stylesheet file can be found at http://www.shartak.com/skin/lama.css
 
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
 
The first line of the stylesheet must (in order to include the default Shartak styles) be
  
 
  @import url('http://www.shartak.com/styles.css');
 
  @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.
 
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.
 
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''''); }
 
  .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.
 
Style names are listed in the table below.
Line 93: Line 109:
  
 
There are other styles, but these are the tile styles for the main game page - http://www.shartak.com/game.cgi
 
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'''.
 +
 +
'''The table below is automatically generated by Simon - do not edit!'''
 +
 +
{|border="1" cellspacing="0" cellpadding="2" width="80%"
 +
|-
 +
||'''Id''' ||'''Name''' ||'''Id''' ||'''Name''' ||'''Id''' ||'''Name'''
 +
|-
 +
||01||machete
 +
||02||blowpipe
 +
||03||poison dart
 +
|-
 +
||04||rifle
 +
||05||bullet
 +
||06||first aid kit
 +
|-
 +
||07||healing herb
 +
||08||gps unit
 +
||09||gold coin
 +
|-
 +
||0A||monkey claw charm
 +
||0B||sharpening stone
 +
||0C||blunt machete
 +
|-
 +
||0D||gourd of water
 +
||0E||banana
 +
||0F||mango
 +
|-
 +
||0G||bunch of tasty berries
 +
||0H||bunch of poisonous berries
 +
||0I||bottle of water
 +
|-
 +
||0L||heavy sword
 +
||0M||bottle of beer
 +
||0N||piece of driftwood
 +
|-
 +
||0O||crab
 +
||0P||dagger
 +
||0Q||gem
 +
|-
 +
||0R||cutlass
 +
||0S||poisonous snake
 +
||0T||knife
 +
|-
 +
||0U||bottle of rum
 +
||0V||blunt cutlass
 +
||0W||empty bottle
 +
|-
 +
||0X||empty gourd
 +
||0Y||parrot feather charm
 +
||0Z||tiger tooth amulet
 +
|-
 +
||10||silver skull cross
 +
||11||rabbit foot charm
 +
||13||blunt dagger
 +
|-
 +
||14||blunt knife
 +
||15||shovel
 +
||16||Easter egg
 +
|-
 +
||17||egg
 +
||18||bottle of banana juice
 +
||19||gourd of banana juice
 +
|-
 +
||1A||bottle of mango juice
 +
||1B||gourd of mango juice
 +
||1C||bottle of tasty berry juice
 +
|-
 +
||1D||gourd of tasty berry juice
 +
||1E||bottle of poison berry juice
 +
||1F||gourd of poison berry juice
 +
|-
 +
||1G||backpack
 +
||1H||pumpkin
 +
||1I||bottle of pumpkin juice
 +
|-
 +
||1J||gourd of pumpkin juice
 +
||1K||ghastly jack o'lantern
 +
||1L||jolly jack o'lantern
 +
|-
 +
||1M||switched off gps unit
 +
||1N||skull
 +
||1O||wooden club
 +
|-
 +
||1P||piece of dead wood
 +
||1Q||wild boar tusk necklace
 +
||1R||pair of batwing earrings
 +
|-
 +
||1S||pair of gold hoop earrings
 +
||1T||fungi
 +
||1U||bottle of fungi juice
 +
|-
 +
||1V||gourd of fungi juice
 +
||1W||pistol
 +
||1X||pistol bullet
 +
|-
 +
||1Y||apple
 +
||1Z||bottle of apple juice
 +
||20||gourd of apple juice
 +
|-
 +
||21||smokey crystal
 +
||23||empty seed bag
 +
||24||mango seeds
 +
|-
 +
||25||tasty berry seeds
 +
||26||banana seeds
 +
||27||poisonous berry seeds
 +
|-
 +
||28||apple seeds
 +
||29||pumpkin seeds
 +
||2A||yeastweed
 +
|-
 +
||2C||bottle of tasty berry wine
 +
||2D||gourd of tasty berry wine
 +
||2E||bottle of poison berry wine
 +
|-
 +
||2F||gourd of poison berry wine
 +
||2G||bottle of apple cider
 +
||2H||gourd of apple cider
 +
|-
 +
||2I||bottle of banana beer
 +
||2J||gourd of banana beer
 +
||2K||bottle of mango wine
 +
|-
 +
||2L||gourd of mango wine
 +
||2M||tinder
 +
||2N||pair of dice
 +
|-
 +
||2O||rune sticks
 +
||2P||map to Dalpok
 +
||2Q||map to Wiksik
 +
|-
 +
||2R||map to Raktam
 +
||2S||map to York
 +
||2T||map to Derby
 +
|-
 +
||2U||map to Durham
 +
||2V||map to Rakmogak
 +
||2W||map to shipwreck
 +
|-
 +
||2X||bottle of absinthe
 +
||2Y||treasure map
 +
||2Z||treasure map
 +
|-
 +
||YA||whale oil
 +
||YB||wooden plank
 +
||YC||clockwork spider monkey
 +
|-
 +
||YD||Assassin's Dagger
 +
||Z0||Spring X-Game I Cup
 +
||Z1||Obsidian Spear
 +
|-
 +
||Z2||Kalmogal's Glove
 +
||Z3||iron harpoon
 +
||Z4||VickSick camera
 +
|-
 +
||Z5||gold ring
 +
||Z6||gold ring
 +
||Z7||gold skull necklace
 +
|-
 +
||Z8||trident
 +
||Z9||Brawler's tankard
 +
||ZA||bolo knife
 +
|-
 +
||ZB||pink-and-purple scarf
 +
||ZC||skull staff
 +
||ZD||ornate staff
 +
|-
 +
||ZE||pith helmet
 +
||ZF||Club Palermo pint glass
 +
||ZG||plain wooden cup
 +
|-
 +
||ZH||hunting rifle
 +
||ZI||glowing crystal pendant
 +
||ZJ||bludgeon of Mal
 +
|-
 +
||ZK||cursed sceptre
 +
||ZL||pocket watch
 +
||ZM||alligator kukri
 +
|-
 +
||ZN||alligator tooth necklace
 +
||ZO||bear skin cloak
 +
||ZP||bear claw flail
 +
|-
 +
||ZQ||bear claw gauntlet
 +
||ZR||shargle beak kukri
 +
||ZS||goat horned headdress
 +
|-
 +
||ZT||harpoon
 +
||ZU||cat-o-nine tails
 +
||ZV||tricorn hat
 +
|-
 +
||ZW||falcon
 +
||ZX||black rose
 +
||ZY||axe
 +
|-
 +
||ZZ||pike
 +
||- ||-
 +
||- ||-
 +
|}

Latest revision as of 22:41, 16 July 2014

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.

The table below is automatically generated by Simon - do not edit!

Id Name Id Name Id Name
01 machete 02 blowpipe 03 poison dart
04 rifle 05 bullet 06 first aid kit
07 healing herb 08 gps unit 09 gold coin
0A monkey claw charm 0B sharpening stone 0C blunt machete
0D gourd of water 0E banana 0F mango
0G bunch of tasty berries 0H bunch of poisonous berries 0I bottle of water
0L heavy sword 0M bottle of beer 0N piece of driftwood
0O crab 0P dagger 0Q gem
0R cutlass 0S poisonous snake 0T knife
0U bottle of rum 0V blunt cutlass 0W empty bottle
0X empty gourd 0Y parrot feather charm 0Z tiger tooth amulet
10 silver skull cross 11 rabbit foot charm 13 blunt dagger
14 blunt knife 15 shovel 16 Easter egg
17 egg 18 bottle of banana juice 19 gourd of banana juice
1A bottle of mango juice 1B gourd of mango juice 1C bottle of tasty berry juice
1D gourd of tasty berry juice 1E bottle of poison berry juice 1F gourd of poison berry juice
1G backpack 1H pumpkin 1I bottle of pumpkin juice
1J gourd of pumpkin juice 1K ghastly jack o'lantern 1L jolly jack o'lantern
1M switched off gps unit 1N skull 1O wooden club
1P piece of dead wood 1Q wild boar tusk necklace 1R pair of batwing earrings
1S pair of gold hoop earrings 1T fungi 1U bottle of fungi juice
1V gourd of fungi juice 1W pistol 1X pistol bullet
1Y apple 1Z bottle of apple juice 20 gourd of apple juice
21 smokey crystal 23 empty seed bag 24 mango seeds
25 tasty berry seeds 26 banana seeds 27 poisonous berry seeds
28 apple seeds 29 pumpkin seeds 2A yeastweed
2C bottle of tasty berry wine 2D gourd of tasty berry wine 2E bottle of poison berry wine
2F gourd of poison berry wine 2G bottle of apple cider 2H gourd of apple cider
2I bottle of banana beer 2J gourd of banana beer 2K bottle of mango wine
2L gourd of mango wine 2M tinder 2N pair of dice
2O rune sticks 2P map to Dalpok 2Q map to Wiksik
2R map to Raktam 2S map to York 2T map to Derby
2U map to Durham 2V map to Rakmogak 2W map to shipwreck
2X bottle of absinthe 2Y treasure map 2Z treasure map
YA whale oil YB wooden plank YC clockwork spider monkey
YD Assassin's Dagger Z0 Spring X-Game I Cup Z1 Obsidian Spear
Z2 Kalmogal's Glove Z3 iron harpoon Z4 VickSick camera
Z5 gold ring Z6 gold ring Z7 gold skull necklace
Z8 trident Z9 Brawler's tankard ZA bolo knife
ZB pink-and-purple scarf ZC skull staff ZD ornate staff
ZE pith helmet ZF Club Palermo pint glass ZG plain wooden cup
ZH hunting rifle ZI glowing crystal pendant ZJ bludgeon of Mal
ZK cursed sceptre ZL pocket watch ZM alligator kukri
ZN alligator tooth necklace ZO bear skin cloak ZP bear claw flail
ZQ bear claw gauntlet ZR shargle beak kukri ZS goat horned headdress
ZT harpoon ZU cat-o-nine tails ZV tricorn hat
ZW falcon ZX black rose ZY axe
ZZ pike - - - -