There is a news article about Creating a theme in OpenProject. I am afraid it could be outdated, however, it might be a good starting point anyway. Also for us to update this information…

Hello Birthe, hello Jason,

I fear that the news article is outdated and does not give a good starting point because theming is done differently these days.

I spoke with the responsible developer and he said that there will be no theming guide available soon. Nevertheless, he will try to give some starting points as soon as he has some time left. So, stay tuned! :-)

Kind regards,
Hagen

If you point me in the right direction, I can write an article about the process on my blog once I get it figured out.

I am also interested in customizing the appearance for our installation. Either some direction in creating themes, or knowing which CSS files to modify would be very helpful.

Regards,
Chris

Anyone point me in the right direction? We need to make some changes as soon as possible.

Hi All

I created and attached a attachment:openproject_theme_skeleton.tar

It works like this:

- Extract the content of the file to a location of your choice.

- Rename (or not ;) ) all occurrences of ‘shiny’ by a (theme) name of your choice, include all file names and use same letter case as in the original
- Add gem to the Gemfile.plugin like this

gem "openproject-themes-shiny", :path => "%path_to_your_theme%/openproject-themes-shiny"

- Add your changes
— app/assets/stylesheets/shiny/_variables.css.sass (for override SASS variables from openproject core)
— app/assets/stylesheets/shiny/_custom_theme_rules.css.sass (custom rules)

The theming process is still work in progress if you have questions just ask ;)

Best
Ratzi

PS:
We will provide a openproject-themes generator soon.

Thanks.

Hi Jason,

have you made ​​progress with your theme?

Best
Ratzi

Thank you Christian, looking forward to the generator. Do you have an approximated timeframe?
Until then, how can I exchange the logo in the top left corner. Strangely if I exchange app/assets/images/logo_openproject_white_big.png with my own, it doesn’t change.

Problem solved: In order for changes to be applied you always need to restart your apache server

Hi Christian,

just wanted to say thanks for the theme skeleton. If you don’t miss an occurrence of “Shiny”/“shiny” in the search and replace (as I did initially and got a weird Ruby exception that Rails.root was nowhere to be found) it works like a charm for OpenProject 3.0.12.

Regards,
Daniel

I cannot add the gem to the Gemfile.plugin

This is what I get :

openproject@sleek-site:~/openproject$ gem “openproject-themes-shiny”, :path => “/tmp/openproject-themes-shiny.tar”
ERROR: While executing gem … (Gem::CommandLineError)
Unknown command openproject-themes-shiny,

Other than that I have a few questions :

1. Does my .css have to be .css.sass .. I would like to not use SASS at all and just write plain css
2. The previous method of creating a theme was simple enough, what necessitates this complexity ?

This is what I get :

openproject@sleek-site:~/openproject$ gem “openproject-themes-shiny”, :path => “/tmp/openproject-themes-shiny.tar”
ERROR: While executing gem … (Gem::CommandLineError)
Unknown command openproject-themes-shiny,

You have forgotten the first step of Christian’s explanation:

- Extract the content of the file to a location of your choice.

Do this in the console:

mkdir ~/local-addons
cd ~/local-addons
tar xf /tmp/openproject-themes-shiny.tar
rm /tmp/openproject-themes-shiny.tar
cd openproject-themes-shiny
THEME_DIR=$(pwd)
echo 'gem "openproject-themes-shiny", :path => "'''$THEME_DIR'''"' >> ~/openproject/Gemfile.local

Now you have physically installed the theme. The next thing is to do is to activate it. This depends on how you have installed OpenProject.
It is something along the lines of:

cd ~/openproject
export RAILS_ENV=production
bundle install
bundle exec rake assets:precompile

Other than that I have a few questions :

1. Does my .css have to be .css.sass .. I would like to not use SASS at all and just write plain css

you can rename the file ~/local-addons/openproject-themes-shiny/app/assets/stylesheets/shiny.css.sass to ~/local-addons/openproject-themes-shiny/app/assets/stylesheets/shiny.css.scss. Then you can write CSS in this file.

Remember: whenever you change something, you have to call

cd ~/openproject
bundle exec rake assets:precompile RAILS_ENV=production

again.

2. The previous method of creating a theme was simple enough, what necessitates this complexity ?

There is not so much of a difference between the two methods. Both use Rail’s asset pipline for the template.

Thank you very much Daniel Jagszent ! I will try this alternative procedure to get my theme up and running..

Hi, I have follow the process and I have now a new theme, but I have tried to change the logo, and copy a new file with the logo and make the precompile step, but it´s not showing, the browser said it can not find the file. Any clue??

Thanks.
Emilio

Hi Emilio,

you define the name of the logo file in the configuration file “<your_theme_folder>/app/assets/stylesheets/shiny/_variables.css.sass” in the variable “$header_home_link_bg”, e.g.:

$header_home_link_bg:         url(image-path('Company_Logo_RGB-50.png')) no-repeat 35px 0

<your_theme_folder> is the directory where you extracted the tar-file.
Note: the variable “$header_home_link_bg” is already defined in the config file so that you just need to search for it in the file.

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

<openproject_source_dir> is your folder with the OpenProject repository.

If you have done all of this already then I don’t know what went wrong in your case.

Best Regards,
Jens

I also am having problems getting the theme to change as well.

I extracted the TAR file to:@ /home/openproject/openproject/openproject-themes-shiny@

I added the gem to end of my plugins file:

gem 'openproject-pdf_export', :git => 'https://github.com/finnlabs/openproject-pdf_export.git', :branch => 'stable'
gem "openproject-costs", git: "https://github.com/finnlabs/openproject-costs.git", :branch => 'stable'
gem 'openproject-global_roles', :git => 'https://github.com/finnlabs/openproject-global_roles.git', :branch => 'stable'
gem "openproject-meeting", :git => "https://github.com/finnlabs/openproject-meeting.git", :branch => "stable" 
gem 'openproject-my_project_page', :git => 'https://github.com/finnlabs/openproject-my_project_page.git', :branch => 'stable'
gem 'openproject-documents', :git => 'https://github.com/opf/openproject-documents.git', :branch => 'stable'
gem 'reporting_engine', :git => 'https://github.com/finnlabs/reporting_engine.git', :branch => 'stable'
gem 'openproject-help_link', :git => 'https://github.com/finnlabs/openproject-help_link.git', :branch => 'stable'
gem "openproject-backlogs", :git => "https://github.com/finnlabs/openproject-backlogs.git", :branch => 'stable'
gem "openproject-themes-shiny", :path => "/home/openproject/openproject/openproject-themes-shiny"

I add a line to the bottom of the stylesheet /home/openproject/openproject/openproject-themes-shiny/app/assets/stylesheets/shiny/_variables.css.sass

/* Override SASS variables from core here. Check available variables in:
 * app/assets/stylesheets/global/_variables.sass
 * Override like this:
 *
 * $header_bg_color:                               #FFFFFF
 * $header_border_bottom_color:                    #EAEAEA
 * $header_border_bottom_width:                    1px
 * $header_item_font_size:                         15px
 * $header_item_font_color:                        #FF00AA
 * $header_item_font_hover_color:                  #222222
 * $header_item_bg_hover_color:                    #EAEAEA
 * $header_drop_down_bg_color:                     #FFFFFF
 * $header_drop_down_item_font_color:              #222222
 * $header_drop_down_item_font_hover_color:        #222222
 */
$header_bg_color:                               #ffbc3e !default

From the directory @ /home/openproject/openproject/openproject-themes-shiny, I run the commands bundle install@ and RAILS_ENV="production" bundle exec rake assets:precompile. Everything seems to run correctly.

openproject@webserver:~/openproject$ RAILS_ENV="production" bundle exec rake assets:precompile
require 'rails/all'... 0.440s
Bundler.require... 1.170s
Application.initialize!... 1.890s
openproject@webserver:~/openproject$

I restart Apache and then reload OpenProject in the browser. Nothing has changed. What am I doing wrong?

The theme “shiny” is an additional one to the default theme.

For changing your personal theme, you need to set the new theme in your settings in “My Account”.

The default theme is changed under Modules -> Administration and then Settings -> Display.

Jens Dirksen wrote:

The default theme is changed under Modules -> Administration and then Settings -> Display.

I do not have Display listed under my Administration module. This is what I have.

• Projects
• Users
• Groups
• Roles and permissions
• Types
• Work package statuses
• Workflow
• Custom fields
• Enumerations
• Settings
• LDAP authentication
• Colors
• Project types
• Export Card Configs
• Plugins
• Information

OpenProject Themes is listed under my plugins.

I’m not sure if this is related to anything, but when I click Settings, I get an Internal 500 error. I haven’t noticed this error in other areas yet.

The tab Display is under the menu item Settings.

Since you are not able to get to Settings (“Internal error 500”), you cannot see Display. You need to solve this problem first.

Are you able to change the theme in your personal settings? That’s another possibility to see your new theme.

I’m still working on trying to get the Settings page to work.

I do not see where in my personal settings to change the theme. The only option I see related to that is under User Interface, and that’s Accessibility mode.

Chris

It’s below User Interface, under Preferences, the last item (as in the attached picture).

That could be part of the problem. The Themes option does not exist under my Preferences. Please see the attached picture.

I solved the Internal error 500 for the Settings page, which allowed me to get into there and change the theme. That is now working.

I managed to track down the error in the OpenProject log, which was related to internationalization. By removing the offending .yml localization files and then recompiling, I was able to eliminate the error.

New theme created, installed, assets precompiled, theme selected from the Theme dropdown. All is functional and my css changes are taking effect. All except the logo image in the top left of the page.

In the OpenProject source code i see the following line:

$header-home-link-bg:                           image-url('logo_openproject_white_big.png') no-repeat 20px 0 !default

In the browser, the CSS is rendered as (notice the cachebusting hash at the end of the file name):

background: url(/assets/logo_openproject_white_big-f24a840553905adb27e033c0c50d97e7.png) no-repeat 20px 0;

So i’m thinking that if i add this line to my theme, it should be working:

$header_home_link_bg: image-url('logo_tamble_white_big.png') no-repeat 20px 0 !default

But in the browser the CSS is rendered as (notice the cachebusting hash is missing):

background: url(/assets/logo_tamble_white_big.png) no-repeat 20px 0;

During compilation however, i see the following lines in the console:

Writing /var/www/op/public/assets/application-011e41d258331e9ef505149f28b83b60.js
Writing /var/www/op/public/assets/tamble/logo_tamble_white_big-7170071a98f03d4e5a649bfcf065ec1a.png
Writing /var/www/op/public/assets/tamble-bc88e2da28038d0477e528e46a083017.css

So the logo with the hash is created and it’s just the compiled CSS that is using the wrong file name. Is there any way to correct the SASS so that the generated CSS contains the proper file name?

Hello Alex,

Looks like you compiled or pre-compiled the CSS in the development environment (the default) once.

Try removing the sass cache:

cd /path/to/your/openproject
rm -rf .sass-cache

Now when you precompile the assests in production environemnt (bundle exec rake assets:precompile RAILS_ENV=production) your CSS file should be re-generated.

Hello Daniel,

Thank you for your reply. I deleted the sass cache and also deleted everything in the public/assets directory. I rerun the precompile command and the assets were regenerated. I also restarted openproject. But the values in the css file is the same as in my previous post. The png file still has a missing cachebusting hash and hence is not found.

Hi Alex,

I had a closer look at your file names and paths and realized the problem.

It has to be

$header_home_link_bg: image-url('tamble/logo_tamble_white_big.png') no-repeat 20px 0 !default

(Include the folder since your logo is in the sub-folder tamble)

Thanks a bunch Daniel. Your suggestion did the trick! :)

Hello,

Is it Gemfile.local or Gemfile.plugin . I noticed in the top both are used.

My issue is that I followed instruction and everything seems perfect but still I did not see the template appear in my list. I can only see Theme OpenProject only. Note: I did not replaced the word Shiny.

Thx

Hi,

it is Gemfile.plugins. Important is the “s” at the end.

For OpenProject 4.x I followed this instructions to install plugins:
https://gist.github.com/crohr/10111721

Best Regards,
Jens

Aha. Ok. Plugins now are. OK.
The Shiny template is working ok after adding it to Gemfile.local.

@Christian Ratz

Hi,

Is there a procedure for creating a theme in openproject-ce?

I have installed openproject-ce and tried to use the shiny theme in the .tar you posted previously but the error I got in Ubuntu was:

The program ‘gem’ can be found in the following packages:

• ruby
• rubygems
  Try: sudo apt-get install

So I installed ruby:

sudo gem “openproject-themes-shiny”, :path => “/home/ubuntu/openproject-themes/openproject-themes-shiny/openproject-themes-shiny.gemspec”
ERROR: While executing gem … (RuntimeError)
Unknown command openproject-themes-shiny,

Any help would be greatly appreciated.

Thanks,

Steve

Hi Steven,

unfortunately I can’t help you on this topic since I have no clue how to install a plugin in a Packaged Installation but I think you can find several threads in the forum related to this topic.

I found at least one and the output is: “not possible” ;(
https://community.openproject.org/topics/4816?board_id=13&r=5082

Best
Ratzi

Have you really executed this command:
sudo gem "openproject-themes-shiny", :path => "/home/ubuntu/openproject-themes/openproject-themes-shiny/openproject-themes-shiny.gemspec"
That is useless.

You need to add the following line in the file Gemfile.plugins
gem "openproject-themes-shiny", :path => "/home/ubuntu/openproject-themes/openproject-themes-shiny/openproject-themes-shiny.gemspec"

I don’t understand your error message regarding ruby and rubygems but probably you need to install both on your Ubuntu machine. I suggest to follow the instructions of the manual installation of OpenProject to install ruby and rubygems.

Regards,
Jens

@jens

You are right that you have to add this line to Gemfile.plugins but Steven uses a packager based installation and this type of installation behaves different.
Ruby and Rubygems are only available within the package context similar to `OpenProject command line tool` described here

Best
Ratzi

ok, so it’s better to use the versions of Ruby and Rubygems provided by the Linux distribution, here Ubuntu.

But anyway, it is possible to install plugins and themes in a packager based installation of OpenProject because I have done it. ;-)

That’s how I did it:

The procedure to install plugins can also be used to install additional themes.

Copy the archive OP-mythemes-new.tar.gz with the themes to the server with the OpenProject installation. The archive contains the folder mythemes and Aricent logos that are copied into the directory app/assets/images/.

Extract the archive in the directory with the OpenProject installation:

root# cd /opt/openproject-ce
root# tar xvzf /<path/to>/OP-mythemes-new.tar.gz

Add the information about the themes into the plugins file Gemfile.plugins:

#
# Additional Themes
#
# AricentLight Theme
 gem 'openproject-themes-aricentlight', :path => 'mythemes/openproject-themes-aricentlight'
# AricentDark Theme
 gem 'openproject-themes-aricentdark', :path => 'mythemes/openproject-themes-aricentdark'
# AricentNew Theme
 gem 'openproject-themes-aricentnew', :path => 'mythemes/openproject-themes-aricentnew'

Now you need to re-compile the OpenProject sources:

root# openproject-ce run bundle install --no-deployment
root# openproject-ce run rake db:migrate
root# openproject-ce run rake assets:precompile
root# service openproject-ce restart

The themes should now appear in the OpenProject UI under My Account.

Note that you will probably need to redo a openproject-ce run bundle install –no-deployment on each upgrade of the OpenProject package.

The folder with your themes will be different but the general procedure is similar to you.

Regards,
Jens

Oh nice,

but than you should create a Gemfile.local this should not be overridden when you update the package.
May be you should suggest adding this to the packager install docs.

Best
Ratzi

Christian and Jens,

Thank you for your help. I will try this today.

Thanks again!

Steve

@Jens

I followed your steps above. I am not sure if I should still be using the .tar archive that Christian originally posted or if I am supposed to use an archive that you have mentioned: OP-mythemes-new.tar.gz

When I ran the

sudo openproject-ce run bundle install —no-deployment

command it gave me an error about need to install git. Which I did. I then re-ran the command and it fetched from github/finnlabs and then errored out with this:

Fetching source index from https://rubygems.org/
Resolving dependencies…
Could not find gem ‘openproject-themes-shiny (>= 0) ruby’ in source at
openproject-themes-shiny.
Source does not contain any versions of ‘openproject-themes-shiny (>= 0) ruby’

This stopped me from running any of the other commands required to recompile the installation i.e. rake db:miratge etc.

It also killed the installation.

Any ideas?

Steve

The file “OP-mythemes-new.tar.gz” contains my private themes. You should use a tar file with your themes.

I just did a copy&paste from my Wiki where I saved the procedure to install plugins/themes to OpenProject. Hence, file names or directories might be different for you.

GIT:
Yes, you need to install Git because OpenProject uses Git to download additional software.

As suggested by Ratzi, we should use Gemfile.local instead of Gemfile.plugins because Gemfile.plugins will be overwritten on every update of openproject-ce.

You need to add the following line to Gemfile.local :

group :opf_plugins do
#
# Additional Themes
#
 gem "openproject-themes-shiny", :path => 'openproject-themes-shiny'
end

That worked for me when the shiny theme was installed in /opt/openproject-ce/openproject-themes-shiny/.

Regards,
Jens

@Jens

I must be doing something wrong somewhere. I made the changes to Gemfile.local and removed the changes I had made to Gemfile.plugins.

I reran

sudo openproject-ce run bundle install —no-deploymtnt
Fetching source index from https://rubygems.org/
Resolving dependencies….
Could not find gem ‘openproject-themes-shiny (>= 0) ruby’ in source at
openproject-themes-shiny.
Source does not contain any versions of ‘openproject-themes-shiny (>= 0) ruby’

When you say ‘installed’, do you simply mean that you extracted the archive to that directory, because that is all I have done

Thanks, and sorry if this is causing headaches. I appreciate your help!

Does it matter that the openproject-themes-shiny.gemspec is empty? Is the archive that Christian posted supposed to work with openproject-ce or should I be using some other archive?

No, I extracted the archive in the installation directory of OpenProject, i.e. /opt/openproject-ce/. This created the folder openproject-themes-shiny.

Here is the content of /opt/openproject-ce/openproject-themes-shiny:

drwxr-xr-x 3 openproject openproject 4096 Nov  5 09:08 app
drwxr-xr-x 3 openproject openproject 4096 Nov  5 09:08 lib
-rw-r--r-- 1 openproject openproject  643 Mar 17  2014 openproject-themes-shiny.gemspec
-rw-r--r-- 1 openproject openproject   91 Mar 17  2014 README.md

It seems that you have an additional subfolder openproject-themes-shiny.

I used the archive provided by Christian and openproject-themes-shiny.gemspec is not empty. maybe you should download it again.

Is there any news about the theme generator which was announced 2 years ago? :)

may be right now openproject will not supported theme generator, because it already have Enterprise Edition menu on openproject 7.4.5 which is you can customize your openproject appearance in “design” menu.

Running the blow command now gives me this.:
sudo openproject run bundle install --no-deployment

You are trying to install in deployment mode after changing
your Gemfile. Run `bundle install` elsewhere and add the
updated Gemfile.lock to version control.

If this is a development machine, remove the /opt/openproject/Gemfile freeze
by running `bundle config unset deployment`.

The list of sources changed
The dependencies in your gemfile changed
The gemspecs for path gems changed

You have added to the Gemfile:
* source: source at `openproject-themes-shiny`
* openproject-themes-shiny

Can anyone let us know the new way to changing the theme ? maybe someone from the maintainers ? 

i am using OpenProject 10.6.5

Thanks a lot.

Hi Mohammed,
I found some links that could be helpful:
https://www.openproject.org/openproject-custom-theme-and-logo/
https://docs.openproject.org/system-admin-guide/design/
Kind regards
Matthias

Thanks Matthias, The links are all premium features which is not what i was looking for.
It should be possible to apply our own theme for the community edition. Premium feature makes it easier for non-developers.

I am not sure if any of the core maintainers will check this but regardless i tried all the steps above and i am getting some ruby related errors.

Matthias Laux wrote:

Hi Mohammed,
I found some links that could be helpful:
https://www.openproject.org/openproject-custom-theme-and-logo/
https://docs.openproject.org/system-admin-guide/design/
Kind regards
Matthias

Hi Mohammed,

without knowledge of Ruby and Ruby on Rails you will not get very far.

The new way to change the theme works with CSS variables  and inline overwriting them. You cannot use this system as is with the community version. But you could write a plugin that uses one of many another ways to inline overwrite the CSS variables.