Ads keep us online. Without them, we wouldn't exist. We don't have paywalls or sell mods - we never will. But every month we have large bills and running ads is our only way to cover them. Please consider unblocking us. Thank you from GameBanana <3

Profile Template Code - A Wiki

Updates

Update 3y
  • Overhaul Updated to reflex new syntax
  • Addition Added examples
  • Adjustment Split Wiki into 3 wikis
Welcome to the wonderful world of profile template customization. Remember MySpace? Remember it died because it was super lame? Well, GameBanana loves being lame and old skool, and that's why we have allowed profile template editing for a really long time. You can completely customize your profile, like MySpace. 

1. Getting Started

You can customize the modules, the layout, the colors and more. The easiest way to get started is to use your Member, Studio or Club WYSIWYG editor. Once you get the hang of that, you can move on to the Profile Template Editor, where you can edit the raw template code. 


2. Column Syntax

We use custom HTML tags in combination with a modified version of Flexbox-Grid to power our templates. Here are the basics:

  1. The template must be wrapped in a row tag
  2. Directly within the row tag, you must define column tags
  3. Each column tag should define four view mode classes: xs-n, sm-n, md-n & lg-n where n is a number between 1 and 12. These 4 classes determine what the column should do at different viewport widths
  4. Across all your columns, these classes should each add up to 12

2.1. Example

<row>
  <column class="xs-12 sm-6 md-4 lg-3">Column 1</column>
  <column class="xs-12 sm-6 md-4 lg-3">Column 2</column>
  <column class="xs-12 sm-6 md-4 lg-3">Column 3</column>
  <column class="xs-12 sm-6 md-4 lg-3">Column 4</column>
</row>

In the example above, the template will behave as follows:
  • At the extra small view mode (xs), the columns will appear on top of each other, in a single column
  • At the small view mode (sm), the columns will form 2 columns and 2 rows
  • At the the medium view mode (md), the columns will form 3 columns, and the 4th columns will appear on the next row
  • At the large view mode (lg) the columns will appear in 4 columns

2.2. 3 Column Examples

  • 12,6,6 - column 1 will take full width, column 2 & 3 will share the next row
  • 12,12,12 - all columns take full width & are on top of each other
  • 9,3,12 - column 1 & 2 share first row, with column 1 wide & column 2 thin & column 3 takes up the next row
  • 6,6,6 - column 1 & 2 share the row, column 3 is half wide on the next row, with blank space to the right

2.3. View Modes

The four view modes correspond to the following viewport sizes:
  • xs: up to 500px wide (mobile devices)
  • sm: 501px wide to 700px wide (mobile devices & some tablets)
  • md: 701px wide to 1000px wide (tablets & some laptops)
  • lg: greater than 1001px wide (some tablets, laptops & desktops)

What this means is when the viewport is less than 500px, the profile will use the xs classes. When the viewport is greater than 1001px (most commonly), the profile will use the lg classes.

2.4. Testing

The easiest way to test the columns and how they behave, is to simply reduce the width of the browser. You can drag the window edge or use Developer Tools.

Good luck!

1-10 of 49
1
Pages
Go to page:
  • Spiralt avatar
    Spiralt Joined 1y ago
    Offline
    152 points Ranked 66,852nd
    10mo
    im too stupid to understand this but i really wanna do it
    Beginner Modeler avatar
    Mantra
    Beginner Modeler
    URL to post:
  • Engie Boy 6000 avatar
    Engie Boy 6000 Joined 2y ago
    Erect'Dispenser
    550 points Ranked 47,426th
    1y
    And how do I change text color?
    Lovechild of Tf2 and Fallout. avatar
    Mantra
    Lovechild of Tf2 and Fallout.
    URL to post:
  • Engie Boy 6000 avatar
    Engie Boy 6000 Joined 2y ago
    Erect'Dispenser
    550 points Ranked 47,426th
    1y
    Wait, can I change text font or no?
    Lovechild of Tf2 and Fallout. avatar
    Mantra
    Lovechild of Tf2 and Fallout.
    URL to post:
  • deadman22 avatar
    deadman22 username pic Joined 13y ago
    Dead
    DeadArt Flag Affiliation: DeadArt
    8,915 points Ranked 812th
    43 medals 3 legendary 8 rare
    • Returned 5000 times Medal icon
    • 10 years a member Medal icon
    • Became a Ripe Supporter Medal icon
    • 25 posts awarded Exemplary Feedback Medal icon
    • 6 years a member Medal icon
    • Submitted 100 Threads Medal icon
    deadman22 avatar
    deadman22
    DeadArt Flag
    Affiliation
    DeadArt
    4y
    The studio forums module

     <?= $d["_aModules"]["_sForums"] ?>

    doesn't seem to work anymore or is just mislabeled due to updates.
    GFX Hobbyist avatar
    Mantra
    GFX Hobbyist
    URL to post:
  • BlaXe avatar
    BlaXe username pic Joined 8y ago
    Uberstyle Expert
    Online
    20,896 points Ranked 284th
    40 medals 7 legendary 7 rare
    • Returned 5000 times Medal icon
    • Reached 100 subscribers Medal icon
    • 1st Place - 2016 Uberstyles Contest Medal icon
    • Thanked 500 submitters Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
    • 1st Place - 2017 Uberstyles Contest Medal icon
    BlaXe avatar
    BlaXe
    Uberstyle Expert
    4y
    Change 

    <?= $d["_aModules"]["_sSpriteReleases"] ?>        

    To 

    <?= $d["_aModules"]["_sEffectReleases"] ?>

    In Studio profile variables
     
    • High five x 1
    • Correct x 1
    • Thanks x 1
    • Helpful x 1
    Web developer avatar
    Mantra
    Web developer
    URL to post:
  • the_kyom avatar
    the_kyom Joined 10y ago
    Offline
    7,969 points Ranked 917th
    19 medals 1 legendary 4 rare
    • Submitted 100 Maps Medal icon
    • Submitted 50 Maps Medal icon
    • Submitted 20 Maps Medal icon
    • 6 years a member Medal icon
    • Achieved Game Manager clearance Medal icon
    • Reached 1,000 Points Medal icon
    4y
    [module not found:_sSpriteSubmissions]
    and others to.

    And
    <?= $d["_aModules"]["_sEffectSubmissions"] ?>
    is not even in the list.
    Needed it, tried it, found it ! :p
    • Smart x 1
    String Eastwood
    URL to post:
  • Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage username pic Joined 10y ago
    (づ。◕‿‿◕。)づ Ripe Supporter Admin
    Nodding
    1,185 points Ranked 24,382nd
    78 medals 12 legendary 20 rare
    • Submitted 60 Sprites Medal icon
    • Thanked 500 submitters Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
    • Submitted 100 Skins Medal icon
    • Reached 100 subscribers Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
    Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage
    (づ。◕‿‿◕。)づ
    5y
    Posted by tom

    Posted by Ring-A-Ding Rampage

    tom : I don't think variable declarations and control structures work anymore :/. If they do, could you please post an example template which uses them?
    Try <? $variable ?> (without equal sign). Does that work? Anything inside <?= gets printed.


    Is that a regular expression of some sort? Can't really decipher that.

    Also I'd love to see an example or something. 

    How would one use the 'if...else' variable for example.

    Is there a way where we can use if/else to show different stuff to different users for example?
    પેરાબોલ્ટ
    URL to post:
  • tom avatar
    tom username pic Joined 20y ago
    End Boss Ripe Supporter TBS2 Manager FNF Manager Super Admin
    Offline
    16,022 points Ranked 412th
    79 medals 13 legendary 10 rare
    • Achieved Super Admin clearance Medal icon
    • 10 years a member Medal icon
    • Thanked 500 submitters Medal icon
    • Submitted 200 Blogs Medal icon
    • Submitted 200 Threads Medal icon
    • Submitted 60 Polls Medal icon
    tom avatar
    tom
    End Boss
    5y
    Posted by Ring-A-Ding Rampage

    tom : I don't think variable declarations and control structures work anymore :/. If they do, could you please post an example template which uses them?
    Try <? $variable ?> (without equal sign). Does that work? Anything inside <?= gets printed.
    test1234
    URL to post:
  • Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage username pic Joined 10y ago
    (づ。◕‿‿◕。)づ Ripe Supporter Admin
    Nodding
    1,185 points Ranked 24,382nd
    78 medals 12 legendary 20 rare
    • Submitted 60 Sprites Medal icon
    • Thanked 500 submitters Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
    • Submitted 100 Skins Medal icon
    • Reached 100 subscribers Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
    Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage
    (づ。◕‿‿◕。)づ
    5y
    tom : I don't think variable declarations and control structures work anymore :/. If they do, could you please post an example template which uses them?
    પેરાબોલ્ટ
    URL to post:
  • HatsuneMiekuah avatar
    HatsuneMiekuah username pic Joined 10y ago
    Offline
    2,271 points Ranked 21,060th
    12 medals 1 rare
    • 6 years a member Medal icon
    • 1 post awarded Exemplary Feedback Medal icon
    • One month a member Medal icon
    • 6 months a member Medal icon
    • 1 year a member Medal icon
    • 2 years a member Medal icon
    5y
    That 

    <?= $d["_aModules"]["_sProfileMessages"] ?>
    needs to be changed into--->

    <?= $d["_aModules"]["_sPostsList"] ?>
    • Thanks x 1
    Sup dood? avatar
    Mantra
    Sup dood?
    URL to post: