[XenDev] Theme Builder |❤️ Customize Your Forum Without Writing Code ❤️🎨 2026-11-07

To use this add-on properly, you need to install the following:​

XenDev Update Manager

XenDev.net eklentilerinizin güncellenmesi ve sağlıklı çalışabilmesi için bu eklentiyi kurmanız gerekmektedir. ==== To ensure your XenDev.net plugins are updated and functioning correctly, you need to install this plugin.

xendev.net

Demo : https://musapekel.com/forum/
admin panel : https://musapekel.com/forum/admin.php
kullanıcı adı:builderdemo
Şifre:builderdemo





Core principle: installing changes nothing. After installation the forum looks exactly as before. Every setting starts empty and shows the style's original value in grey. Only the values you change are written to CSS; if nothing is changed, the output is empty.

Work is kept per style: every XenForo style has its own draft, published version and history.

Editor interface​

The settings panel sits on the left and a live preview of your real forum pages on the right; every change shows in the preview immediately.

• Live preview: switch between the home page, forum list, a thread, members and a profile.
• Devices: desktop, tablet and mobile widths, plus zoom.
• Light / Dark: every color can be set separately for both modes, or dark can follow light.
• Select tool: click an element in the preview to open its settings.
• Auto-jump: touching a setting scrolls the preview to the affected area and highlights it; if the area is not on the current page, the right page opens.
• Undo / Redo and a search box to find any setting.
• Draft: saved but unpublished changes; visitors do not see them.
• Publish: the draft goes live. Every publish is kept as a revision you can roll back to.
• Scheduled publishing: a draft can go live automatically at a set date and time (cron task).
• Export, and switching the add-on on or off per style.
• On phones (760px and below): settings and preview become two full-width screens switched from a bottom bar; tabs turn into one row of scrolling chips; the preview opens in mobile view. A dot on Preview marks changes you have not looked at yet.

Colors and themes​

Colors are driven by 44 design tokens (branding, surfaces, text, header and navigation, status colors, typography), set from presets, color combinations or by hand.

Presets color not only XenForo's blocks but also the staff bar, category headers, default buttons, menus, the mobile menu and profile tabs. XenForo 2.3 color variables are written in the format your forum actually uses, so other add-ons pick up the theme colors without breaking.

Tabs​

The panel has eight tabs; every option starts at "Original" and nothing is written to the forum until you pick something else.

Forum structure and sidebar widget positions are not part of the design draft: saving writes them straight to XenForo for every style, and Undo cannot reverse them.

Content slots​

Five ready-made slots add HTML to the forum; they only appear for visitors once switched on, and all text is safely escaped.

Administrators see empty placeholders in the preview so the editor can fill a slot live.

Admin menu and permissions​

The add-on opens from two places in the admin panel and has its own admin permission.

• Menu: XenDev → Theme Builder (top-level section) and Appearance → Theme Builder.
• Permission: "Use the XenDev Theme Builder" (xendevThemeBuilder). The editor, saving, publishing and the live preview all require it. Super administrators always have access; on upgrade it is granted automatically to admins who have "Manage styles". For others: Setup → Administrators → user → permissions.
• Extra permissions: saving the forum structure needs "Manage nodes"; saving sidebar widgets needs "Manage widgets". Without them those sections are read-only.

Installation, upgrades and technical structure​

Installing and upgrading follow XenForo's standard add-on flow; on every upgrade the published CSS is recompiled automatically.

Install / upgrade

1. Upload the zip via Add-ons → "Install/upgrade from archive" (or copy the upload folder into the forum root).
2. Add-ons → XenDev Theme Builder → Install / Upgrade.
3. If the menu does not appear, run "Rebuild" from the same place.

How a change reaches the forum

1. A setting changed in the editor is saved as a draft.
2. On Publish, the settings are cleaned, validated and compiled to CSS; the publish is added to the history as a revision.
3. The CSS is written to one file per style (data://xendev_tb/style-{id}.css) and linked in the forum's <head>.
4. Browsers cache the file; every rule starts with html#XF and is split by light/dark mode.

Building a release (build.json)

php cmd.php xf-addon:build-release XenDev/Themebuilder adds js/xendev/themebuilder to the package and minifies editor.js, bridge.js and i18n/tr.js. The package already ships the .min.js files (editor 217 KB → 148 KB, bridge 26 KB → 16 KB); if XenForo's minify step fails, delete the minify section. Production loads the .min.js files; development mode with fullJs loads the readable sources.