How to Use Theme Management?

Webayt Theme Management in a CMS is used to manage theme files, the active theme, and theme settings that determine the appearance of your website. Through this section, you can view available themes, activate a theme, review theme files, and edit basic design settings used within the theme.

Theme management is a crucial aspect of your website's visual design. Therefore, caution is advised, especially when changing themes, editing files, or updating theme settings.

What is Theme Management Used For?

Theme Management , Webayt is the area in the CMS used to manage the design infrastructure of your website. This section controls which theme your website will display, how theme files are edited, and some color/font settings used within the theme.

In this section, the following operations can generally be performed:

• View loaded themes in the panel
• Activating a theme
• Viewing the active theme
• Using theme mode temporarily
• Managing theme files
• Editing theme settings
• Updating the color and font variables used within the theme.

How can I access the Theme Management page?

To access the theme management page, you can click the Theme Management link in the left menu of the Webayt admin panel.

 Theme Management

This page contains two main tabs: Themes and Theme Settings .

• Themes: This section lists the themes installed on the panel.
• Theme Settings: This area is where you can adjust the general font and color settings available within the active theme.

How to use the Themes tab?

In the Themes tab, the theme folders installed on the system are displayed in a card structure. Each theme card contains the name and status of the respective theme.

The active theme is usually highlighted with a different color or indicator. This makes it easy to see which theme is currently being used on your website.

The theme control menu can be opened via the theme cards. Depending on the theme status, this menu may contain options such as Activate and Manage Files .

How to activate the theme?

To activate the theme you want to use on your website, you can use the Activate option from the action menu of the relevant theme card.

When a theme is activated, your website's front-end is displayed according to the selected theme structure. Therefore, it is recommended that you ensure the chosen theme is working correctly and is compatible with your site structure before making any theme changes.

The active theme is usually indicated in the theme list in green or with a special icon. This helps you quickly see which theme is currently live.

What is Theme Mode?

In some cases, a theme may be displayed specifically for your session. This structure can be used to test or examine a particular theme before changing the active theme for the entire site.

When theme mode is enabled, a notification area may appear in the panel indicating that the relevant theme is displayed exclusively for your session. In this case, the theme may only be temporarily displayed for your session, and not for all visitors.

To end theme mode, you can use the "Turn Off Theme Mode" button on the screen.

What is the purpose of the Manage Files option?

The Manage Files option is used to view and edit the file structure of the relevant theme. This area allows you to examine the files within the theme along with their folder structure.

In the Manage Files window, theme folders are usually displayed on the left, and the contents of the selected file are displayed on the right. This allows theme files to be viewed and edited through the panel if necessary.

The following types of files can be viewed in this area:

• theme.json: This is the theme's general configuration file.
• Assets: This folder contains CSS, JS, image, or similar asset files used within the theme.
• defined: Can contain files that include defined text or system values used within the theme.
• module: This folder contains the appearance files for theme modules.
• CSS files: Used for theme colors, backgrounds, typography, and appearance settings.
• JS files: Used for interactive behaviors within the theme.

What should be considered when editing theme files?

Theme files can directly affect the front-end appearance of your website. Therefore, care should be taken, especially when making changes to HTML, CSS, JS, or theme configuration files.

• Before editing the file, be sure to know what you are changing.
• Avoid unnecessary modifications that could break the code structure.
• Make sure the file is the correct one before saving.
• Check the front-end of the site after making CSS or JS changes.
• If necessary, back up the file contents before making any changes.
• If caching is used, remember to refresh the relevant cache after making changes.

Changes made to the active theme's files, in particular, can instantly affect the website's appearance. Therefore, file editing on live websites should be done carefully.

What is the purpose of the Theme Settings tab?

The Theme Settings tab is used to edit some general design variables used within the active theme.

The values in this tab can be used as variables in themes. This allows the structure defined in the theme files to be customized according to the font and color settings entered in the panel.

The Theme Settings section generally includes the following settings:

• Theme Selection: Shows the currently selected theme.
• Font: Used to determine the font family to be used on the site.
• Main Color: This is the main brand color that can be used throughout the site.
• Header Background Color: Can be used for the header background color within the theme.
• Module Background Color: Can be used to set the background color for modules.
• Module Background Color 2: Can be used as a second background color in some theme areas.

How to Use Font Settings?

The Font field is used to specify the font information that can be used within the theme. For example, a font definition such as Arial or sans-serif can be entered in this field.

If the theme files are configured to use this value as a variable, the font value entered from the control panel can be reflected in the relevant areas of the site.

When entering a font value, it is recommended to use a definition that conforms to the current CSS font family structure.

How to Use Color Settings?

The color schemes located in the Theme Settings section are used to manage the visual variables used within the theme.

For example, the color value entered in the Main Color field can be used on buttons, links, icons, or accent areas within the theme. Similarly, header and module background colors can also affect the relevant parts of the theme.

Color values are usually entered in HEX format. For example:

 #0F5B99
#ffffff
#f3f6fa

When choosing colors, the website's brand identity, readability, and user experience should be considered.

How to Use Theme Settings in a Theme?

The font and color fields in the Theme Settings tab are used as variables in the theme files. This allows the theme developer to dynamically use the values entered from the panel within the theme.

For example, if values like the main color, header background color, or module background color are defined as variables in the theme files, changes made in the panel may be reflected in the relevant areas of the theme.

This structure allows some basic design settings to be managed via the panel, instead of directly editing theme files for every change.

What should be done after updating the theme settings?

After making changes in the Theme Settings section, you need to save the settings by clicking the Save button.

It is recommended that you check the front-end of the website after making the changes. This will allow you to see if the colors, font, and other theme variables are reflected as expected.

If changes aren't immediately visible on the front end, and caching is used, the relevant page or site cache may need to be refreshed.

What to Consider When Using Theme Management?

Theme management is a crucial area that affects the visual structure of a website. Therefore, the processes carried out here should be implemented in a planned manner.

• Check the current theme before changing the active theme.
• If you're using theme mode, remember that it may only be specific to your session.
• Please note that changes you make in the Manage Files area may affect the appearance of your site.
• When editing theme files, be careful not to break the HTML, CSS, JS, and JSON structures.
• When choosing colors in your theme settings, consider readability and brand consistency.
• Enter the font value according to the valid CSS font family structure.
• Check the website's front-end after making the changes.
• If caching is used, refresh the cache when necessary.

Summary

Theme Management is the section in the Webayt CMS used to manage the appearance and theme infrastructure of your website. Here you can view installed themes, activate a theme, manage theme files, and edit theme settings.

The font and color values located in the Theme Settings tab can be used as variables in the theme files. This allows some design settings within the theme to be managed more easily through the control panel.