Simplest step by step guide to modify theme

Although we have tried to make theme customization quite simple by keeping most of the colors in a single file(colors.less), it can still be daunting for people to edit other aspects of the theme without having a good knowledge of CSS and codoforum theme structure.

So, this guide will give a step-by-step procedure to edit the most common parts of codoforum. This is a work-in-progress page and we will keep on adding/updating the information mentioned here to keep up with the latest version of codoforum.

We will be using the constant ACTIVE_THEME whenever we mention any path to a file which is present in the current active theme. You can find the name of your active theme by visiting the Admin panel -> UI Elements -> Themes.

Adding background image

  1. Open sites/default/themes/ACTIVE_THEME/less/colors.less
  2. Replace @bodyBg: @bodyBgColor; with @bodyBg: url('your_img_path.png') repeat;

There is more documentation in comments there to help you.

  1. Open sites/default/themes/ACTIVE_THEME/less/colors.less
  2. Change the value of @globalNavLink and/or @globalNavIconColor to desired color

Topic/Post container

  1. Editing the topic/post body text color
    – Open sites/default/themes/ACTIVE_THEME/less/colors.less
    – Change the value of the variable @articleMessageColor to desired color.

  2. Editing the topic title color
    – Open sites/default/themes/ACTIVE_THEME/less/colors.less
    – Change values of @article_A_Color and @article_A_HoverColor. There are two colors because it is a link as the color changes when you hover over it

  3. Changing icon color
    – Open sites/default/themes/ACTIVE_THEME/less/colors.less
    – Change values of @articleIconColor @articleIconNumViewsColor @articleIconNumRepliesColor as required

Not mentioning each and every color as they are clearly grouped in colors.less so with a few tries you should be able to change all the colors inside the topic/post container.

Updating height of the message container

This is applicable to two pages: topics displayed in “All topics” page and topics displayed in a “category” page. Since, we only show an excerpt/preview of the topic in these pages, the maximum height is limited to a fixed number so that all topics appear uniform for easier navigation.

To increase the default height in All topics page, open sites/default/themes/ACTIVE_THEME/less/topics.less

Search for .codo_topics_topic_message for css property max-height: 260px;
Change the number 260 as per required.

Similarly, do it in the file sites/default/themes/ACTIVE_THEME/less/category.less

This alone might not be enough for you as the text itself is cut after a specific number of words. So to increase that, open sys/CODOF/Format.php, and change the value in the line $maxNoCharacters = 400; //Util::get_opt('max_excerpt_chars'); as per your requirement.

© CODOFORUM 2023. All Rights Reserved.