GameBanana shows no ads to members. Sign up now!
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 2y
  • 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!

Sign up to access this!
1-10 of 48
1
Pages
Go to page:
  • Engie Boy 6000 avatar
    Engie Boy 6000 Joined 1y ago
    Offline
    Engie's Boys Flag Affiliation: Engie's Boys
    286 points Ranked 52263rd
    access_time 3mo
    And how do I change text color?
    ⏫Fallout + Tf2 =⏫ avatar
    Mantra
    ⏫Fallout + Tf2 =⏫
    URL to post:
  • Engie Boy 6000 avatar
    Engie Boy 6000 Joined 1y ago
    Offline
    Engie's Boys Flag Affiliation: Engie's Boys
    286 points Ranked 52263rd
    access_time 3mo
    Wait, can I change text font or no?
    ⏫Fallout + Tf2 =⏫ avatar
    Mantra
    ⏫Fallout + Tf2 =⏫
    URL to post:
  • deadman22 avatar
    deadman22 username pic Joined 12y ago
    Dead
    DeadArt Flag Affiliation: DeadArt
    8,195 points Ranked 786th
    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
    access_time 3y
    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 7y ago
    Uberstyle Expert
    Online
    20,369 points Ranked 268th
    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
    access_time 3y
    Change 

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

    To 

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

    In Studio profile variables
     
    • High five x 1
    • Correct x 1
    • Thanks x 1
    Web developer avatar
    Mantra
    Web developer
    URL to post:
  • the_kyom avatar
    the_kyom Joined 9y ago
    DoD:S Manager
    Offline
    7,912 points Ranked 816th
    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
    access_time 3y
    [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 9y ago
    (づ。◕‿‿◕。)づ Ripe Supporter Moderator
    Coding
    5,392 points Ranked 1282nd
    76 medals 11 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
    (づ。◕‿‿◕。)づ
    access_time 4y
    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?
    Erode using Code
    URL to post:
  • tom avatar
    tom username pic Joined 19y ago
    End Boss Ripe Supporter TBS2 Manager Super Admin
    Offline
    7,747 points Ranked 837th
    69 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
    access_time 4y
    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.
    testing 1234 222
    URL to post:
  • Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage username pic Joined 9y ago
    (づ。◕‿‿◕。)づ Ripe Supporter Moderator
    Coding
    5,392 points Ranked 1282nd
    76 medals 11 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
    (づ。◕‿‿◕。)づ
    access_time 4y
    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?
    Erode using Code
    URL to post:
  • HatsuneMiekuah avatar
    HatsuneMiekuah username pic Joined 9y ago
    Offline
    2,074 points Ranked 20797th
    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
    access_time 4y

    That 

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

    needs to be changed into--->

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

    • Thanks x 1
    Sup dood? avatar
    Mantra
    Sup dood?
    URL to post:
  • Arman Ossi Loko avatar
    Arman Ossi Loko username pic Joined 13y ago
    Admin Alumni
    Offline
    67,342 points Ranked 61st
    65 medals 11 legendary 16 rare
    • GTAV First Adopter Medal icon
    • Submitted 15 Tools Medal icon
    • Submitted 30 Tutorials Medal icon
    • 1st place - 2015 Uberstyles Contest Medal icon
    • Achieved Admin clearance Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
    Arman Ossi Loko avatar
    Arman Ossi Loko
    KOPASSUS Incorporated Flag
    Affiliation
    KOPASSUS Incorporated
    Admin Alumni
    access_time 5y
    > **Posted by X RaY** > > Thanks Tom for this tutorial :) but i want add mini guitar and visitors how i can add? Tried looking at the "code" below the module's submitter (LINK)?
    • Helpful x 2
    • Thanks x 2
    The Deadviper
    URL to post:
  • 4
  • 35.3k
  • 48
  • 9y
  • 2y
  • 2y

Submitter

tom username pic Joined 19y ago
End Boss Ripe Supporter TBS2 Manager Super Admin
Offline
7,747 points Ranked 837th
69 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

Sign up to access this!

Category

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook

More Profile Customization Wikis