Is there a guide or post that explains how to create and deploy Themes?

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.

Thanks Daniel for the reply.
I have small knowledge about ruby but i can also learn it so there is not issue.

I have some questions:

1. Will i be able to modify the theme with any method available for the CE ?
2. If yes, can you please guide me on the way ? I am a fast learner just point me and i will pick things up.
3. The ways and methods said in this thread seems very old, are they valid or they are no longer valid ? (so no one will wonder when searching again)

Thanks a lot.

Daniel Jagszent wrote:

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.