Instructions for Creating and Using Custom BBCode on XenForo 1

BBCode (Bulletin Board Code) is a simple markup language that allows users to format text and content on forums. XenForo 1 supports the creation and use of Custom BBCode, helping you customize content in a creative and unique way. This article will show you how to create and use Custom BBCode on XenForo 1 to enrich the user experience.

1. What is BBCode and Benefits of Custom BBCode

BBCode is a simple set of tags that allow users to format text, insert images, create links and more on forum posts. Custom BBCode allows administrators to create their own formatting tags, helping to personalize and enrich the content on the forum.

Benefits of using Custom BBCode

• Increased flexibility: You can create unique content formats not available in XenForo’s default BBCode.
• Improve user experience: Custom BBCode makes it easy for users to add multimedia elements or special formats to their articles.
• Brand expression: You can create a BBCode to reflect your forum’s style and branding.

2. How to Create Custom BBCode on XenForo 1

To create Custom BBCode on XenForo 1, you need to follow these steps:

Steps to create Custom BBCode

1. Access the XenForo admin console.
2. Go to Content (Content) > BB Code.
3. Click Add BB Code (Add new BB Code).
4. Fill in the necessary information:
   • Title: The name of the BBCode (e.g. Insert Button).
   • BB Code Tag: Name the tag (e.g. (button)).
   • HTML Replacement: Add HTML code that will be replaced when the user uses BBCode.
5. Click Save to complete.

Once created, the new Custom BBCode will be available for users to use in their articles.

3. Example of Custom BBCode

Here are some examples of how to create Custom BBCodes and how to use them in articles.

Example 1: Create BBCode Button

BB Code Tag: button
HTML Replacement: <a href="{option}" class="custom-button">{content}</a>
            

Use: (button=//example.com)Nhấn vào đây(/button)

Example 2: Create BBCode Warning

BB Code Tag: alert
HTML Replacement: <div class="alert-box">{content}</div>
            

Use: (alert)Đây là cảnh báo!(/alert)

4. Customize the Custom BBCode Interface Using CSS

To make your Custom BBCodes more professional and eye-catching, you can add CSS to customize the look. Add the following CSS code extra.less in the XenForo console.

CSS example for BBCode Button

.custom-button {
    background-color: #ff9800;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    background-color: #e67e22;
}
            

This CSS code will create a button with beautiful colors and a gradient effect on hover.

5. Manage and Edit Custom BBCode

If you want to edit or delete the created Custom BBCode, you can return to the BBCode management section in the XenForo admin panel. Select the BBCode you want to edit and click Edit (Edit) or Delete (Delete) to make changes.

Be sure to check out the changed BBCodes on the forum to make sure they work properly after editing.

Custom BBCode

Creating and using Custom BBCode on XenForo 1 gives you more flexibility in customizing the content and formatting on the forum. By using Custom BBCodes, you can improve user experience, enrich content, and express your forum’s unique style. Start creating your own BBCodes today to make your forum more engaging and professional!