This article describes how to customize the colors, fonts and other options on the Jolie WordPress theme.
* This tutorial covers the basic controls available to customize your theme. It does not cover every setting. Once you get the hang of the basic control types, you should be able to explore and manage all the options based on the different control types and choices.
All color options are found in the "Customizer":
1. Go to Appearance > Customize
2. The Color options for this theme are broke down into 9 sections based on area of the theme:
- Colors: Top Bar
- Colors: Mobile Menu
- Colors: Menu
- Colors: Sidebar
- Colors: Footer
- Colors: Posts
- Colors: Accent & Background
3. To begin editing colors, click on one of the Color settings tabs. We will cover the Colors: Top Bar in this tutorial. All other colors controls are edited the same way.
4. You will see a list of color options. Each option is labeled with the relevant theme element.
5. To edit the color of an element, click on the Select Color button. The current color set is displayed to the left of this button.
6. A color selection palette will open. You can change the color by entering your 6-digit hex code or by choosing a color on the color palette display.
7. If, at any time, you want to reset the color setting to the theme default, just click the Default button.
8. When done editing your settings, click the Save & Publish button.
It is easy to add any Google font to your new theme.
Step 1: Select a Font
1. Visit https://www.google.com/fonts to check out all the fonts available.
2. Once you pick your font, you will need to get the code to paste into the WordPress Theme Customizer.
3. From the main Google Fonts page, click on the Select this font icon (red circle with + sign).
4. The font will be added to a modal at the bottom of the screen called "Family Selected"
5. Click on the modal to expand it.
6. The code you need for your fonts as labelled 1 and 2 in the image above.
Step 2: Install your font
1. Go to Apperance > Customize
2. Click on the Fonts tab to open the font settings.
3.Each font setting as 2 parts:
- Font name
- Font family
4. In the Font name field, enter the code labeled 1 above.
5. In the Font Family box, enter the name of the font (no + signs) surrounded by single quotes:
Quick Hint: If you want to return to the default font, just remove the added font from the Font name and Font family boxes and leave the boxes blank. The theme will default to the original fonts.
Post Settings & Page Settings
Using settings in the Customizer, you have the option to hide different elements in the post and page layouts. For example, if you want to hide the date on your posts.
1. Go to Appearance > Customize
2. Click on the Post Settings tab.
3. You can choose to hide the Featured Image from the top of the post in the Standard layout and/or in the single post pages.
4. Under Hide Post Elements you have the option to hide a number of the post elements by ticking the box next to the option.
5. You can also change the text for the post pagination (Next Post/Previous Post).
6. Under the Page Settings panel, you can choose to hide all page titles and the page share buttons.
7. Save & Publish your settings.