For everyday styling — colors, fonts, background image, corner radius — use the built-in theme options first. Those settings live in the survey editor under Presentation → Theme options and are covered in Presentation and theme options. This article is for when those options aren't enough: changing layout, styling individual questions, or adding your own CSS.

What the theme editor is

Every LimeSurvey theme is a package of Twig templates (page layout and logic), CSS stylesheets, JavaScript, and images. The theme editor lets you edit these files in the browser, without server file access. Because you are editing code, a broken change can make every survey using that theme inoperable — this is an advanced feature that assumes basic HTML/CSS knowledge.

The theme editor is a classic admin tool, reached from the Configuration menu (Configuration → Advanced → Themes) — not the per-survey Presentation → Theme options panel. Deep customization (custom CSS and Twig) always happens here, on an extended theme. You need the theme/template permission (or superadministrator) to use it.

Extend a theme — never edit a standard one

The standard themes that ship with LimeSurvey cannot (and should not) be edited directly. Instead, extend one:

1. Open the Theme editor: Configuration → Advanced → Themes.
2. Select the theme you want to base yours on from the theme dropdown (Fruity is the usual recommendation). A standard theme shows the note "This is a standard theme. If you want to modify it you can extend it."
3. Click Extend and give the extended copy a recognizable name.

Your extension inherits everything from the parent theme and only stores the files you change. This matters for two reasons: your customizations survive as a separate package, and anything you don't override keeps benefiting from parent-theme fixes.

Inside the editor (its heading reads "Theme editor: <theme name>") you first pick the participant screen to work on, then edit the Twig templates, CSS and JavaScript that build that screen. The screen selector covers Question, Survey list, Welcome, Completed, Assessments, Error, Clear all, Load, Save, Registration, Print answers, Public statistics, PDF, Quotas exceeded, Navigation and Participant. Use the Export action to download the whole theme as a ZIP, which you can re-import to move a customized theme between installations.

Custom CSS basics

The usual place for your own rules is the theme's custom.css file — select it in the file list, add your rules, and save. For JavaScript customizations, custom.js is the equivalent file.

Every question is rendered with a unique ID and a class for its question type, so you can target one question or all questions of a type. For example, a specific short-text question:

/* One specific question, by ID */
#question5 input.text {
  max-width: 20em;
  border: 2px solid #0055a5;
}

/* All short free text questions, by type class */
.text-short .question-title {
  font-weight: 600;
}

Useful hooks:

• .mandatory is added to required questions; .input-error appears when validation fails.
• Each question type has its own class (.list-radio, .multiple-opt, .numeric, …). Inspect the rendered survey in your browser's developer tools to find the exact class/ID — that is faster and more reliable than memorizing the list.
• The progress bar can be restyled, e.g. .progress-bar { background-color: #3300ff; }.

Theme inheritance and survey groups

Extended themes inherit from their parent theme. Separately, theme settings cascade across three levels — global, survey group, and individual survey — so surveys can share a common look. A survey's own theme is chosen under Settings → General → Theme, which overrides the group and global defaults.

Risks and good practice

• Test before rolling out. Make changes on a copy or test survey first.
• Re-check after upgrades. Extended themes are preserved during upgrades, but changes to the parent theme may affect inherited templates or styling — verify your customizations after upgrading.
• Export a ZIP backup of your extended theme before major edits.

For the complete file-by-file reference (Twig structure, the full list of question and validation CSS classes, config.xml options), see the full theme-editor reference in the LimeSurvey manual.