Using the Custom CSS Panel

The Custom CSS Panel allows you to override our default styling with your own CSS (Cascading Style Sheets). If you’re a web developer this allows for almost unlimited customization options. That being said, 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.

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.

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.