Results 1 to 3 of 3

Thread: [Guideline] Graphic Pack Documentation

  1. #1
    Customer Service Representative Tschena's Avatar
    Join Date
    14.09.2006
    Posts
    2,026

    Default [Guideline] Graphic Pack Documentation

    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 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:
    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
    • 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:
      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. 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

  2. #2
    Customer Service Representative Tschena's Avatar
    Join Date
    14.09.2006
    Posts
    2,026

    Default

    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.

  3. #3

    Question doubt

    hi
    i'm new to the forum and i have a problem with the direct links. in preferences when i write the name and the target and try it it goes to fast browser search instead os going to the target please help me

Similar Threads

  1. New Graphic Pack
    By The Lynx in forum Graphicpacks, Maps, & Add-On Projects
    Replies: 1
    Last Post: 23.05.2011, 07:28
  2. How to use Graphic Pack?
    By Travinater in forum Gameplay questions
    Replies: 3
    Last Post: 21.01.2010, 21:05
  3. [Guideline] Graphic Pack Documentation
    By Tschena in forum General
    Replies: 1
    Last Post: 30.09.2009, 09:31
  4. Graphic pack
    By monteme0 in forum Grump-Corner
    Replies: 3
    Last Post: 11.04.2009, 12:40
  5. graphic pack
    By stinkoman in forum Bug-Report/Server failures
    Replies: 4
    Last Post: 01.01.2008, 19:21

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •