Profile Template Code

A Wiki

Updates

WikiParentSubmitterStats
  • Overhaul Updated to reflex new syntax
  • Addition Added examples
  • Adjustment Split Wiki into 3 wikis
Update 2mo
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 46
1
Pages
Go to page:
  • deadman22 avatar
    deadman22 username pic Joined 11y ago
    Dead
    DeadArt Flag Affiliation: DeadArt
    3,393 points Ranked 1529th
    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
    1y
    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 5y ago
    Online
    18,104 points Ranked 248th
    39 medals 7 legendary 6 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
    1y
    Change 

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

    To 

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

    In Studio profile variables
     
    • High five x 1
    • Correct x 1
    • Thanks x 1
    Making new Uberstyle! avatar
    Mantra
    Making new Uberstyle!
    URL to post:
  • the_kyom avatar
    the_kyom Joined 8y ago
    DoD:S Manager
    Offline
    7,485 points Ranked 655th
    17 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
    2y
    [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 8y ago
    Moderator
    In Extremis
    2,043 points Ranked 2575th
    75 medals 10 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
    (づ。◕‿‿◕。)づ
    2y
    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?
    Ode to Code avatar
    Mantra
    Ode to Code
    URL to post:
  • tom avatar
    tom username pic Joined 17y ago
    TBS2 Manager Super Admin
    Present
    Home > Studios
    48,642 points Ranked 81st
    58 medals 12 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
    test 1 2 3
    2y
    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 8y ago
    Moderator
    In Extremis
    2,043 points Ranked 2575th
    75 medals 10 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
    (づ。◕‿‿◕。)づ
    3y
    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?
    Ode to Code avatar
    Mantra
    Ode to Code
    URL to post:
  • HatsuneMiekuah avatar
    HatsuneMiekuah username pic Joined 7y ago
    Offline
    1,749 points Ranked 3030th
    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
    3y
    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 11y ago
    Offline
    62,994 points Ranked 60th
    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
    3y
    > **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 avatar
    Mantra
    The Deadviper
    URL to post:
  • X RaY avatar
    X RaY username pic Joined 4y ago
    RECHARGING...
    Black Mesa Inc. Flag Affiliation: Black Mesa Inc.
    15,640 points Ranked 290th
    35 medals 2 legendary 6 rare
    • Submitted 100 Sounds Medal icon
    • 30 submissions featured Medal icon
    • Submitted 50 Sounds Medal icon
    • 10 submissions featured Medal icon
    • Returned 1000 times Medal icon
    • Submitted 20 Maps Medal icon
    X RaY avatar
    X RaY
    Black Mesa Inc. Flag
    Affiliation
    Black Mesa Inc.
    3y
    Thanks Tom for this tutorial :) but i want add mini guitar and visitors how i can add?
    Another Black Mesa Fan <3
    URL to post:
  • Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage username pic Joined 8y ago
    Moderator
    In Extremis
    2,043 points Ranked 2575th
    75 medals 10 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 BORDER** > > Isn't Profile Guardian a banner at the top of the profile page? If so, please tell me how to do it! :D The top page banner is known as the tBar. The profile guardian looks and feels similar to other modules and has an image inside the module. It is similar to the tBar but it's a different concept. tBar is like a profile banner and spans the entire page. The ProGuard whereas takes one column.
    Ode to Code avatar
    Mantra
    Ode to Code
    URL to post:

Submitter


tom avatar
tom username pic Joined 17y ago
TBS2 Manager Super Admin
Present
Home > Studios
48,642 points Ranked 81st
58 medals 12 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
Sign up to access this!

Category

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • Share on Google+
  • 33.5k Views
  • 46 Posts
  • 8ySubmitted
  • 2moModified
  • 2moUpdated

More Profile Customization Wikis

bcp.crwdcntrl.net tracking pixel