Insert Custom CSS or JavaScript Files for Template

Insert Custom CSS or JavaScript Files for Template

Insert Custom CSS or JavaScript Files for Template

Work on your own theme, not a built-in one. Create a new theme or extend an existing one first — LimeSurvey updates can overwrite changes made directly to a built-in theme. See Creating a New Theme.

Just adding your own CSS or JavaScript? You usually do not need to touch config.xml at all — put your rules in the theme's custom.css and your code in custom.js. These are loaded for you.

Registering additional CSS or JavaScript files is what config.xml is for:

  • Upload your files to the theme's /css or /scripts folder
  • In your theme's config.xml, add the file paths to the <css> or <js> blocks

Example configuration:

<css>
	<filename>css/jquery-ui-custom.css</filename>
	<filename>css/bootstrap-slider.css</filename>
	<filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename>
	<filename>css/flat_and_modern.css</filename>
	<filename>css/template.css</filename>
	<filename>css/myCustomPlugin.css</filename>
</css>
<js>
	<filename>scripts/template.js</filename>
	<filename>scripts/bootstrap-slider.js</filename>
	<filename>scripts/myCustomPlugin.js</filename>
</js>

Not seeing your changes? Clear the LimeSurvey cache after uploading files or editing config.xml — cached assets are the usual reason a correct change appears to do nothing.

Related Articles

    • Related Articles

    • Styling questions with CSS

      Styling questions with CSS Styling of questions in CSS has become much easier. Each question type has now a unique class. The mandatory questions have an additional mandatory class. For example, for a non-mandatory question: <div id="question5" ...

    • Advanced theme customization (theme editor and CSS)

      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 ...

    • Question themes and custom question views

      What question themes are Question themes are alternative renderings of a core question type. They change how a question looks and behaves in the survey — for example, an image-select variant of a multiple-choice question, or button-style single ...

    • Custom Question Views (New in 3.0 )

      Custom question views (New in 3.0 ) Note: This is a temporary feature to be replaced in the future by question object (it will be very easy to move custom views to question object). It is disabled by default. As of version 2.5, you can create ...

    • Creating a New Theme

      To create a new theme in LimeSurvey, users need the Themes permission along with file system access on the server hosting the installation. Before You Start Theme development is advanced work, requiring knowledge of HTML, CSS, Twig, and JavaScript. ...