The Custom CSS Panel allows you to override the default styling on any theme with your own CSS (Cascading Style Sheets). This allows for almost unlimited customization options!
*** Please note that TINT does not provide CSS customization as a service. ***
If you don't have developer resources, you don’t need to be a CSS guru to get going - let’s go over making some basic font changes using the Custom CSS Panel and Google Chrome.
Using Custom CSS
1) In Chrome, use [Ctrl]+[Shift]+[C] (or [Cmd]+[Shift]+[C] on Mac) to open the Chrome DevTools in Inspect Element mode.
2) Hover over the element that you’d like to modify to highlight, and then left-click. In this example we’ll modify the font of our posts:
3) You will see several panes on the right-hand side of the DevTools panel. The "Style" pane displays all the current values for CSS properties computed by the browser for the currently selected element. Within the Style pane, you’ll want to find the .class Selector that contains the style information you’d like to change. Here we see several classes that are using the font Lato with a size of 18px:
4) Underneath the classes you can change property values by clicking the values and entering your changes. Here we’ll change the font-family to Helvetica, and the font-size to 12px:
5) Changes have immediately been reflected in the browser:
6) Copy all of the elements that you’ve modified (selectors, properties, and values) to the clipboard:
7) In the TINT Editor click the PERSONALIZE panel on the left-hand side of the screens, then the "Themes" tab, scroll down within the frame, and then click the "CUSTOM CSS" button:
8) You’re now in the Custom CSS Panel. Paste the content from your clipboard into the panel and click "Save":
We’ve successfully applied Custom CSS to our TINT! You can now close the DevTools and your style changes will be saved.
Customize the Popup Modal Using CSS
1) Select a theme that uses a popup modal, then navigate to the "Popup" tab under the PERSONALIZE panel:
2) Scroll down to find the "Custom CSS" button and click it to open the Custom CSS editor:
3) Enter your CSS changes and hit "Save":
And there you have it! Now you can fully customize your popup modal to match your brand's style.
For more information on editing styles in Chrome DevTools click here. If you’re new to CSS http://www.w3schools.com/css/ is a great resource; they provide tutorials and have detailed explanations on all CSS properties.
Click here to check out some live examples in our CSS Hall of Fame!
Click here to view a collection of some of the most common styling questions we get.