Customize / Edit Style - Tips & Tricks

Important notes on editing

Before you start working on your product, you should definitely follow the instructions below - otherwise this can lead to undesirable behavior or impairment of the support claim!


1. Be sure to save the original files before editing your product!

2. To avoid undesirable behavior in the event of errors, switch your project to "maintenance mode". (Deactivate it again after editing!)

3. Do not remove the protection of the style so that our products can still be updated.


Setting options

Each of our products has an individual and, above all, unique ACP configuration plugin which makes it much easier for you to process the most important basic functions. To be able to configure your style / your product, log into your ACP (= Admin ControlPanel (also called Administration)) and switch to "Configuration" in the left sidebar and then to the menu item "Style: Design Name - XYZ" (The "design name" is of course to be replaced by the name of your product, and "XYZ" by the version you are using (for example "Light" or "Dark" Edition).


There you can easily configure the most important basic functions, especially without any special knowledge. For example, you can edit or deactivate the additional boxes in the design (for example "AdditionalFooter" or "AdditionalPartner"). This allows you to adapt your design to your wishes and the needs of your community!



Change the Main Colors

The main colors of our products can be easily adjusted within a few seconds.


1. Log in to your ACP (= Admin ControlPanel (also called Administration)) and switch to "Customization" in the left sidebar and then to the "Styles" menu item.

2. Now select your style / your desired product and select "Edit" ("pen" icon), then switch to the "Color palette" menu item in the tab menu.

3. In the color palette, select the "wcfHeaderMenu" category in the right sidebar. Now you can change the main color of the design to your preferred color - in most of our products, these are the two variables "$wcfHeaderMenuBackground" and "$wcfHeaderMenuLinkBackground" (this is, however, described in detail in the product description). Then scroll to the bottom of the page and click the "Submit" button. Your changes are now saved!



Note: If you want to offer several color variants to your visitors / members, you can simply duplicate your respective product (style) via "Duplicate style" and carry out the above steps again. This is possible any number of times. You can duplicate a style in the style editing at the top right with the "Duplicate style" button.


Exchange graphics

Of course you can and may exchange all graphics that are included in your design / your product. A distinction is made between the "logo" and the other graphics. (Original graphics that are included in the style / product may not be used for other projects, styles or products!)


Change the logo:

1. Log in to your ACP (= Admin ControlPanel (also called Administration)) and switch to "Customization" in the left sidebar and then to the "Styles" menu item.

2. Now select your style / your desired product and select "Edit" ("pen" icon), then switch to the menu item "Global Settings" in the tab menu.

3. In the "Page logo" category, you can now specify the path of your logo (both for the desktop and for the mobile (smartphone, tablet) variant) and the width and height of your logo. (Please make sure that the specified height and width actually corresponds to your graphic). Then scroll to the bottom of the page and click the "Submit" button. Your changes are now saved!


Change all other graphics:

1. Connect to your webspace / server on which your WoltLab Suite installation is operated and change to the main directory of your WoltLab Suite installation. (For example using FilaZilla)

2. Now switch to the respective path that is stored in your design - you can view this in the ACP under "Customization" -> "Styles" -> "Edit style" -> "Data".

3. Now replace your desired graphics with the original graphics that are supplied in the style. Make sure that both the file name and the file extension are identical.



CSS & Template Editing

If you want to make further changes in the CSS or in the templates, this is permitted - but is at your own risk. Nevertheless, we would like to give you some tips and tips & tricks in this regard.


Insert individual CSS:
The same applies here: do not remove the protection of the style! The insertion and editing of individual CSS is also possible with activated protection!


1. Log into your ACP (= Admin ControlPanel (also called Administration)) and switch to "Customization" in the left sidebar and then to the "Styles" menu item.

2. Now select your style / your desired product and select "Edit" ("pen" icon), then switch to the "Advanced Settings" menu item in the tab menu.

3. Insert your individual CSS declarations / individual SCSS variables in the "Own declarations" editor field. Tip: If a declaration does not work, try adding a [tt]! Important [/ tt] to the respective declaration. Then scroll to the bottom of the page and click the "Submit" button. Your changes are now saved!


Template editing / own templates:


Note: To avoid potential errors, create your own template group in the ACP under "Customization" -> "Template groups" -> "Add template group" and select it in your design! The newly created template group can be selected or assigned in the ACP under "Adjustment" -> "Styles" -> "Edit style" -> "Data" -> "Template group".


If errors occur or your own templates are no longer required, you can always switch back to the original template group that was supplied in the style.