Skip to main content

How to Change Your Logo, Colors, and Fonts in Joomla

Using WordPress instead? See How to Change Your Logo, Colors, and Fonts in WordPress.

Most branding changes in Joomla happen in your template style, the saved settings for your template. Here's where to look. These steps are for Joomla 5 and 6, using the default Cassiopeia template as the example. If your site uses a different template, the idea is the same but the options will look different.

Make a copy first

  1. Log in at yoursite.com/administrator.
  2. Go to System, then in the Templates panel click Site Template Styles.
  3. Tick your current style (the one with the gold star is the default) and click Duplicate.

Now you can try changes on the copy and switch back if you don't like them. Back up your site too. See Website Backups: What to Back Up, How Often, and How Restores Work.

Change your logo

  1. Open your template style.
  2. Go to the Advanced tab.
  3. Make sure Brand is set to Yes.
  4. Under Logo, click Select and choose an image from the Media Manager, or upload a new one.
  5. If you'd rather show text, leave the logo empty and fill in Title (and Tagline if you want one).
  6. Click Save and check the front of your site.

Logo tips: Use a PNG or SVG with a transparent background, and size it close to how big it shows on screen. Upload a fresh copy instead of overwriting the old file, so browsers don't keep showing the old one from cache.

Change colors

On the Advanced tab, use Colour Theme to pick one of Cassiopeia's built-in color themes. Save and check your site.

For your exact brand colors, you'll need a bit of custom CSS (see below).

Change fonts

On the Advanced tab, use Fonts Scheme to choose between system fonts and a few web font options. Depending on your choice, you can also set the Body Font Stack and Heading Font Stack. Save and check your site.

If your brand uses a different font, add it with custom CSS. Make sure you have the right license for any font you use.

Add custom CSS the safe way

Don't edit the template's main CSS files. Updates will overwrite them. Cassiopeia loads a user.css file for your own styles if one exists. It isn't there by default, so you'll create it:

  1. Go to System, then in the Templates panel click Site Templates.
  2. Click Cassiopeia Details and Files.
  3. Use the new file button in the editor toolbar to create a CSS file named user in the css folder. It ends up at media/templates/site/cassiopeia/css/user.css. Skip this step if the file already exists.
  4. Add your CSS, for example your brand color for links or buttons.
  5. Click Save and check your site. You may need to refresh or clear your browser cache.

If you're comfortable with Cassiopeia's CSS variables, you can set your brand colors there in one place. This is developer territory, so test on a copy first.

For changing the HTML of a page section (not just its look), see Joomla Template Overrides: Change How Pages Look Safely.

Using YOOtheme Pro?

Many Joomla sites use YOOtheme Pro, which has its own visual customizer instead of the Cassiopeia settings above. The steps below match recent versions. Older versions may label things a little differently.

Open the customizer

  1. Go to System, then in the Templates panel click Site Template Styles.
  2. Open your YOOtheme style. (You can also use the YOOtheme link in the System menu.)
  3. The customizer opens with a live preview of your site. Its menu has Layout, Style, Pages, Templates, Menus, Modules, and Settings.

Change your logo

  1. Go to Layout > Site.
  2. Choose your image under Logo Image. For an SVG logo, you can turn on the inline SVG option and set the width and height.
  3. If you'd rather show text, use Logo Text.
  4. Fill in the optional logo fields if your design needs them: Inverse Logo (for dark backgrounds), Mobile Logo, Mobile Inverse Logo, and Dialog Logo (used in the mobile menu dialog).
  5. Click Save.

Change colors and the overall style

  1. Go to Style. Pick a style to start from, if you haven't already.
  2. Open Global.
  3. Set your text and link colors: Color, Emphasis Color, Inverse Color, Link Color, Link Hover Color, and Muted Color.
  4. In the Backgrounds group, set Background, Primary Background, and the others. These flow through to sections, buttons, and other elements across the site.
  5. Click Save.

Change fonts

  1. Go to Style > Global.
  2. Set the main Font Family. Use the Primary, Secondary, and Tertiary groups for the fonts used in headings and other elements.
  3. If you use Google Fonts, Style > Google Fonts lets you pick which weights to load. Fewer weights means faster pages.
  4. Click Save.

Custom CSS in YOOtheme Pro

Add custom CSS in Settings > CSS. Use that instead of editing template files, so updates don't wipe out your changes.

Using a different template?

Other third-party templates and page builders have their own customizers too. Look in the template style settings or its own admin screen for logo, color, and font options. The same rules apply: copy the style first, and keep custom CSS in the place the template provides so updates don't wipe it out.

Check your changes

Related

Want a fresh look?

If your branding needs more than a few tweaks, our website design team can help. Or call us at 678-379-9321 or email This email address is being protected from spambots. You need JavaScript enabled to view it..

Joomla