Skip to Content

CSS Loader

Vinyl ships with a CSS Loader Widget that can be used for overriding CSS styles at the site level vs. manually setting through a Theme or at an individual application level. In order to use the CSS Loader, download a copy of the CSS Loader, edit styles.css as needed, and add it to a newly created CSS Widget.

Note

When editing styles.css you'll want to remove or edit the existing CSS example lines or these will appear when you activate the CSS Loader

How to Configure

Step 1: Customize the CSS

  1. Navigate to IDE > Look and Feel
  2. Select the Vinyl Collection from the Collections panel. If not available, click View All.
  3. Click the Widgets tab
  4. Locate the CSS Loader widget and click the Open Record icon
  5. Click on the Widget Path Content file to download the widget .ZIP content

  6. Open the .ZIP file in a code editor program and make any/all customization changes required to styles.css

    styles.png

    styles.css file as viewed by Vinyl's editor. Be sure to remove or edit these examples, or they will appear when activated.

  7. Select a new Collection to add the modified CSS Loader content. Note this cannot be the Vinyl or Vinyl IDE Collections.

  8. Click Upload Widget
  9. Confirm the Collection the widget will be stored
  10. Click the Browse button and locate the modified CSS widget .ZIP content
  11. Click Save
  12. Assign a Name for the CSS Widget. For example: CSS Widget
  13. Review Purpose and set as Field or Site, as needed

Step 2: Configure at the Site Level (or follow Step 3)

  1. Navigate to IDE > Additional Settings > Site Widgets
  2. Click + Widget Registration
  3. Select the CSS Widget as the Widget
  4. Click the checkmark to save
  5. Confirm the Active column is checked/On

Step 3: Configure at the App Level

  1. Navigate to IDE > Look and Feel
  2. Select the Collection where you saved the copy CSS Loader widget, click the Widgets tab
  3. Locate the CSS Widget, click the Open record icon
  4. Set the Purpose value to be Site
  5. Click the Save button
  6. Navigate to IDE > Additional Settings > Site Widgets
  7. Click + Widget Registration
  8. Select CSS Widget from the Widget drop down menu
  9. Click the check mark icon to Activate the CSS Widget
  10. Navigate back to your application, refresh your web browser and confirm updates