How to Change Colors and Fonts in TishCreative Theme

If you have purchased and installed the TishCreative theme and would like to customize the colors and fonts, this guide will help you make those changes directly in the style.css file:

Changing Colors

Step 1: Locate the style.css File

You can access it via your WP dashboard by navigating to Appearance > Theme Editor, and then selecting the style.css file from the list.

Step 2: Identify Color Variables

In the style.css file, colors are defined using CSS variables in the :root section. Here are some key variables you can modify:

:root {
  --bd-common-white: #ffffff;
  --bd-common-black: #000;
  --bd-heading-primary: #000;
  --bd-grey-1: #f5f8fb;
  --bd-grey-2: #e2ebf4;
  --bd-text-body: #888888;
  --bd-text-1: #000;
  --bd-theme-primary: #0660bd;
  --bd-border-1: #888888;
  --bd-border-2: #b7c3cf;
}

Step 3: Change the Footer Background Color

To change the background color of the footer, locate the CSS class for the footer in the style.css file and update the background color property. The current footer background color is set by the .theme-bg-2 class.

Example:

.bd-footer__section {
    background-color: #your-new-color; /* Replace #your-new-color with the desired color code */
}

Changing Fonts

Step 1: Include Google Fonts

To use a Google Font, you first need to include it in your style.css file. For example, to include the “Roboto” font, add the following line at the top of your style.css file:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Step 2: Update Font Variables

In the :root section, update the font family variables to use your chosen Google Font. Here’s an example using “Roboto”:

:root {
  --bd-ff-body: 'Roboto', sans-serif;
  --bd-ff-heading: 'Roboto', sans-serif;
  --bd-ff-p: 'Roboto', sans-serif;
}

Step 3: Example of Applying Changes

If you want to change the footer background color to blue and the fonts to “Roboto”, your style.css modifications might look like this:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
    --bd-ff-body: 'Roboto', sans-serif;
    --bd-ff-heading: 'Roboto', sans-serif;
    --bd-ff-p: 'Roboto', sans-serif;
    --bd-common-white: #ffffff;
    --bd-common-black: #000;
    --bd-heading-primary: #000;
    --bd-grey-1: #f5f8fb;
    --bd-grey-2: #e2ebf4;
    --bd-text-body: #888888;
    --bd-text-1: #000;
    --bd-theme-primary: #0660bd;
    --bd-border-1: #888888;
    --bd-border-2: #b7c3cf;
}

.bd-footer__section {
    background-color: #0000ff; /* New background color for the footer */
}

Conclusion

By following these steps, you can customize the colors and fonts in your TishCreative theme to better match your brand’s style. If you need further assistance, feel free to reach out to our support team.