Difference between revisions of "Skinning Project"
(Added more information about setting the custom css in your profile) |
(Added information about custom inventory appearance) |
||
Line 20: | Line 20: | ||
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. | ||
Line 107: | 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'''. |
Revision as of 20:21, 15 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.