Adding custom styles to your BindTuning theme

BindTuning's Design feature provides an easy-to-use and highly-customizable framework, capable of tailoring any of our available templates, so as to mirror your brand identity and organization-specific guidelines. When considering our Design solution, you are granted the ability to customize, download and install as many themes as needed, accommodating diverse modifications that range from fonts, colors, headers, etc. 

However, in the concrete scenario where those elements are not covered by our Customizer Tool, BindTuning themes allow you to adjust and apply custom styles, hence modifying the behavior of the elements on your page. 

Below, you'll find a comprehensive guide on how to add your custom styles to both Classic and Modern SharePoint.

Modern SharePoint

Adding your own custom styles can be easily accomplished when utilizing BindTuning's themes for the Modern Experience. 

To do this, simply follow the steps below: 

1. Open your SharePoint site collection; 
2. On the ribbon, select the button BindTuning Settings; 
3. Navigate to the Advanced Tab; 
4. From there, you're able to paste your own custom CSS and script, in the corresponding sections

Note: You'll verify the existence of an Additional resources zone. This same option will allow you to link to pre-existing custom style files, without having to paste them in the provided zones. 

Classic SharePoint

Note: We recommend adding your custom styles to this file since it will not be overridden when you update the theme on your site collection to the latest release. 

To edit your custom style file, proceed as follows:

For SandBox Solution (SharePoint Online, SP2013/SP2016/SP2019)

1. Open your site with SharePoint Designer;
2. Go to All Files > Style Library > THEMENAME;
3. Check out and edit in advanced mode the customStyle.css file;
4. Add your custom code to the bottom of the file;
5. Save, check in and if asked, publish a major version;
6. Now we need to change the Alternate CSS URL.

For Farm Solution (SharePoint 2013)

1. Go to: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES\THEMENAMEPackage\THEMENAMEPackage\customStyle.css;
2. Add your custom code to the bottom of the file;
3. Save;
4. Now we need to change the Alternate CSS URL.

For Farm Solution (SharePoint 2016/2019) 

1. Go to: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\TEMPLATE\LAYOUTS\1033\STYLES\THEMENAMEPackage\THEMENAMEPackage\customStyle.css;
2. Add your custom code to the bottom of the file;
3. Save;
4. Now we need to change the Alternate CSS URL.

Alternate CSS URL for SharePoint Online

To link this file to your site collection:

1. Go to Site Settings;
2. Select Master Page;
3. Expand the Alternate CSS URL option;
4. Add the reference to the customStyle.css;
5. Refresh your browser using CTRL + F5.

Alternate CSS URL for Farm Solution (SharePoint 2013/2016/2019) 

1. Go to Site Settings;
2. Select Master Page;
3. Expand the Alternate CSS URL option;
4. Paste the following URL and replace the THEME_NAME /_layouts/15/1033/STYLES/THEME_NAMEPackage/customStyles.css;
5. Refresh your browser using CTRL + F5.

Note: For SharePoint 2013/2016/2019 if changes are not immediately visible, reset your IIS.