Infobox Demo and Tutorial

Discussion in 'Character Biographies' started by jianmingyong, Aug 25, 2017.

  1. Information

    View the lore information BEFORE posting an application.

    Event Notices

    >Click here to view<

    Character Creation Information

    >Click here to view<

    Lore Information

    >Click here to view<

  2. Invite your friends

    Invite your friends and get a free Project Zomboid key

    Read More

  3. Factions News



    Click the link to view information regarding playable IC Factions



    >> Click HERE for Lore Information <<



    Dismiss Notice
  1. jianmingyong

    jianmingyong Website Developer - The Dialga Team
    Staff Member Manlet Warrior Owner

    Joined:
    Sep 16, 2015
    Messages:
    192
    Likes Received:
    90

    Primal Fanta Dorumon
    [​IMG]
    Biographical Information
    TypeDigimon and Pokemon
    InheritPrimal Dialga
    More Information
    LikesFanta
    HatesBattle


    This is a demo of the new infobox functionality! It is responsive hence it supports on both desktop and mobiles. (Older mobiles/browser that doesn't support css 3 may not display properly, please update your browser if that's the case) We recommend using Chrome/Firefox latest version for full compatibility.

    To use it, you can simply use the following template as shown below:
    It depicts the same demo as shown on the right of this text >>>


    Code:
    [infobox="color: orange;"]
    [infoboxheader="background-color: green;"]Primal Fanta Dorumon[/infoboxheader]
    [infoboximage][IMG]http://newdawn.aggressivegaming.org/attachments/primal-fanta-dorumon-png.829/[/IMG][/infoboximage]
    
    [infoboxheader="background-color: #FF0000;"]Biographical Information[/infoboxheader]
    [infoboxcontent=Type]Digimon and Pokemon[/infoboxcontent]
    [infoboxcontent=Inherit]Primal Dialga[/infoboxcontent]
    
    [infoboxheader][COLOR=#00ff00]More Information[/COLOR][/infoboxheader]
    [infoboxcontent=Likes]Fanta[/infoboxcontent]
    [infoboxcontent=Hates]Battle[/infoboxcontent]
    [/infobox]
    Primal Fanta Dorumon
    [​IMG]
    Biographical Information
    TypeDigimon and Pokemon
    InheritPrimal Dialga
    More Information
    LikesFanta
    HateBattle


    This infobox is coded to be super flexible in design. All you need are these 4 BBCodes and you can create your own custom info boxes!

    To use it, you can simply use the following template as shown below:

    <<< It depicts the same demo as shown on the left of this text

    Code:
    [infobox="float:left;"]
    [infoboxheader]Primal Fanta Dorumon[/infoboxheader]
    [infoboximage][IMG]http://newdawn.aggressivegaming.org/attachments/primal-fanta-dorumon-png.829/[/IMG][/infoboximage]
    
    [infoboxheader]Biographical Information[/infoboxheader]
    [infoboxcontent="Type"]Digimon and Pokemon[/infoboxcontent]
    [infoboxcontent="Inherit"]Primal Dialga[/infoboxcontent]
    
    [infoboxheader]More Information[/infoboxheader]
    [infoboxcontent="Likes"]Fanta[/infoboxcontent]
    [infoboxcontentstyle="background-color:cyan; color: black;"][infoboxcontenttext="Hate"]Battle[/infoboxcontenttext][/infoboxcontentstyle]
    [/infobox]
    1. Base Infobox (Updated):
    Code:
    [infobox="Optional css insert here"][/infobox]
    Code:
    [infoboxleft="Optional css insert here"][/infoboxleft]
    This is required for any of the infobox. It serves as a base container for other infobox element to float on the right as shown in the demo.

    [infoboxleft][/infoboxleft] - Shorthand for float left.



    2. Infobox Header (Updated):

    Code:
    [infoboxheader="Optional css insert here"][/infoboxheader]
    Code:
    [infoboxheadercolor="background color code"][/infoboxheadercolor]

    Header is a separator to categories the information shown in the infobox.


    3. Infobox Images:

    Code:
    [infoboximage="Optional css insert here"][/infoboximage]

    This displays images in the infobox. It will resize all the big picture exceeding 300px in size. It support images from url or from XF attachments.


    4. Infobox Content (OLD):

    Code:
    [infoboxcontent="Title"]Message[/infoboxcontent]

    This displays information with a title and a message as shown in the demo. This does not support style changes including and not limiting to background colour.


    5. Infobox Content Style/Text (NEW):
    Code:
    [infoboxcontentstyle="Optional css insert here"][infoboxcontenttext="Title"]Message[/infoboxcontenttext][/infoboxcontentstyle]
    Code:
    [infoboxcontentstylecolor="background color code"][infoboxcontenttext="Title"]Message[/infoboxcontenttext][/infoboxcontentstylecolor]

    This is similar to the above infobox content but with the ability to change the style all you want.

    CSS Quick Reference:

    1. CSS background-color Property
    The background-color property sets the background color of an element.
    background-color: yellow;
    background-color: #00ff00;
    background-color: rgb(255,0,255);



    2. CSS color Property
    The color property specifies the color of text.
    color: red;
    color: #00ff00;
    color: rgb(0,0,255);


    Preemptive Questions (FAQs):

    1. Can I change the background colour of the section header to something else instead of dark blue?

    A: Yes you can via the following css: [infoboxheader="background-color: blue;"]
    "background-color" property changes the background colour of the infobox header.

    2. How do I change the font colour of the header?
    A: You can change using the color property or simply change the text colour using the forum editor:
    [infoboxheader="color: blue;"]More Information[/infoboxheader]
    [infoboxheader][COLOR=#00ff00]More Information[/COLOR][/infoboxheader]


    3. Infobox too small... can I enlarge it?
    A: You can change the size to your liking but do note that the image is capped at 300 px for optimal purposes.
    [infobox="width: 500px;"]

    4. Must the infobox be always on the right?
    A: Nope. You can always use the left version by adding "float" property in the base infobox css field.
    [infobox="float: left;"]

    1. test
     
    #1 jianmingyong, Aug 25, 2017
    Last edited: Jan 1, 2019
    Oddish, Legion, Dop 2.0 and 6 others like this.
  2. jianmingyong

    jianmingyong Website Developer - The Dialga Team
    Staff Member Manlet Warrior Owner

    Joined:
    Sep 16, 2015
    Messages:
    192
    Likes Received:
    90
    Added a few more bbcode.
    [infoboxleft] - Shorthand for float left.
    [infoboxheadercolor] - Shorthand for changing background colour
    [infoboxcontentstylecolor] - Shorthand for changing background colour
    [infoboxcontentstyle]
    [infoboxcontenttext]

    1. Base Infobox (Updated):
    Code:
    [infobox="Optional css insert here"][/infobox]
    Code:
    [infoboxleft="Optional css insert here"][/infoboxleft]
    This is required for any of the infobox. It serves as a base container for other infobox element to float on the right as shown in the demo.

    2. Infobox Header (Updated):
    Code:
    [infoboxheader="Optional css insert here"][/infoboxheader]
    Code:
    [infoboxheadercolor="background color code"][/infoboxheadercolor]

    Header is a separator to categories the information shown in the infobox.


    5. Infobox Content Style/Text (NEW):
    Code:
    [infoboxcontentstyle="Optional css insert here"][infoboxcontenttext="Title"]Message[/infoboxcontenttext][/infoboxcontentstyle]
    Code:
    [infoboxcontentstylecolor="background color code"][infoboxcontenttext="Title"]Message[/infoboxcontenttext][/infoboxcontentstylecolor]

    This is similar to the above infobox content but with the ability to change the style all you want.
     
    #2 jianmingyong, Sep 27, 2017
    Last edited: Sep 27, 2017