<![CDATA[MyRPG - Documentation & Guides]]> https://mybb-rpg.com/ Tue, 23 Jun 2026 19:51:33 +0000 MyBB <![CDATA[How to install plugins [guide]]]> https://mybb-rpg.com/showthread.php?tid=438 Wed, 12 Mar 2025 08:14:35 -0500 Agatha harkness]]> https://mybb-rpg.com/showthread.php?tid=438 How to Install Plugins on a MyBB Forum: A Step-by-Step Guide

Introduction

Want to supercharge your MyBB forum with new features, better security, or improved user experience? Plugins are the secret ingredient that can take your forum from basic to extraordinary! But if you're feeling a little overwhelmed by the idea of installing plugins, don’t worry—you’re not alone.

MyBB makes it easy to expand your forum’s capabilities with a wide range of free and premium plugins. Whether you want to add social login options, enhance spam protection, or introduce new moderation tools, this guide will walk you through every step. By the end, you'll have the confidence to install, configure, and manage plugins like a pro!


Step 1: Finding the Right Plugins

Before you start installing plugins, you need to find ones that fit your needs.

Visit the MyBB Extend site – Head to pluginsto browse available plugins.

Check compatibility – Make sure the plugin is compatible with your MyBB version.

Read reviews and ratings – Look at feedback from other users to ensure the plugin is reliable.

Download the plugin – Save the plugin ZIP file to your computer.


Step 2: Uploading the Plugin to Your Server

Once you’ve downloaded a plugin, the next step is to upload it to your MyBB installation.

Extract the ZIP file – Unzip the plugin folder on your computer.

Connect to your server – Use an FTP client like FileZilla to access your hosting files. Or your Cpanel may access file management instead directly.

Navigate to the ‘inc/plugins’ directory – Upload the extracted plugin files here.

Check for additional files – Some plugins require extra files in ‘inc/languages’ or ‘admin/modules.’


Step 3: Activating the Plugin

After uploading the plugin files, you need to activate it in MyBB.

Log in to the Admin Control Panel – Go to yourdomain.com/admin.

Navigate to ‘Plugins’ – Under ‘Configuration,’ find the ‘Plugins’ section.

Find the uploaded plugin – It should appear in the list.

Click ‘Activate’ – Follow any additional setup instructions provided by the plugin.


Step 4: Configuring Plugin Settings

Most plugins come with customizable settings to fine-tune their functionality.

Go to ‘Configuration’ – Find the plugin settings in the admin panel.

Adjust options – Modify settings based on your needs (e.g., enable features, change permissions, customize behavior).

Save changes – Ensure everything is correctly set up before exiting.


Step 5: Testing the Plugin

Visit your forum as a regular user – Check if the plugin works as expected.

Try different features – Make sure everything functions smoothly.

Check for conflicts – If something breaks, disable the plugin and troubleshoot.

Clear cache if needed – Use the ‘Rebuild & Reload’ option in MyBB if changes don’t appear immediately.


Step 6: Updating and Managing Plugins

Keep plugins updated – Check for new versions and update regularly.

Uninstall unused plugins – Remove plugins you no longer need to improve performance.

Backup before making changes – Always create a backup before adding or updating plugins.

Stay informed – Follow MyBB community forums for plugin news and updates.


Conclusion

And there you have it! Installing and managing MyBB plugins doesn’t have to be complicated. With these steps, you can enhance your forum’s functionality and keep your community engaged. So go ahead—explore new plugins, experiment with features, and make your forum the best it can be!]]> How to Install Plugins on a MyBB Forum: A Step-by-Step Guide

Introduction

Want to supercharge your MyBB forum with new features, better security, or improved user experience? Plugins are the secret ingredient that can take your forum from basic to extraordinary! But if you're feeling a little overwhelmed by the idea of installing plugins, don’t worry—you’re not alone.

MyBB makes it easy to expand your forum’s capabilities with a wide range of free and premium plugins. Whether you want to add social login options, enhance spam protection, or introduce new moderation tools, this guide will walk you through every step. By the end, you'll have the confidence to install, configure, and manage plugins like a pro!


Step 1: Finding the Right Plugins

Before you start installing plugins, you need to find ones that fit your needs.

Visit the MyBB Extend site – Head to pluginsto browse available plugins.

Check compatibility – Make sure the plugin is compatible with your MyBB version.

Read reviews and ratings – Look at feedback from other users to ensure the plugin is reliable.

Download the plugin – Save the plugin ZIP file to your computer.


Step 2: Uploading the Plugin to Your Server

Once you’ve downloaded a plugin, the next step is to upload it to your MyBB installation.

Extract the ZIP file – Unzip the plugin folder on your computer.

Connect to your server – Use an FTP client like FileZilla to access your hosting files. Or your Cpanel may access file management instead directly.

Navigate to the ‘inc/plugins’ directory – Upload the extracted plugin files here.

Check for additional files – Some plugins require extra files in ‘inc/languages’ or ‘admin/modules.’


Step 3: Activating the Plugin

After uploading the plugin files, you need to activate it in MyBB.

Log in to the Admin Control Panel – Go to yourdomain.com/admin.

Navigate to ‘Plugins’ – Under ‘Configuration,’ find the ‘Plugins’ section.

Find the uploaded plugin – It should appear in the list.

Click ‘Activate’ – Follow any additional setup instructions provided by the plugin.


Step 4: Configuring Plugin Settings

Most plugins come with customizable settings to fine-tune their functionality.

Go to ‘Configuration’ – Find the plugin settings in the admin panel.

Adjust options – Modify settings based on your needs (e.g., enable features, change permissions, customize behavior).

Save changes – Ensure everything is correctly set up before exiting.


Step 5: Testing the Plugin

Visit your forum as a regular user – Check if the plugin works as expected.

Try different features – Make sure everything functions smoothly.

Check for conflicts – If something breaks, disable the plugin and troubleshoot.

Clear cache if needed – Use the ‘Rebuild & Reload’ option in MyBB if changes don’t appear immediately.


Step 6: Updating and Managing Plugins

Keep plugins updated – Check for new versions and update regularly.

Uninstall unused plugins – Remove plugins you no longer need to improve performance.

Backup before making changes – Always create a backup before adding or updating plugins.

Stay informed – Follow MyBB community forums for plugin news and updates.


Conclusion

And there you have it! Installing and managing MyBB plugins doesn’t have to be complicated. With these steps, you can enhance your forum’s functionality and keep your community engaged. So go ahead—explore new plugins, experiment with features, and make your forum the best it can be!]]> <![CDATA[How to set up a MyBB Forum [guide]]]> https://mybb-rpg.com/showthread.php?tid=437 Wed, 12 Mar 2025 08:12:12 -0500 Agatha harkness]]> https://mybb-rpg.com/showthread.php?tid=437 How to Set Up a MyBB Forum: A Step-by-Step Guide
Introduction

Have you ever wanted to create your own online community but felt overwhelmed by the technical side of things? Maybe you've dreamed of launching a discussion forum where people can share ideas, ask questions, or build a thriving niche community. The good news? It’s easier than you think!

MyBB is a free, open-source forum software that gives you everything you need to set up and manage a professional-looking discussion board. Whether you're creating a forum for gaming, business, hobbies, or support groups, MyBB provides powerful tools, customizable themes, and an intuitive admin panel to make your life easier. The best part? You don’t need to be a tech wizard to get started.

In this step-by-step guide, we’ll walk you through everything—from choosing the right hosting to installing and configuring MyBB, customizing your forum’s appearance, and managing users effectively. By the time you finish this guide, you’ll have a fully functional MyBB forum ready to welcome members and spark discussions!

Step 1: Choosing the Right Hosting and Domain
Before you can set up MyBB, you’ll need a domain name and web hosting. Here’s how to get started:
Pick a domain name – Choose a name that reflects your forum’s topic (e.g., myawesomeforum.com). You can register a domain through services like Namecheap and Porkbun.
Select a web host – Look for hosting providers that support PHP and MySQL, such as Knownhost and Nixihost.
Set up hosting – Purchase a hosting plan and connect your domain to your hosting provider. Alternatively, free hosts offer free domains and limited hosting plans.
Alternatively, piggy back - Some people offer private shared services to let you host your site on their web host if they have space. [Masterlink Piggybackmasterlist piggyback]

Step 2: Downloading and Uploading MyBB
Download MyBB – Visit the official MyBB website (https://mybb.com) and download the latest version.
Extract the files – Unzip the downloaded package on your computer.
Upload files to your server – Use an FTP client like FileZilla or the onboard File Manager in Cpanel to upload the MyBB files to your server's public_html (or a subfolder if needed).

Step 3: Creating a Database for MyBB
Log in to your hosting control panel – Access cPanel or your hosting provider’s equivalent.
Create a new database – Find the MySQL Database Wizard and create a database.
Create a database user – Assign a username and password, then link it to your database.
Note down the details – You’ll need the database name, username, and password for installation.

Step 4: Installing MyBB
Access the installer – Open your browser and go to your domain (e.g., yourdomain.com/install).
Follow the setup wizard – Click ‘Next’ and agree to the terms.
Enter database details – Provide the database name, username, and password you created earlier.
Create an admin account – Set up your MyBB administrator credentials.
Finish the installation – Complete the setup and remove the ‘install’ folder for security.

Step 5: Configuring and Customizing Your Forum
Log in to the Admin Control Panel – Go to yourdomain.com/admin and enter your credentials.
Change basic settings – Customize your site title, description, and other key settings.
Choose a theme – MyBB offers free and premium themes to personalize your forum.
Install plugins – Add functionality with plugins like spam protection, SEO tools, and user enhancements.

Step 6: Managing Users and Moderation
Set up user groups – Define permissions for admins, moderators, and members.
Enable spam protection – Use CAPTCHA, security questions, and plugins to reduce spam.
Create forum categories and sections – Organize discussions by adding different topics and subforums.
Monitor activity – Regularly check posts and user activity to maintain a positive environment.

Conclusion
Congratulations! You’ve successfully set up your MyBB forum. With your new community platform in place, it’s time to invite members, spark discussions, and grow your audience. Keep exploring MyBB’s features, engage with your users, and watch your forum thrive!]]> How to Set Up a MyBB Forum: A Step-by-Step Guide
Introduction

Have you ever wanted to create your own online community but felt overwhelmed by the technical side of things? Maybe you've dreamed of launching a discussion forum where people can share ideas, ask questions, or build a thriving niche community. The good news? It’s easier than you think!

MyBB is a free, open-source forum software that gives you everything you need to set up and manage a professional-looking discussion board. Whether you're creating a forum for gaming, business, hobbies, or support groups, MyBB provides powerful tools, customizable themes, and an intuitive admin panel to make your life easier. The best part? You don’t need to be a tech wizard to get started.

In this step-by-step guide, we’ll walk you through everything—from choosing the right hosting to installing and configuring MyBB, customizing your forum’s appearance, and managing users effectively. By the time you finish this guide, you’ll have a fully functional MyBB forum ready to welcome members and spark discussions!

Step 1: Choosing the Right Hosting and Domain
Before you can set up MyBB, you’ll need a domain name and web hosting. Here’s how to get started:
Pick a domain name – Choose a name that reflects your forum’s topic (e.g., myawesomeforum.com). You can register a domain through services like Namecheap and Porkbun.
Select a web host – Look for hosting providers that support PHP and MySQL, such as Knownhost and Nixihost.
Set up hosting – Purchase a hosting plan and connect your domain to your hosting provider. Alternatively, free hosts offer free domains and limited hosting plans.
Alternatively, piggy back - Some people offer private shared services to let you host your site on their web host if they have space. [Masterlink Piggybackmasterlist piggyback]

Step 2: Downloading and Uploading MyBB
Download MyBB – Visit the official MyBB website (https://mybb.com) and download the latest version.
Extract the files – Unzip the downloaded package on your computer.
Upload files to your server – Use an FTP client like FileZilla or the onboard File Manager in Cpanel to upload the MyBB files to your server's public_html (or a subfolder if needed).

Step 3: Creating a Database for MyBB
Log in to your hosting control panel – Access cPanel or your hosting provider’s equivalent.
Create a new database – Find the MySQL Database Wizard and create a database.
Create a database user – Assign a username and password, then link it to your database.
Note down the details – You’ll need the database name, username, and password for installation.

Step 4: Installing MyBB
Access the installer – Open your browser and go to your domain (e.g., yourdomain.com/install).
Follow the setup wizard – Click ‘Next’ and agree to the terms.
Enter database details – Provide the database name, username, and password you created earlier.
Create an admin account – Set up your MyBB administrator credentials.
Finish the installation – Complete the setup and remove the ‘install’ folder for security.

Step 5: Configuring and Customizing Your Forum
Log in to the Admin Control Panel – Go to yourdomain.com/admin and enter your credentials.
Change basic settings – Customize your site title, description, and other key settings.
Choose a theme – MyBB offers free and premium themes to personalize your forum.
Install plugins – Add functionality with plugins like spam protection, SEO tools, and user enhancements.

Step 6: Managing Users and Moderation
Set up user groups – Define permissions for admins, moderators, and members.
Enable spam protection – Use CAPTCHA, security questions, and plugins to reduce spam.
Create forum categories and sections – Organize discussions by adding different topics and subforums.
Monitor activity – Regularly check posts and user activity to maintain a positive environment.

Conclusion
Congratulations! You’ve successfully set up your MyBB forum. With your new community platform in place, it’s time to invite members, spark discussions, and grow your audience. Keep exploring MyBB’s features, engage with your users, and watch your forum thrive!]]> <![CDATA[[Guide?] Custom Profile Fields]]> https://mybb-rpg.com/showthread.php?tid=400 Sat, 23 Nov 2024 22:39:13 -0600 ThistleProse]]> https://mybb-rpg.com/showthread.php?tid=400
This is how I put together my character profile fields.

Profile Fields
Just listing the most important ones to this ... guide, lol.

001. Custom Profile Field

Quote:Title: [SET UP] Custom Colours?
Description: Do you want to use your own custom Colours? Selecting 'no' will use default profile colours
Field Type: Select Box
Options: No, Yes
Editable by: [Usergroup of choice]

Everything else is default settings, I believe.


Templates
member_profile
Find:
Code:
{$profilefields}
Add Before: (use the fid# of the yes/no field above)
Code:
<if $userfields['fid66'] == "No" then>
              <template member_customDefaultCss>                <else>    
            <template member_customCss>
</if>

My further inputs are:
Images x6 fields
Background Image
Hex#1 - Image BG Colour
Hex#2 - Image BG Text Background
Hex#3 - Main Header Shadows
Hex#4 - Main Header Extra Shadow
Hex#5 - Main & Minin Title Bar BG Colours
Hex#6 - All Boarders
Hex#7 - Main & Mini Title Font Colour
Hex#8 - Body Font COlour
RGB String - This is the colour that overlays the bg image


This determines whether to use the 'default' colours, or use the input from the user.

Make 2 Templates:
member_customCss
member_customDefaultCss

Create your default CSS first. This is easier.
Then change the default CSS to different fid#s, that fit your options; this is my customCss:
Code:
<style>
    @import url('https://fonts.googleapis.com/css?family=Bellefair|Bilbo+Swash+Caps|Fondamento|Indie+Flower');
    .ProfileOutside {width: auto; height: auto; padding: 10px; border: 10px solid #{$userfields['fid33']}; border-radius: 50px 50px; line-height: 160%; color: #{$userfields['fid33']}; font-family: calibri; font-size: 15px; margin-left: auto; margin-right: auto; background-image: url("{$userfields['fid32']}"); background-repeat: repeat;}
    .ProfileInside {width: auto; padding: 5px; height: auto; border: 5px solid #{$userfields['fid33']}; margin-left: auto; margin-right: auto; background-color: rgba({$userfields['fid41']}, .9); border-radius: 50px 50px;}
    .ProfileName {text-align: center; font-family: 'Fondamento', cursive; padding: 2px; letter-spacing: 5px; line-height: 1; font-size: 75px; color: #{$userfields['fid37']}; margin:auto; text-shadow: 0 -2px 3px #{$userfields['fid33']},0 3px 4px #{$userfields['fid35']}; white-space: pre-line;}
    .ProfileRank {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 7px; line-height: 0; font-size: 55px; padding: 10px 0px 10px 0px; text-align: center; color: #{$userfields['fid36']}; text-shadow: 0 -2px 3px #{$userfields['fid37']},0 3px 4px #{$userfields['fid37']};}
    /*Major Title Headers*/    .ProfileTitleMain {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 3px; font-size: 55px; color: #{$userfields['fid37']}; text-align: center; background-color:#{$userfields['fid35']}; border-radius: 10px; border: 8px; padding:8px; padding: 10px 50px 0px 0px; text-shadow: 0 -2px 3px #{$userfields['fid33']},0 3px 4px #{$userfields['fid35']};}
    /*Mini Title Headers*/    .ProfileTitle {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 3px; font-size: 35px; color: #{$userfields['fid50']}; text-align: center; background-color:#{$userfields['fid34']}; border-radius: 5px; border: 1px; padding:1px; padding: 0px 20px 0px 0px; /*margin: 0px 5px;*/}
    .ProfileContent {font-family: Arial; font-size: 17px; padding: 0px 9px; min-height: 25px !important; color: #{$userfields['fid36']};margin: 0px 5px;}
    .ProfileImage{margin-left: auto; margin-right:auto; border:3px solid #{$userfields['fid36']};background-color:#{$userfields['fid34']}; border-radius: 50px 50px; width: 290px; padding:5px; color: #{$userfields['fid36']};}
    .ProfilePrompt1 {font-family: font-family: 'Bellefair', serif; font-size: 19px; color: #{$userfields['fid33']}; text-align: center; border-radius: 5px; border: 1px; padding:1px;}
    .ProfileSpaceFiller {min-height: 250px;}
    .ProfileImageDesc {text-align: center; border:3px solid #{$userfields['fid36']};background-color:#{$userfields['fid34']}; border-radius: 50px 50px; width:290px; padding:5px; color: #{$userfields['fid36']};}
    
    .columns {display: grid; justify-items: top; font-family: Arial; font-size: 17px; /*padding: 0px 9px;*/ text-align: justify; min-height: 25px !important; color: #{$userfields['fid36']};}
    .columns.picture-left {grid-template-columns: [pic] 320px [col1] 50fr [col2] 50fr;}
    .columns.picture-right {grid-template-columns: [col1] 50fr [col2] 50fr [pic] 320px;}

    .ProfileImageBox {grid-column-start: pic; grid-row-start: 1; grid-row-end: span 2; margin: 0px 5px; white-space: pre-line;}
    .col1 {grid-column-start: col1; margin: 0px 15px; white-space: pre-line;}
    .col2 {grid-column-start: col2; margin: 0px 15px; white-space: pre-line;}
    .colBoth {grid-column-start: col1; grid-column-end: span 2; margin: 0px 15px; white-space: pre-line;}
    .colAll {grid-column-start: col1; grid-column-end: span 3; margin: 0px 15px; white-space: pre-line;}
    .colAll2 {/*grid-column-start: col1;*/ grid-column-end: span 3; margin: 0px 15px; white-space: pre-line;}


    @media only screen and (max-width: 600px)
  {
        .ProfileName {line-height: 1 !important; font-size: 45px !important;}
         .ProfileRank {line-height: 1 !important; font-size: 45px !important;}
        .ProfileImage {width: 100% !important;}
         .ProfileImageDesc {width: 100% !important;}
        .columns {display: -webkit-box;
        -webkit-flex-direction: column;
        display: -moz-box;
        -moz-flex-direction: column;
        display: -ms-flexbox;
        -ms-flex-direction: column;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;}
        .table .col1, .table .col2 .table .colBoth {
        width: 100%;
        display: block;}
        .coluns.picture-left {width: 100%;
        display: block;}
        .columns.picture-right {width: 100%;
        display: block;}
    }

</style>


This is very, very basic editing! This is what I get:

[Image: BXwHFw7.png]

[Image: GS2Nq1u.png]

[Image: B7ABVQC.png]]]>
This is how I put together my character profile fields.

Profile Fields
Just listing the most important ones to this ... guide, lol.

001. Custom Profile Field

Quote:Title: [SET UP] Custom Colours?
Description: Do you want to use your own custom Colours? Selecting 'no' will use default profile colours
Field Type: Select Box
Options: No, Yes
Editable by: [Usergroup of choice]

Everything else is default settings, I believe.


Templates
member_profile
Find:
Code:
{$profilefields}
Add Before: (use the fid# of the yes/no field above)
Code:
<if $userfields['fid66'] == "No" then>
              <template member_customDefaultCss>                <else>    
            <template member_customCss>
</if>

My further inputs are:
Images x6 fields
Background Image
Hex#1 - Image BG Colour
Hex#2 - Image BG Text Background
Hex#3 - Main Header Shadows
Hex#4 - Main Header Extra Shadow
Hex#5 - Main & Minin Title Bar BG Colours
Hex#6 - All Boarders
Hex#7 - Main & Mini Title Font Colour
Hex#8 - Body Font COlour
RGB String - This is the colour that overlays the bg image


This determines whether to use the 'default' colours, or use the input from the user.

Make 2 Templates:
member_customCss
member_customDefaultCss

Create your default CSS first. This is easier.
Then change the default CSS to different fid#s, that fit your options; this is my customCss:
Code:
<style>
    @import url('https://fonts.googleapis.com/css?family=Bellefair|Bilbo+Swash+Caps|Fondamento|Indie+Flower');
    .ProfileOutside {width: auto; height: auto; padding: 10px; border: 10px solid #{$userfields['fid33']}; border-radius: 50px 50px; line-height: 160%; color: #{$userfields['fid33']}; font-family: calibri; font-size: 15px; margin-left: auto; margin-right: auto; background-image: url("{$userfields['fid32']}"); background-repeat: repeat;}
    .ProfileInside {width: auto; padding: 5px; height: auto; border: 5px solid #{$userfields['fid33']}; margin-left: auto; margin-right: auto; background-color: rgba({$userfields['fid41']}, .9); border-radius: 50px 50px;}
    .ProfileName {text-align: center; font-family: 'Fondamento', cursive; padding: 2px; letter-spacing: 5px; line-height: 1; font-size: 75px; color: #{$userfields['fid37']}; margin:auto; text-shadow: 0 -2px 3px #{$userfields['fid33']},0 3px 4px #{$userfields['fid35']}; white-space: pre-line;}
    .ProfileRank {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 7px; line-height: 0; font-size: 55px; padding: 10px 0px 10px 0px; text-align: center; color: #{$userfields['fid36']}; text-shadow: 0 -2px 3px #{$userfields['fid37']},0 3px 4px #{$userfields['fid37']};}
    /*Major Title Headers*/    .ProfileTitleMain {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 3px; font-size: 55px; color: #{$userfields['fid37']}; text-align: center; background-color:#{$userfields['fid35']}; border-radius: 10px; border: 8px; padding:8px; padding: 10px 50px 0px 0px; text-shadow: 0 -2px 3px #{$userfields['fid33']},0 3px 4px #{$userfields['fid35']};}
    /*Mini Title Headers*/    .ProfileTitle {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 3px; font-size: 35px; color: #{$userfields['fid50']}; text-align: center; background-color:#{$userfields['fid34']}; border-radius: 5px; border: 1px; padding:1px; padding: 0px 20px 0px 0px; /*margin: 0px 5px;*/}
    .ProfileContent {font-family: Arial; font-size: 17px; padding: 0px 9px; min-height: 25px !important; color: #{$userfields['fid36']};margin: 0px 5px;}
    .ProfileImage{margin-left: auto; margin-right:auto; border:3px solid #{$userfields['fid36']};background-color:#{$userfields['fid34']}; border-radius: 50px 50px; width: 290px; padding:5px; color: #{$userfields['fid36']};}
    .ProfilePrompt1 {font-family: font-family: 'Bellefair', serif; font-size: 19px; color: #{$userfields['fid33']}; text-align: center; border-radius: 5px; border: 1px; padding:1px;}
    .ProfileSpaceFiller {min-height: 250px;}
    .ProfileImageDesc {text-align: center; border:3px solid #{$userfields['fid36']};background-color:#{$userfields['fid34']}; border-radius: 50px 50px; width:290px; padding:5px; color: #{$userfields['fid36']};}
    
    .columns {display: grid; justify-items: top; font-family: Arial; font-size: 17px; /*padding: 0px 9px;*/ text-align: justify; min-height: 25px !important; color: #{$userfields['fid36']};}
    .columns.picture-left {grid-template-columns: [pic] 320px [col1] 50fr [col2] 50fr;}
    .columns.picture-right {grid-template-columns: [col1] 50fr [col2] 50fr [pic] 320px;}

    .ProfileImageBox {grid-column-start: pic; grid-row-start: 1; grid-row-end: span 2; margin: 0px 5px; white-space: pre-line;}
    .col1 {grid-column-start: col1; margin: 0px 15px; white-space: pre-line;}
    .col2 {grid-column-start: col2; margin: 0px 15px; white-space: pre-line;}
    .colBoth {grid-column-start: col1; grid-column-end: span 2; margin: 0px 15px; white-space: pre-line;}
    .colAll {grid-column-start: col1; grid-column-end: span 3; margin: 0px 15px; white-space: pre-line;}
    .colAll2 {/*grid-column-start: col1;*/ grid-column-end: span 3; margin: 0px 15px; white-space: pre-line;}


    @media only screen and (max-width: 600px)
  {
        .ProfileName {line-height: 1 !important; font-size: 45px !important;}
         .ProfileRank {line-height: 1 !important; font-size: 45px !important;}
        .ProfileImage {width: 100% !important;}
         .ProfileImageDesc {width: 100% !important;}
        .columns {display: -webkit-box;
        -webkit-flex-direction: column;
        display: -moz-box;
        -moz-flex-direction: column;
        display: -ms-flexbox;
        -ms-flex-direction: column;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;}
        .table .col1, .table .col2 .table .colBoth {
        width: 100%;
        display: block;}
        .coluns.picture-left {width: 100%;
        display: block;}
        .columns.picture-right {width: 100%;
        display: block;}
    }

</style>


This is very, very basic editing! This is what I get:

[Image: BXwHFw7.png]

[Image: GS2Nq1u.png]

[Image: B7ABVQC.png]]]> <![CDATA[Tutorial: Random quotes helper]]> https://mybb-rpg.com/showthread.php?tid=333 Tue, 16 Jan 2024 03:23:45 -0600 Omar G.]]> https://mybb-rpg.com/showthread.php?tid=333
Requirements

Create two Global templates

Name: randomQuotes
Contents:
Code:
{
  "q1": "Some random quote #1",
  "q2": "Some random quote #2",
  "q3": "Some random quote #3",
  "q4": "Some random quote #4",
  "q5": "Some random quote #5"
}

Note that this will be the template holding your quotes. This is on JSON format (https://www.w3schools.com/js/js_json_intro.asp), the last line should lack any trailing comma.

Name: randomQuotesWrapper
Contents:
Code:
<span class="quote{$randomKey}">{$randomValue}</span>

Edit file "phptpl_allowed_funcs.txt"

Add "ougcRandomQuote" in a new line to the end of  file "/inc/plugins/phptpl_allowed_funcs.txt", example :
Code:
;ob_* ?
; yaml?

ougcRandomQuote

Add a new hook using Hooks

Hook: global_start
Contents:
PHP Code:
if (!function_exists('ougcRandomQuote')) {
    function ougcRandomQuote(): string
    {
        global $templates;

        static $randomStrings = null;

        if ($randomStrings === null) {
            $randomStrings = $templates->get('randomQuotes', false, false);

            $randomStrings = json_decode($randomStrings, true);
        }

        if (empty($randomStrings)) {
            return '';
        }

        $randomKey = array_rand($randomStrings);

        $randomValue = $randomStrings[$randomKey];

        return eval($templates->render('randomQuotesWrapper', true, false));
    }
} 

To use simply paste the following code within any template to render a random quote :
Code:
<?=ougcRandomQuote()?>

Example HTML output

Code:
<span class="quoteq1">Some random quote #1</span>

Regards.]]>
Requirements

Create two Global templates

Name: randomQuotes
Contents:
Code:
{
  "q1": "Some random quote #1",
  "q2": "Some random quote #2",
  "q3": "Some random quote #3",
  "q4": "Some random quote #4",
  "q5": "Some random quote #5"
}

Note that this will be the template holding your quotes. This is on JSON format (https://www.w3schools.com/js/js_json_intro.asp), the last line should lack any trailing comma.

Name: randomQuotesWrapper
Contents:
Code:
<span class="quote{$randomKey}">{$randomValue}</span>

Edit file "phptpl_allowed_funcs.txt"

Add "ougcRandomQuote" in a new line to the end of  file "/inc/plugins/phptpl_allowed_funcs.txt", example :
Code:
;ob_* ?
; yaml?

ougcRandomQuote

Add a new hook using Hooks

Hook: global_start
Contents:
PHP Code:
if (!function_exists('ougcRandomQuote')) {
    function ougcRandomQuote(): string
    {
        global $templates;

        static $randomStrings = null;

        if ($randomStrings === null) {
            $randomStrings = $templates->get('randomQuotes', false, false);

            $randomStrings = json_decode($randomStrings, true);
        }

        if (empty($randomStrings)) {
            return '';
        }

        $randomKey = array_rand($randomStrings);

        $randomValue = $randomStrings[$randomKey];

        return eval($templates->render('randomQuotesWrapper', true, false));
    }
} 

To use simply paste the following code within any template to render a random quote :
Code:
<?=ougcRandomQuote()?>

Example HTML output

Code:
<span class="quoteq1">Some random quote #1</span>

Regards.]]> <![CDATA[Tutorial: converting jcink miniprofile to myBB postbit]]> https://mybb-rpg.com/showthread.php?tid=220 Sun, 23 Apr 2023 16:19:05 -0500 Kiwi]]> https://mybb-rpg.com/showthread.php?tid=220 Note: Please ensure you have the original author's permission to convert any codes from jcink to mybb.

This is a basic tutorial for those who are new to myBB but have some coding & jcink experience! I will be using this code as an example: https://codepen.io/Striker1485/pen/KKGKgox
Which uses these field numbers: https://img.nickpic.host/QWIYFb.png

I will be assuming you have already created your own Theme from a copy of the Default theme.

CSS:
Go to Templates & Style -> Click on your theme -> click on global.css
Above the editor, click 'Edit stylesheet: advanced mode' to see the full css. Add your CSS at the bottom somewhere, being sure to choose unique names for classes.

HTML:
For this example I recommend using the "postbit classic" design as a starting point, as it puts the stats on the left hand edge. The regular postbit puts them on top, so use this as the starting point if you prefer that design. (Users can change their preference from postbit classic to regular, so once you finish this tutorial and are happy with the design, make sure to copy all the code into both templates mentioned below so they are identical.)

Go to Templates & Style -> Templates (on the left) -> Click on your theme
Expand 'Post bit templates' and find the one called postbit_classic. Copy all the code from here.
Go back a page and go into the template 'postbit'. Paste all the code into here, overwriting everything that was already there.

In this example case, I am going to replace this section:
Code:
<div class="post_author scaleimages">
    {$post['useravatar']}
    <div class="author_information">
            <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
            <span class="smalltext">
                {$post['usertitle']}<br />
                {$post['userstars']}
                {$post['groupimage']}
            </span>
    </div>
    <div class="author_statistics">
        {$post['user_details']}
    </div>
</div>

with the whole html code in the codepen. Submit this and check what your theme looks like. (In this case, it pushes the post onto the next line - I recommend using flexbox to easily fix this, but that is outside the scope of this tutorial).

Next we need to replace the 'field' information with our actual fields.

Finding custom field IDs
Go to 'Configuration' (in the top menu) then 'Custom profile fields'. Make sure you've created all your fields.
For each one you want in the miniprofile, click on the field in this list, then look at the URL. Note down the last part of the URL, e.g. 'fid=4'. The number is the ID.

Go back to editing your 'postbit' template.

Replace each of these:
Code:
<!-- |field_1| -->
with this (with the correct ID for each)
Code:
{$post['fid1']}

User group:
The user group is simply:
Code:
{$post['usertitle']}

Avatar:
For the user's avatar, this will give the avatar URL:
Code:
{$useravatar['image']}
You can link to the profile using this:
Code:
<a href="{$post['profilelink_plain']}"></a>
However in general I would recommend using the built-in avatar template (postbit_avatar) which includes a link to the profile.

Other images, such as a gif, should be done using regular profile fields above.


MAIN PROFILE:

The concept for the main profile is very similar. The main template to edit is Member templates -> member_profile

However instead of referring to {$post['fid4']}, you should use:
Code:
{$userfields['fid5']}

The avatar is simply {$avatar}, and the member group is: {$memprofile['usertitle']} or {$displaygroup['usertitle']} depending on whether you want custom title or their display group default title.

You can also use the PHP conditionals plugin to add conditions throughout, for example:
Code:
<if $memprofile['usertitle'] then>{$memprofile['usertitle']}<else>{$displaygroup['usertitle']} </if>
If the user has a custom title, it will show it; otherwise, it will show their member group instead. Please refer to other resources for more info about the PHP conditionals plugin!

Feel free to ask here for help about specific variables for profiles and postbits.]]> Note: Please ensure you have the original author's permission to convert any codes from jcink to mybb.

This is a basic tutorial for those who are new to myBB but have some coding & jcink experience! I will be using this code as an example: https://codepen.io/Striker1485/pen/KKGKgox
Which uses these field numbers: https://img.nickpic.host/QWIYFb.png

I will be assuming you have already created your own Theme from a copy of the Default theme.

CSS:
Go to Templates & Style -> Click on your theme -> click on global.css
Above the editor, click 'Edit stylesheet: advanced mode' to see the full css. Add your CSS at the bottom somewhere, being sure to choose unique names for classes.

HTML:
For this example I recommend using the "postbit classic" design as a starting point, as it puts the stats on the left hand edge. The regular postbit puts them on top, so use this as the starting point if you prefer that design. (Users can change their preference from postbit classic to regular, so once you finish this tutorial and are happy with the design, make sure to copy all the code into both templates mentioned below so they are identical.)

Go to Templates & Style -> Templates (on the left) -> Click on your theme
Expand 'Post bit templates' and find the one called postbit_classic. Copy all the code from here.
Go back a page and go into the template 'postbit'. Paste all the code into here, overwriting everything that was already there.

In this example case, I am going to replace this section:
Code:
<div class="post_author scaleimages">
    {$post['useravatar']}
    <div class="author_information">
            <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
            <span class="smalltext">
                {$post['usertitle']}<br />
                {$post['userstars']}
                {$post['groupimage']}
            </span>
    </div>
    <div class="author_statistics">
        {$post['user_details']}
    </div>
</div>

with the whole html code in the codepen. Submit this and check what your theme looks like. (In this case, it pushes the post onto the next line - I recommend using flexbox to easily fix this, but that is outside the scope of this tutorial).

Next we need to replace the 'field' information with our actual fields.

Finding custom field IDs
Go to 'Configuration' (in the top menu) then 'Custom profile fields'. Make sure you've created all your fields.
For each one you want in the miniprofile, click on the field in this list, then look at the URL. Note down the last part of the URL, e.g. 'fid=4'. The number is the ID.

Go back to editing your 'postbit' template.

Replace each of these:
Code:
<!-- |field_1| -->
with this (with the correct ID for each)
Code:
{$post['fid1']}

User group:
The user group is simply:
Code:
{$post['usertitle']}

Avatar:
For the user's avatar, this will give the avatar URL:
Code:
{$useravatar['image']}
You can link to the profile using this:
Code:
<a href="{$post['profilelink_plain']}"></a>
However in general I would recommend using the built-in avatar template (postbit_avatar) which includes a link to the profile.

Other images, such as a gif, should be done using regular profile fields above.


MAIN PROFILE:

The concept for the main profile is very similar. The main template to edit is Member templates -> member_profile

However instead of referring to {$post['fid4']}, you should use:
Code:
{$userfields['fid5']}

The avatar is simply {$avatar}, and the member group is: {$memprofile['usertitle']} or {$displaygroup['usertitle']} depending on whether you want custom title or their display group default title.

You can also use the PHP conditionals plugin to add conditions throughout, for example:
Code:
<if $memprofile['usertitle'] then>{$memprofile['usertitle']}<else>{$displaygroup['usertitle']} </if>
If the user has a custom title, it will show it; otherwise, it will show their member group instead. Please refer to other resources for more info about the PHP conditionals plugin!

Feel free to ask here for help about specific variables for profiles and postbits.]]>