T3.5 Graphic Packs Information
I. Directory structure of the standard graphic pack
1. /img
In this directory all language independent images are stored:Code:a General f Alliance Forum g Buildings and Background Images for the village views l Layout m Map misc Miscellaneous msg Messages p Plus-Offers q Quests 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:Code: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
- The games 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:
Code: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 <img /> 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. Its 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_font-[specification].css
In the files named travian_fonts-[specification].css definitions for font styles are kept.
Path:
.../modules/travian_fonts-[specification].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:
... font-size
... font-weight
... font-style
... color
... font-family
... font-decoration
6. travian_hacks-[specification].css
In the files called travian_hacks-[specification].css temporary styles are defined.
Path:
.../modules/travian_hacks-[specification].css
Contained Styles:
...No limitations
7. travian_images-[specification].css
In the files named travian_images-[specification].css all definitions for language independent images are kept.
Path:
.../modules/travian_images-[specification].css
Structure:
... Buttons
... Texts (e.g. Headings)
... Images
Contained Styles:
... width
... height
... background-image
... background-repeat
... background-position
8. travian_layout-[specification].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-[specification].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-[specification].css
In the files named travian_table-[specification].css definitions all definitions for elements within tables are kept.
Path:
.../modules/travian_table-[specification].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.
Originally Posted by The Lynx
