How to Customize Pristine's Branding

This tutorial goes over how to customize the design and colors of Pristine to fit your organization's branding.

Accessing the Theme Options Panel - Where You Can Access Pristine' Customization Controls

Pristine contains over a dozen various toggles and switches that allow you to customize various parts of the design. You can customize the body color, the navigation, and more.

To access this section of the Weebly builder, first login to your Website editor, and then click on the "Theme" tab. Next, click on "Theme Options" as illustrated above.

Overview Of All The Theme Options

When you click on Theme Options, you'll see a long list of control switches and toggles that let you make adjustments to the theme. Here's an overview of what they all do.

• Search Box - Enables/Disables Search Box
• Social Icons - Enables/Disables Social Icons
• Search icon - Shows/Hides Search icon
• Section Margins - Shows/Hides section margins on pages such as default header and scrollipage between each section.
• Body BG - Changes the background color for the body
• Nav Color - Changes the color of nav links

• Subnav BG - Changes the color of the subnavigation background
• Subnav BG H - Changes the hover color of the subnavigation background
• S1 BG - Background color for section 1 (you’ll see a “S1” with a black background for this section in the Weebly editor)
• S2 BG - Background color for section 2 (you’ll see a “S2” with a black background for this section in the Weebly editor)

• S3 BG - Background color for section 3 (you’ll see a “S3” with a black background for this section in the Weebly editor)

• S4 BG - Background color for section 4 (you’ll see a “S4” with a black background for this section in the Weebly editor)
• S5 BG - Background color for section 5 (you’ll see a “S5” with a black background for this section in the Weebly editor)
• S6 BG - Background color for section 6 (you’ll see a “S6” with a black background for this section in the Weebly editor)
• S7 BG - Background color for section 7 (you’ll see a “S7” with a black background for this section in the Weebly editor)
• S8 BG - Background color for section 8 (you’ll see a “S8” with a black background for this section in the Weebly editor)
• S9 BG - Background color for section 9 (you’ll see a “S9” with a black background for this section in the Weebly editor)
• S10 BG - Background color for section 10 (you’ll see a “S10” with a black background for this section in the Weebly editor)
• S11 BG - Background color for section 11 (you’ll see a “S11” with a black background for this section in the Weebly editor)
• S12 BG - Background color for section 12 (you’ll see a “S12” with a black background for this section in the Weebly editor)
• Footer Color - Color of the footer
• Slider Color - Color of the PureSlider arrows
• ScrolliPage Color - Color of the ScrolliPage navigation dots
• Btn 1 - Button 1 outline color
• Btn 2 - Button 2 outline color
• Btn 3 BG - Button 3 background color

• Btn 4 BG - Button 4 background color
• Btn 4 Txt - Button 4 text collor
• Btn 4 Hover - Button 4 hover color
• Split 50/50 BG - Background color of content section in the split 50/50 header type.

Color Picker May Be Buggy At Times: Weebly's color picker can be buggy at times. You may need to "wiggle" the selector a few times for the editor to actually process your change. Furthermore, you may need to refresh your browser afterwards to see the change. If you continue having problems please contact us.

‍