LimeSurvey Themes: How to Customize Your Surveys

LimeSurvey themes control how your surveys look and function. You can pick a built-in theme in seconds, customize colors and fonts without coding, or edit HTML and CSS for complete control. Most surveys use the default Fruity TwentyThree theme, but your brand deserves better. This guide walks you through every path: quick no-code customization, extending a theme, building a custom one from scratch, and avoiding breakage when you upgrade.

What Are LimeSurvey Themes? (The Basics)

A LimeSurvey theme is a collection of HTML, CSS, and Twig template files that define how a survey appears to your respondents. Themes control the page layout, colors, fonts, logo placement, progress bars, and how individual question types render. They are not survey content (the questions themselves) -- they are the container in which that content lives.

LimeSurvey ships with four built-in themes:

• Fruity TwentyThree: The default in LimeSurvey 6+. Modern Bootstrap 5 design, responsive, clean.
• Bootstrap Vanilla: Minimal Bootstrap 5 theme, lightweight, good for custom CSS overrides.
• Fruity: An older design, still supported. Useful if you are on LimeSurvey 5.x or need backward compatibility.
• Bootswatch: A theme framework that lets you pick from 26 Bootswatch color schemes (Cerulean, Darkly, Flatly, etc.) without touching code.

Beyond the built-in set, the community has created and shared themes. SkelVanilla, for example, is a theme specifically designed with accessibility and usability in mind. SkeletonQuest is another option available through the community extensions repository.

Why does theme choice matter? Your respondents see the survey in your theme first, before they read a single question. A professional, on-brand theme increases completion rates. A cluttered or dated theme damages trust and often increases dropout rates. If you collect personal data, your theme also affects GDPR compliance: a theme that clearly displays your privacy policy, consent language, and data handling practices helps you meet legal requirements.

You can have one theme per survey, or set a global default that applies to all new surveys. You can also swap themes mid-survey and republish without losing responses.

Applying a Built-In Theme (Quick Start)

Here is the fastest way to apply a theme to a survey:

1. Log in to your LimeSurvey admin panel.
2. Open the survey you want to change.
3. Go to Settings > Look & Feel > Look & Feel > Themes.
4. You will see a dropdown with all available themes: Fruity TwentyThree, Vanilla, Fruity, Bootswatch, and any custom themes you have uploaded.
5. Select the theme you want.
6. Click Save.
7. The survey preview will update immediately. You can also click Preview to see the live survey in the theme.

If you want to set a global default theme for all future surveys, go to Maintenance > Settings > Themes and select your preferred default. All new surveys will use that theme unless you override it at the survey level.

Switching themes does not affect your survey data or question logic. Your responses stay intact. If you change your mind, you can swap back to the original theme at any time.

One caveat: if you have applied custom CSS overrides to the old theme, those overrides may not carry over perfectly to the new theme (because CSS class names and structure can differ between themes). Test thoroughly before publishing a theme change to live respondents.

Quick Customization Without Coding (Theme Options)

If you do not know CSS or HTML, you still have significant control. Every theme has a Theme Options panel where you can customize fonts, colors, logos, and animations without touching code.

To access Theme Options:

1. Open your survey.
2. Go to Settings > Look & Feel > Look & Feel > Theme Options.
3. You will see two tabs: Simple and Advanced.

The Simple tab lets you change the most common settings:

• Survey title font (family and size)
• Question font (family and size)
• Answer font (family and size)
• Background color (the page background)
• Text color (body text)
• Accent color (links and buttons)

The Advanced tab gives you granular control:

• Logo image: Upload your company logo, position it (top, center), and set its width and height.
• Favicon: The small icon that appears in the browser tab.
• Custom CSS: A text area where you can paste CSS snippets if you know CSS.
• Button styling: Color, border radius, hover effects.
• Progress bar: Color, height, animation.
• Answer option styling: Radio button size, checkbox color, dropdown appearance.

Here is a practical example: you want your survey branded with your company logo and color scheme. Go to Theme Options, upload your logo (PNG, 300px wide), set the accent color to your brand color (hex code: #2563EB), and set the text color to your preferred shade. Save. Your survey now looks like your survey, not a generic LimeSurvey template. No coding required. Takes 2 minutes.

If you want to go further (custom fonts, animations, spacing), scroll to the Custom CSS field and paste CSS rules. But if CSS feels like a foreign language, stick to the Simple tab. You have plenty of control without it.

Understanding Theme Inheritance (The Extension System)

Here is a key rule: you cannot edit the built-in themes directly. If you try to modify Fruity TwentyThree by opening the Theme Editor and changing a template file, your changes will be overwritten the next time you upgrade LimeSurvey.

Instead, you extend a theme. Extending means you create a copy of a theme (usually a built-in one) and mark it as a custom extension. From then on, your extended version is separate from the built-in version. You can edit it freely without breaking the original.

When should you extend a theme vs. create one from scratch?

• Extend: You like an existing theme's layout and structure (e.g., Fruity TwentyThree), but you want to tweak colors, spacing, or specific template sections. 99% of users extend. It is much faster because the theme framework is already there.
• Create from scratch: You are building a completely custom survey experience (e.g., a multi-step wizard, a custom question renderer, embedded video). This is rare and requires significant development effort.

To extend a theme:

1. Open your survey.
2. Go to Settings > Look & Feel > Look & Feel > Themes.
3. Click the Extend button next to the theme you want to extend (e.g., Fruity TwentyThree).
4. Give your extended theme a name (e.g., "My Company Brand").
5. LimeSurvey creates a copy of the theme in your survey's custom theme folder.
6. From now on, you can edit this custom theme in the Theme Editor without affecting the original.

If you later upgrade LimeSurvey, the original Fruity TwentyThree theme updates, but your extended version stays as you left it (unless there is a breaking change in LimeSurvey's core, which we will cover later).

Using the Theme Editor (For Custom CSS/Twig)

If you want to change more than colors and fonts, you use the Theme Editor. This is where you can edit the HTML structure, Twig templates, and CSS directly.

To open the Theme Editor:

1. Go to Settings > Look & Feel > Look & Feel > Theme Editor.
2. You will see your extended theme (or a built-in theme if you have not extended yet).
3. On the left is a file tree showing the theme structure:
   • views/: HTML templates that define the survey layout (layout_global.twig, page.twig, question.twig, etc.)
   • css/: CSS stylesheets (custom.css is your safest place to add overrides)
   • scripts/: JavaScript files for interactions and animations
   • files/: Static assets (images, fonts)

The safest approach is to edit only custom.css. This file is meant for your overrides and is less likely to break on upgrades.

If you want to customize the HTML structure (e.g., move the logo to a different position, change the progress bar layout), edit the Twig templates in views/. Twig is a template language with special syntax: {{ variable }} inserts a value, {% if condition %} adds logic, {% for item in items %} loops. If you have never used Twig, think of it as HTML with superpowers: you can inject dynamic data and conditionals.

Here is a simple example: suppose you want to hide the progress bar. Open views/layout_global.twig, search for the line containing the progress bar (usually something like <div class="progress-bar">), and comment it out or delete it:

<!-- <div class="progress-bar">...</div> -->

Or, if you prefer, add a CSS rule in custom.css:

.progress-bar { display: none; }

Both approaches work. CSS is less risky because you are not changing the template structure.

The Theme Editor also has a Preview pane on the right where you can see your changes in real-time (usually; sometimes you need to save and refresh). You can also preview at different screen sizes (mobile, tablet, desktop) to ensure your theme is responsive.

If you upload custom images (e.g., patterns, backgrounds), put them in the files/ directory and reference them in CSS:

body { background-image: url(/path/to/files/my-pattern.png); }

Uploading & Installing Custom Themes

If you find a community theme online (e.g., SkelVanilla or SkeletonQuest), or if you have downloaded a custom theme from a developer, you can upload and install it in a few steps.

First, make sure you have the theme file. It should be a.zip file containing the theme's folder structure (views/, css/, scripts/, config.xml, etc.).

To upload and install:

1. Go to Maintenance > Manage themes > Import Theme.
2. Click Choose File and select your theme.zip file.
3. Click Import.
4. LimeSurvey extracts the theme and adds it to your list of available themes.
5. Open your survey, go to Settings > Look & Feel > Themes, and select the new theme.
6. Click Save.

After installation, the new theme appears in your theme dropdown and is immediately available for surveys. You can also set it as a global default so all future surveys use it.

If you want to customize a community theme, extend it the same way you would extend a built-in theme. Go to Settings > Look & Feel > Themes, click Extend on the community theme, and edit it in the Theme Editor.

A word of caution: community themes are maintained by volunteers and may fall behind the current LimeSurvey version. If a theme is not compatible with your LimeSurvey version, you will see an error when you try to apply it, or it may render incorrectly. Check the theme's documentation or GitHub repository for the version it supports. We will cover version compatibility in detail below.

Styling Questions with CSS Classes (Advanced)

If you know CSS, you can target specific question types and answer options using CSS class names. This gives you fine-grained control over the appearance of radio buttons, checkboxes, dropdowns, text inputs, and more.

Every question container in LimeSurvey has classes that identify its type and state:

• .question-container: Wraps the entire question (prompt, answer options, help text).
• .mandatory: Applied if the question is required.
• .input-error: Applied if validation fails and the respondent sees an error message.

Question type classes:

• .list-radio: Single-choice (radio button) question.
• .multiple-opt: Multiple-choice (checkbox) question.
• .list-dropdown: Dropdown list question.
• .input-date: Date picker question.
• .input-text: Short text input question.
• .input-textarea: Long text input question.

Answer area classes:

• .ls-answers: Container for all answer options.
• .answer-item: A single answer option (one radio, one checkbox).
• .radio-list: The list of radio buttons.
• .checkbox-list: The list of checkboxes.

Here are some practical customizations:

Make radio buttons larger and use your brand color:

.list-radio.answer-item input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #2563EB;
}

Style checkboxes to be larger and square:

.multiple-opt.answer-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2563EB;
}

Highlight mandatory questions with a colored left border:

.mandatory.question-container {
  border-left: 4px solid #EF4444;
  padding-left: 12px;
}

Style the progress bar to use a gradient:

.progress-bar {
  background: linear-gradient(90deg, #3B82F6, #2563EB);
}

These are starting points. The more you explore the LimeSurvey HTML structure (use your browser's Inspector tool by pressing F12), the more CSS rules you can write to customize question appearance, spacing, colors, and animation.

Avoiding Version Compatibility Pitfalls

Here is the painful reality: when you upgrade LimeSurvey to a new major version (e.g., from 5.x to 6.x), custom themes often break. The template files, CSS structure, and Bootstrap version change. A theme built for LimeSurvey 5 may not render correctly in LimeSurvey 6.

Two forum posts illustrate the pain: "Custom Limesurvey Themes 2.05+ don't work with Version 2.50" and "Theme compatible for 6.x in April 2023 no longer compatible in 6.61".

Version compatibility is declared in the theme's config.xml file. This file sits at the root of the theme folder and contains metadata about the theme:

<?xml version="1.0" encoding="UTF-8"?>
<config>
  <name>My Company Brand</name>
  <extends>FruityTwentyThree</extends>
  <version>1.0</version>
  <description>A custom theme based on Fruity TwentyThree.</description>
  <compatibility>6.0</compatibility>
</config>

The compatibility tag tells LimeSurvey which version(s) the theme works with. If you upgrade to LimeSurvey 6.4 but your theme's compatibility tag says 6.0, LimeSurvey may either refuse to load the theme or load it with warnings.

To avoid breakage:

1. Before upgrading: Backup your LimeSurvey installation and database. Test the upgrade in a staging environment first. Apply the theme and visually inspect how it looks.
2. After upgrading: Update the compatibility tag in config.xml to match your new LimeSurvey version.
3. Test custom CSS: If you have written custom CSS, open a few survey previews and check for rendering issues. Bootstrap versions often change between major LimeSurvey releases, so some CSS selectors or utilities may no longer work.
4. Reach out for help: If you run LimeSurvey on your own server and a custom theme breaks, you are responsible for fixing it. If you use managed hosting, the hosting provider typically tests and updates custom themes as part of the upgrade process. This is one significant advantage of managed hosting: you do not have to troubleshoot theme breakage yourself.

For more details, check the LimeSurvey Manual on Extending Themes and the Upgrade Guide for the version you are moving to.

Frequently Asked Questions

How do you extend a LimeSurvey core theme?

Go to Settings > Look & Feel > Themes, click Extend next to the theme, give it a name, and confirm. LimeSurvey creates a copy you can edit in the Theme Editor without affecting the original theme.

What is the difference between Fruity TwentyThree and Bootstrap Vanilla?

Fruity TwentyThree is the modern default in LimeSurvey 6+, with a full design system, animations, and visual polish. Bootstrap Vanilla is minimal and lightweight, providing a clean starting point for custom CSS overrides. Choose Vanilla if you plan heavy customization; choose Fruity TwentyThree if you want professional appearance out of the box.

Can you upload a custom theme to LimeSurvey?

Yes. If you have a theme as a.zip file, go to Maintenance > Manage themes > Import Theme, select the file, and click Import. The theme then appears in your theme dropdown and can be applied to any survey.

What happens to custom themes after a LimeSurvey upgrade?

Custom themes may break if the new version introduces breaking changes to templates or Bootstrap. Before upgrading, test your custom theme in a staging environment. After upgrading, verify the theme renders correctly and update the compatibility tag in config.xml. If you use managed hosting, the provider typically handles this testing and updates for you.

Where are LimeSurvey themes stored on the server?

Built-in themes are in /path/to/limesurvey/themes/survey/ (e.g., /themes/survey/FruityTwentyThree/). Custom themes are typically in a survey-specific or global custom themes folder (the exact path depends on your LimeSurvey configuration). You can see theme folders by browsing your server file system via SSH or FTP, or by checking the theme's file path in the Theme Editor.

Do you need to code to customize a LimeSurvey theme?

No. Theme Options lets you change colors, fonts, logos, and animations without any coding. If you want to modify the HTML structure or write custom CSS, then coding is helpful, but not required for basic customization.

How do you prevent custom themes from breaking when upgrading?

Test the upgrade in a staging environment first. Keep your custom theme compatibility tags up-to-date with your LimeSurvey version. Monitor LimeSurvey release notes for theme-related changes. If you manage your own server, this is your responsibility; if you use managed hosting, the provider typically handles compatibility checks and updates as part of the upgrade process.

The Bottom Line

LimeSurvey themes let you brand your surveys, control user experience, and adapt the platform to your needs. You can achieve a lot with just Theme Options (colors, fonts, logos) without touching code. If you want deeper control, extend a theme, use the Theme Editor, and write custom CSS. The main risk is version compatibility when you upgrade: custom themes can break, so test before upgrading and update your compatibility tags afterward.

If managing custom themes and server upgrades feels like overhead, consider using managed LimeSurvey hosting. A managed host updates your LimeSurvey version, tests custom themes for compatibility, and fixes breakage -- you focus on survey content and results, not infrastructure. Opsily's managed LimeSurvey hosting handles this for you, with no version upgrade headaches.