Marek,

This is what has worked for me:

I have been using a custom theme myself in 4.2.x and am now in the process of implementing the same in 5.0.x. 5.0 now has the “dark” theme available as its own plugin, which I like, so I’ve decided to build a new theme off of that.

I set up a “local-plugins” folder that I can reference to. Since “dark” has its own git repository, I simply grabbed a copy of that to start with. So now I have local-plugins/openproject-themes-dark available to modify.

One of the first things I did was rename the plugin so that I don’t have two “dark” themes with the same name. It takes a little time to go through the contents of all folders and files, but make sure you are consistent in everything. So in my example, the word “dark” was changed to “WRC” (since I am branding the theme for our company.)

Everything from here references the openproject-themes-{your-theme-name} directory.

After that, I created a _custom_theme_rules.css.sass file in the directory app/assets/stylesheets/wrc/ and added all of my custom modifications. These will override any setting in the base stylesheet. I generally accept most of the theme the way it is, but perhaps tweak a few text styles (bolder text in some places, changing paddings, font sizes, or line heights, etc.). After you create the file with your css settings, you need to be sure to link it into the plugin itself. You need to add the following line to the .css.sass file in /app/assets/stylesheets/ directory (e.g. dark.css.sass)

@import wrc/custom_theme_rules

Additionally you should look in the _variables.css.sass file for all of the colors used in the theme, and change those to your liking. Depending on the base theme you’re starting with, you may also find the font specifications, etc.

Put any custom images (company logo) in {plugin-directory}/app/assets/images/.

Then its a simple matter to add the appropriate line to Gemfile.local:

My example:

gem "openproject-themes-wrc", path: "/opt/local-plugins/openproject-themes-wrc"

Then run your bundle install. After this, you need to make sure to also run:

sudo openproject run rake assets:precompile
sudo service openproject restart

If someone has better ideas, I’m open to them.

This was a good guide from Mike, I followed one earlier post https://community.openproject.com/topics/731?page=1 at first and had a problem with file not found for the logo image as that instructed to store the logo into main openproject folder instead of the theme specific folder

The logo file must be stored in the folder “/app/assets/images/”

Instead the path from this guide seems to be the correct place

{plugin-directory}/app/assets/images/

Also as an instruction for others as I found no examples of the content for _custom_theme_rules.css.sass here is the content of my file:

#logo
.home-link
margin-top: 0px
background-size: 230px
height: 55px

so e.g. here I’ve picked up settings from _top_menu.sass and changed some values.

Also it seemed to be really important that the @import clauses are on this order that was specified on the original package of Shiny for the .css.sass file in

{plugin-directory}/app/assets/stylesheets/

here is the order from that file:

@import shiny/variables
//@import shiny/fonts/shiny_font
@import default
@import shiny/custom_theme_rules

I had problems at fist as I added custo_theme_rule later and apparently it did not go to the correct place on the manual entry.

I hope these help others who try to implement themes.

Hi

This help unfortunately did not function properly in version 6, please help me for customize theme .

Thanks

Hi,

I just yesterday installed a new theme to 6.1.3 with the help of this thread. The only part I had to change was the sudo openproject run rake assets:precompile sudo service openproject restart since I did a manual install instead of packaged install. This page: https://community.openproject.com/topics/731?page=1 had instructions for how do assets:precompile

What kind of problem do you have there in details?

Hi

i do step by step but

When I change CSS files, nothing happens after precompile and restart openproject. Even after the change of color is not operating properly

I want only rtl dark theme.

thanks for your help

Hi

i do step by step but

When I change CSS files, nothing happens after precompile and restart openproject. Even after the change of color is not operating properly

I want only rtl dark theme.

thanks for your help

The only thing I can think of being missing from this guide is the very last step of theme activation on Admin menu: System settings | Display | Theme

Hi

I’ve found the problem. generate css file this error appear = I’ve found the problem.

Thanks