[Guideline] Graphic Pack Documentation

[Tschena]

I. Directory structure of the standard graphic pack

1. /img

In this directory all language independent images are stored:

a       general
f       alliance forum
g       buildings and background images for the village view
l       layout
m       map
misc    miscellaneous
msg     messages
p       plus offers
q       tasks
r       resources
s       statistics
special fireworks
t       medals
u       troops
u2      large troops
u2rtl   large troops (mirrored)

2. /lang/[language code]

In this directory all language dependent images are stored:

a         general
b         buttons
f         alliance forum
msg       messages
p         plus offers
t1        headings
t2        headings

3. /modules

In this folder the different CSS-Modules are located. Check chapters III.5 to III.9 for more information.

II. Graphic Pack Logo

In the main directory the gp_preview.gif is located which you can use to display a logo when a user activates the graphic pack.
Once a path has been entered into the respective are in the graphic pack preferences and OK has been clicked, the graphic pack will be validated. Assuming it is valid, the gp_preview.gif will be displayed as well in the window.

III. CSS Files

1. General Guideline

• All classes, IDs and comments in the CSS files have been written in English. To avoid confusion they will be kept this way in this document.
  
  
• The gameʼs layout is divided into two parts:
  • always visible (menus, navigation, village & hotlink list)
  • changing area in the middle (the actual content of a page)
  To prevent overwriting settings different CSS classes per view have been introduced.
  Depending on what page you look at in the game the div container with the ID “content” has a different class assigned to it. Prefixing a CSS definition by “div.[content class selector]” you can make sure that it only applies to that specific page of the game.
  
  Possible content class selectors:
  

  a2b           Sending troops
  activate      activating accounts
  alliance      alliance
  build         constructing buildings
  error_site    error pages
  forum         alliance forum
  login         login
  logout        logout
  manual        manual
  map           map
  messages      messages
  player        profile
  plus          plus
  reports       reports
  signup        signing up
  statistics    statistics
  support       support
  village1      village overview
  village2      village center
  village3      complete village overview
  warsim        battle simulator

• The CSS files are structured in a certain way (which will be explained in the respective chapter). This structure has been marked by comments to facilitate orientation in the files.
  
  
• All CSS files in the folder modules have a suffixed attached after the actual file name. For example “-ltr” means “left to right” and “-rtl” hence means “right to left”. Both examples obviously concern the reading direction of a HTML document.
  
  
• Images are no longer embedded using the “src” attribute in the tag in the HTML. The HTML only references to a transparent GIF which is manipulated in the respective CSS file using the background property. This has following advantages:
  
  
  • Images (for example troops) can be combined into a single image. That way only a single image has to be loaded which is then moved into position using the background position property in CSS. This reduced loading times in the game.
    
    
  • Due to being controlled by the CSS and available in the graphic pack, all images can be modified without having access to the source code.

2. gp_check.css

This file enables activation of the graphic pack. Only when this file has been correctly integrated into the graphic pack, the button to save the graphic pack selection is available.
That is why you should not modify the file.
This file has to be part of the graphic pack.

Path:
.../lang/[language_code]/gp_check.css

3. lang.css

In this file the style definitions for language depending images are controlled.
This file has to be part of the graphic pack.

Path:
.../lang/[language_code]/lang.css

Structure:
...• Buttons
...• Texts (e.g. headings)
...• Images

Contained Styles:
...• width
...• height
...• background-image
...• background-repeat
...• background-position

4. travian.css

This file can be used to create a graphic pack from modules. Depending on the wanted reading direction and font size a different selection of available modules can be combined into a single graphic pack.
Naturally the standard modules should only be considered blue prints and may be modified to ones liking. Itʼs not even mandatory to include them. Instead one may even include own files or even write the wanted style definitions directly into the travian.css file.
This file has to be part of the graphic pack.

Path:
.../travian.css

5. travian_fonts-[spezification].css

In the files named travian_fonts-[specification].css definitions for font styles are kept.

Path:
.../modules/travian_fonts-[spezification].css

Structure:
...• General
...• Layout
...• General elements
...• Servertime
...• Navi
...• Side Navi
...• Side Info
...• Footer Menu
...• Login
...• Signup
...• Activate
...• Village Overview
...• Village Center
...• Village Infos
...• Map
...• Player
...• Alliance
...• Alliance Forum
...• Statistics
...• Reports
...• Messages
...• Buildings
...• Manual
...• Quest
...• Send troops
...• Plus
...• War simulator

Contained definitions:
...• font-size
...• font-weight
...• font-style
...• color
...• font-family
...• font-decoration

6. travian_hacks-[spezification].css

In the files called travian_hacks-[specification].css temporary styles are defined.

Path:
.../modules/travian_hacks-[spezification].css

Structure:
...No limitations

7. travian_images-[spezification].css

In the files named travian_images-[specification].css all definitions for language
independent images are kept.

Path:
.../modules/travian_images-[spezification].css

Structure:
...• Buttons (Schaltflächen)
...• Texts (Texte z.B. Überschriften)
...• Images (Bilder)

Contained styles:
...• width
...• height
...• background-image
...• background-repeat
...• background-position

[Tschena]

8. travian_layout-[spezification].css

In the files named travian_layout-[specification].css definitions for the basic layout are kept. This includes positions of all elements outside of tables and their correlating distances.

Path:
.../modules/travian_layout-[spezification].css

Structure:
...• General
...• Layout
...• General elements
...• Servertime
...• Navi
...• Side Navi
...• Side Info
...• Footer Menu
...• Login
...• Signup
...• Activate
...• Village Overview
...• Village Center
...• Village Infos
...• Map
...• Player
...• Alliance
...• Alliance Forum
...• Statistics
...• Reports
...• Messages
...• Buildings
...• Manual
...• Quest
...• Send troops
...• Plus
...• War simulator

Contained Styles:
Everything outside tables except for font and image definitions.

9. travian_table-[spezification].css

In the files named travian_table-[specification].css definitions all definitions for elements within tables are kept.

Path:
.../modules/travian_table-[spezification].css

Structure:
...• General
...• Layout
...• General elements
...• Servertime
...• Navi
...• Side Navi
...• Side Info
...• Footer Menu
...• Login
...• Signup
...• Activate
...• Village Overview
...• Village Center
...• Village Infos
...• Map
...• Player
...• Alliance
...• Alliance Forum
...• Statistics
...• Reports
...• Messages
...• Buildings
...• Manual
...• Quest
...• Send troops
...• Plus
...• War simulator

Contained Styles:
...Everything inside tables except for font and image definitions.

[cisincgic]

I'm very interested! I would love to find out more.

OK, cool!^_^ I just wanted to make sure I didn't do anything wrong :]