Instructions for Creating Custom Sidebar Widgets on XenForo 1

Custom sidebar widgets are a great way to display additional information or features on the XenForo 1 forum. You can use widgets to promote content, display contact information, or add other widgets like a calendar events, social media links, and more. This article will show you how to easily create and customize sidebar widgets on XenForo 1.

1. Benefits of Custom Sidebar Widgets

Using custom sidebar widgets brings many benefits to XenForo 1 forums:

• Enhance interaction: Add features like bulletin boards, quick links, or signup forms to engage users.
• Display important information: Widgets can be used to display important information, like contacts or upcoming events.
• Personalize the interface: Customize your forum’s appearance to fit your brand and needs.

2. Create Custom Sidebar Widgets In XenForo 1

You can create custom sidebar widgets in XenForo 1 by using the template system and adding HTML or script snippets to the widget.

Steps to create custom sidebar widgets

1. Access the XenForo admin console.
2. Go to Appearance > Templates.
3. Select template sidebar or create a new template if necessary.
4. Add custom HTML code to the widget. For example:

   
   <div class="custom-widget">
       <h3>Liên Hệ Với Chúng Tôi</h3>
       <p>Gọi ngay: (123) 456-7890</p>
       <a href="mailto:[email protected]">Gửi email cho chúng tôi</a>
   </div>
                       

5. Click Save to save changes.

You can add custom CSS extra.less to format and style your widget.

3. Use Widget Framework for Advanced Customization

If you want to create more complex widgets, use an add-on like Widget Framework. This add-on makes it easier to manage and customize widgets.

How to install and use Widget Framework

1. Download and install the add-on Widget Framework from the XenForo Resources website.
2. Visit Appearance > Widgets to manage your widgets.
3. Click Add Widgets to create a new widget.
4. Choose the widget type (HTML, PHP, Template, etc.) and add your custom content.
5. Position the widget’s display position (e.g. Sidebar, Header, Footer) and click Save.

Widget Framework allows you to customize the look and feel of your forum and add new features to your forum with ease.

4. Customize Widget Interface Using CSS

You can style your custom sidebar widgets by adding CSS extra.less in XenForo.

Sidebar Widget CSS Example

.custom-widget {
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-widget h3 {
    color: #333;
    font-size: 18px;
    margin-bottom: 10px;
}

.custom-widget a {
    color: #1e88e5;
    text-decoration: none;
    font-weight: bold;
}

.custom-widget a:hover {
    text-decoration: underline;
}
            

The above CSS will help your widget look more professional and pleasing to the eye. You can customize these properties to match the style of the forum.

5. Test and Optimize Sidebar Widgets

After creating the widget, test to make sure it displays properly on all devices and browsers. If necessary, optimize your HTML and CSS code to ensure the best performance of your forum.

Widget optimization suggestions

• Use simple code: Avoid using too much complex code in widgets to improve page loading speed.
• Check compatibility: Test widgets on different browsers to make sure they work smoothly.
• Image optimization: If your widgets contain images, make sure they are optimized so they don’t slow down the forum.

Custom Widgets

Creating custom sidebar widgets on XenForo 1 helps you increase interactivity, display important information and personalize the forum interface. By following the instructions in this article, you can easily add and customize widgets to make your forum stand out and look more professional. Experiment with customizations and find the solutions that best suit your needs.