Skip to main content

Add custom styles to BindTuning themes (CSS and JavaScript)

BindTuning Team avatar
Written by BindTuning Team
Updated over 2 months ago

BindTuning's themes offer extensive customization capabilities through our Customizer Tool, allowing you to tailor your SharePoint environment to reflect your brand identity. However, for specific design adjustments or advanced behaviors not covered by the Customizer Tool's options, BindTuning themes provide the flexibility to apply your own custom CSS and JavaScript.

This comprehensive guide details how to add these custom styles to both Modern and Classic SharePoint environments.

For Modern SharePoint

Adding custom styles to BindTuning themes for the Modern SharePoint Experience is straightforward, leveraging the built-in BindTuning Settings Panel.

  1. Open your SharePoint site collection.

  2. On the SharePoint ribbon, select the "BindTuning Settings" button.

  3. Navigate to the "Advanced" Tab within the settings panel.

  4. From here, you can paste your custom CSS and/or JavaScript directly into the corresponding sections provided.
    ​

    advanced-tab.png

Note: The "Additional Resources Zone" option within this tab allows you to link to external custom style files (CSS or JS) rather than pasting code directly. This is useful for managing larger code bases or reusing files.

For Classic SharePoint

For BindTuning themes applied on Classic SharePoint sites, custom styles are typically added by modifying a dedicated customStyle.css file and linking it via the Alternate CSS URL.

Important Recommendation: We highly recommend adding your custom styles to the customStyle.css file within your theme package. This ensures your modifications will not be overridden if you update the theme on your site collection to its latest release from BindTuning.

1. Edit the customStyle.css File

The location and method for editing customStyle.css depends on your SharePoint environment and deployment type.

For SharePoint Online (SandBox Solution) and On-Premises (SP2013/SP2016/SP2019) using the Sandbox Solution

  1. Open your site using SharePoint Designer.

  2. Navigate to All Files > Style Library > [YOUR_THEME_NAME].

  3. Check out and edit the file customStyle.css in advanced mode.

  4. Add your custom CSS code to the bottom of the file.

  5. Save, check in, and if prompted, publish a major version.

For On-Premises Farm Solution (SharePoint 2013)

  1. Go to the file path: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES\[YOUR_THEME_NAME]Package\[YOUR_THEME_NAME]Package\customStyle.css.

  2. Add your custom CSS code to the bottom of the file.

  3. Save the file.

For On-Premise Farm Solution (SharePoint 2016/2019)

  1. Go to the file path: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\TEMPLATE\LAYOUTS\1033\STYLES\[YOUR_THEME_NAME]Package\[YOUR_THEME_NAME]Package\customStyle.css.

  2. Add your custom CSS code to the bottom of the file.

  3. Save the file.

2. Link the customStyle.css via Alternate CSS URL

After editing the customStyle.css file, you need to ensure your SharePoint site is referencing it to apply the changes.

For SharePoint Online

  1. Go to Site Settings (gear icon > Site contents > Site settings).

  2. Under "Look and Feel", select "Master Page".

  3. Expand the "Alternate CSS URL" option.

  4. Add the reference to your customStyle.css file. The typical path will be similar to: /_catalogs/masterpage/Style Library/[YOUR_THEME_NAME]/customStyle.css

  5. Click "OK" to save.

  6. Refresh your browser using CTRL + F5 to see the changes.

For On-Premise Farm Solution (SharePoint 2013/2016/2019)

  1. Go to Site Settings.

  2. Under "Look and Feel", select "Master Page".

  3. Expand the "Alternate CSS URL" option.

  4. Paste the following URL, replacing [YOUR_THEME_NAME] with your actual theme name and [15 or 16] based on your SharePoint version (15 for SP2013, 16 for SP2016/2019): /_layouts/[15 or 16]/1033/STYLES/[YOUR_THEME_NAME]Package/customStyle.css

  5. Click "OK" to save.

  6. Refresh your browser using CTRL + F5.

Note: For SharePoint 2013/2016/2019, if changes are not immediately visible, you may need to reset your IIS (Internet Information Services) on the SharePoint server.

Need further assistance with custom development?

BindTuning offers Premium Support Services that accommodate custom development and complex theme adjustments according to your specific specifications. Send us an email to [email protected] to request a quote.

Did this answer your question?