Meet xStyles: see your XOOPS theme in action

A living style guide for XOOPS themes.

Introducing xStyles 1.5 Beta 2

How well does your theme handle a long table heading, a required form field, or a narrow screen? With xStyles, you can explore those details in one place—and make better design decisions before your next theme change.

xStyles brings together 40 built-in examples of typography, content, tables, forms, comments, menus, and more. Each example uses your theme's actual styles. The content stays the same, so you can concentrate on what changes: readability, spacing, colours, and layout.

Spend less time hunting for examples

• See the whole picture. Browse common page elements in one organised gallery. Check whether headings, buttons, tables, and forms feel like parts of the same website.
• Find trouble spots sooner. Try long text, disabled controls, and different block layouts. Check the frontend at 360, 768, and 1280 pixels to spot wrapping and overflow problems.
• Choose admin themes with confidence. Preview installed administration themes and compare two side by side, using the same examples at the same width. Your normal admin theme stays active.
• Explore the details quickly. Select a category, search for an example, and focus on one element at a time. Expand its rendered HTML when you want to see how it is built.
• Give designers a repeatable review process. Return to the same examples after a stylesheet change. Theme authors can add their own components to the gallery; the optional cssHolmes module provides separate tools for editing and publishing styles.

Useful from your first visit

You do not need to write CSS to start. Open the gallery, choose Typography, Tables, or Forms, and explore. The illustrated tutorial guides you from your first preview to comparisons and theme development.

The examples are demonstrations: forms do not save submissions or upload files, and the gallery creates no sample articles to clean up afterward.

Compatibility: xStyles requires XOOPS 2.7+ with XMF and the core form-renderer API, and PHP 8.2+. Admin theme comparison works on the tested XOOPS 2.7.4 and 2.8 cores. Frontend theme selection and comparison require the compatible preview support in XOOPS 2.8; on 2.7.4, you can inspect the current frontend theme and use responsive previews.

Put your theme through its paces. Explore xStyles on GitHub, try the beta on a test site, and open Help for the tutorial. Share what you discover with the XOOPS community.

Preview. Compare. Refine.

A Tutorial is here: https://github.com/XoopsModules27x/xstyles/blob/master/docs/TUTORIAL.md