Results 1 to 2 of 2

Thread: T3.5 Graphic Packs Information

  1. #1
    Retired Game Admin Fighter1405's Avatar
    Join Date
    Jan 2008
    Location
    United Kingdom
    Posts
    2,602

    Default 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 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_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.

    |Travian Manual|Forum Rules|Server Rules|
    "Veni, Vidi, Victus sum"

  2. #2
    Retired Game Admin Fighter1405's Avatar
    Join Date
    Jan 2008
    Location
    United Kingdom
    Posts
    2,602

    Default

    We also have a nice little guide from the Lynx on implementing a background image for a graphics pack

    Quote Originally Posted by The Lynx
    By inserting in the travian_images-ltr.css file,

    div#mid {background-image:url(../img/a/background.gif);background-repeat:repeat-y;background-position:left 0px;}

    immediately underneath of

    div#mid {background-image:url(../img/a/rand.gif); background-repeat:repeat-y; background-position:left 0px;}

    (so before the div#footer), where background.gif is your chosen background picture, you can have a background image in your graphic pack instead of just a colour. You can also use .jpg if you prefer. To make it look better, also try fiddling with the other 'background' images, namely img/l/mw.gif and mp.gif, and img/a/btm.gif .

    You can also substitute the first line for the second, but I *think* you might be able to play with background colours more if keep it.

    OR

    If you want the image to go all the way down, and not stop at the footer, then in the travian_layout-ltr.css, you can replace the line

    body {text-align:left; direction:ltr; margin:0px; background-color:#FFFFFF;}

    with

    body {text-align:left; direction:ltr; margin:0px; background-image:url(../img/a/background.gif);background-repeat:repeat-y;background-position:left 0px;}

    |Travian Manual|Forum Rules|Server Rules|
    "Veni, Vidi, Victus sum"

Posting Permissions

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