Skip to main content
All CollectionsConfigure your CiviPlus Self Service Portal
CSS injector
CSS injector

Fancy yourself as a webdesigner?! You can modify the look and feel of your portal using our CSS injector module

C
Written by CiviPlus Helpdesk
Updated over 4 months ago

Overview

The CSS Injector module is a powerful tool for adding custom CSS to your CiviPlus site. This module allows you to modify the appearance of your site by injecting CSS rules directly into the theme, providing a straightforward way to make design tweaks and improvements.

How to use

Note: The CSS injector module is not enabled by default on CiviPlus sites. As a first step please contact your account manager or helpdesk agent and ask them to enable this for you and provide you with the relevant permissions.

Navigate to the CSS Injector Configuration:

  • Go to Admin > Configuration > Development > CSS Injector.

  • Alternatively, you can directly access it via /admin/config/development/css-injector.

Adding Custom CSS

  1. Click on the "Add CSS" button to create a new CSS rule.

  2. Enter a descriptive title for your CSS rule. This helps in identifying the rule later.

  3. Write your CSS code in the provided textarea. Here, you can add any valid CSS code that you want to apply to your site.

  4. Specify the theme to show on. For CiviPlus self service portals the correct theme will be "SSP Bootstrap 7.x-2.24". For Websites the correct theme is Compuco Bootstrap 5.

  5. Set the path conditions if you want the CSS to be applied only on specific pages:

    • Use the Path field to specify URLs where the CSS should be applied. For example, node/* to apply the CSS on all content pages.

  6. Choose the CSS media type (optional):

    • Specify if the CSS should be applied to all devices or specific types like screen, print, etc.

  7. Save the CSS rule to apply it to your site.

If your changes are not shown immediately you may need to flush your cache. To do so go to the "Home" icon on the Drupal menu bar > Flush All Caches > CSS and Javascript and then reload your page.

Editing Existing CSS

  1. Go to the CSS Injector Configuration page.

  2. Find the CSS rule you want to edit and click on the "Edit" link.

  3. Make your changes in the CSS code textarea.

  4. Save the rule to apply your changes immediately.

Deleting CSS Rules

  1. Navigate to the CSS Injector Configuration page.

  2. Locate the rule you wish to delete.

  3. Click on the "Delete" link and confirm the deletion.

Tips and Tricks

  • Use Descriptive Titles: When adding CSS rules, use titles that clearly describe the purpose of the CSS. This makes it easier to manage multiple rules.

  • Leverage Path Conditions: Utilize path conditions to apply CSS selectively. This helps in keeping your site optimized by loading only necessary CSS on specific pages.

  • Keep CSS Organised: If you have a large number of CSS rules, consider organizing them by categories or sections to keep your CSS Injector page manageable.

  • Flush your caches:

Did this answer your question?