# Customizing Themes

Customizing a CMS theme allows you to create a unique and branded website. Whether you’re adjusting the layout, typography, or CSS styles, personalizing your theme helps improve user experience and align your site with your brand identity.\
This guide covers how to customize a CMS theme using built-in settings, custom CSS, and advanced layout modifications for **WordPress**, **Joomla**, and **Drupal**.

***

#### Methods for Customizing a CMS Theme

* **Method 1**: Using the Theme Customizer – Beginner-friendly
* **Method 2**: Editing CSS – For advanced styling adjustments
* **Method 3**: Modifying Layout Settings – Adjusting structure and design
* **Method 4**: Changing Typography – Customizing fonts for branding
* **Method 5**: Using a Child Theme – Making changes without affecting the original theme

**Pro Tip**: Before making changes, always back up your theme to prevent data loss.

***

#### Using the Theme Customizer (No Coding Required)

Most CMS platforms include a built-in **Theme Customizer** that allows you to make live changes.

**WordPress Customizer**

1. Go to **Appearance > Customize**.
2. Modify sections such as site identity, colors, typography, and layout.
3. Preview changes in real-time and click **Save & Publish**.

**Joomla Template Customizer**

1. Navigate to **Extensions > Templates > Styles**.
2. Select your active template and click **Customize**.
3. Modify layout, colors, fonts, and other settings.
4. Click **Save & Close**.

**Drupal Theme Customization**

1. Go to **Appearance > Settings**.
2. Select the theme and configure layout, color schemes, and typography.
3. Save the settings to apply changes.

**Pro Tip**: The built-in theme customizer is ideal for quick adjustments without touching code.

***

#### Customizing Theme CSS for Advanced Styling

For deeper customization, **Cascading Style Sheets (CSS)** allow you to control colors, spacing, fonts, and animations.

**Adding Custom CSS in WordPress**

1. Go to **Appearance > Customize > Additional CSS**.
2. Enter custom CSS (e.g., change button color):

```css
.button {
  background-color: #ff6600;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
```

3. Click **Publish** to save changes.

**Adding Custom CSS in Joomla**

1. Navigate to **Extensions > Templates > Styles**.
2. Open the active template and find the **custom.css** file.
3. Add new CSS rules and save changes.

**Adding Custom CSS in Drupal**

1. Open the theme folder in FTP or File Manager.
2. Locate the CSS file (e.g., **style.css** or **theme.css**).
3. Add custom styling and save.

**Pro Tip**: Use developer tools (Chrome DevTools, Firefox Inspector) to test CSS changes before applying them.

***

#### Modifying Theme Layout

Adjusting the layout structure can improve user experience and content presentation.

**WordPress Layout Customization**

* **Use Page Builders**: Install Elementor, WPBakery, or Divi for drag-and-drop editing.
* **Modify Theme Settings**: Go to **Appearance > Customize > Layout**.
* **Change Header & Footer**: Use widgets or plugins like Header Footer Elementor.

**Joomla Layout Customization**

* **Use Template Manager**: Navigate to **Extensions > Templates > Styles**.
* **Rearrange Modules**: Modify positions via **Module Manager**.
* **Customize Grid Structure**: Edit **templateDetails.xml** for advanced layout control.

**Drupal Layout Customization**

* **Use the Layout Builder**: Go to **Structure > Block Layout**.
* **Customize Regions**: Modify **page.tpl.php** file in the theme folder.
* **Install Modules**: Use **Panels** or **Paragraphs** for flexible layout editing.

**Pro Tip**: If you need advanced layout changes, consider creating a child theme instead of editing the core theme.

***

#### Changing Typography (Fonts & Text Styles)

Typography plays a major role in website readability and aesthetics.

**Changing Fonts in WordPress**

* **Use the Theme Customizer**: Go to **Appearance > Customize > Typography**.
* **Install a Plugin**: Use **Google Fonts Typography** for more options.
* **Manually Add CSS**:

```css
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}
```

**Changing Fonts in Joomla**

* **Edit Template Settings**: Go to **Extensions > Templates > Styles**.
* **Use Google Fonts**: Add custom font URLs in the CSS file.
* **Modify Font via CSS**:

```css
h1, h2, h3 {
  font-family: 'Lora', serif;
  color: #333;
}
```

**Changing Fonts in Drupal**

* **Use Font Module**: Install the **Google Fonts module**.
* **Edit CSS Manually**: Modify **style.css** with new font-family rules.
* **Add @import Rule**:

```css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
body {
  font-family: 'Montserrat', sans-serif;
}
```

**Pro Tip**: Choose web-safe and readable fonts to enhance UX and accessibility.

***

#### Using Child Themes for Safe Customization

A **child theme** lets you customize a theme without modifying the original theme files, ensuring updates won’t erase your changes.

**Creating a Child Theme in WordPress**

1. Create a new folder in `/wp-content/themes/` (e.g., **mytheme-child**).
2. Add a **style.css** file with the following code:

```css
/*
Theme Name: MyTheme Child
Template: mytheme
*/
```

3. Activate the child theme in **Appearance > Themes**.

**Using Child Themes in Joomla & Drupal**

* Check the CMS documentation for sub-theme or child template setup.
* Override styles and templates in a custom CSS file.
* Keep the parent theme intact to allow updates without losing changes.

**Pro Tip**: Always use child themes if you plan on modifying core theme files.

***

#### Summary: Customizing Themes Checklist

* Use the **Theme Customizer** for quick changes.
* Modify **CSS** to adjust colors, fonts, and styles.
* Change layouts using **page builders** or **template settings**.
* Customize **typography** for better readability.
* Create a **child theme** to preserve changes after updates.
* Test customizations before applying them to the live site.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.sitecove.com/how-to-guides/content-management-systems-cms/themes-templates-and-customization/customizing-themes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.