Top Menu

Jump to content
Home
    Modules
      • Projects
      • Activity
      • Work packages
      • Gantt charts
      • Calendars
      • Team planners
      • Boards
      • News
    • Getting started
    • Introduction video
      Welcome to OpenProject Community
      Get a quick overview of project management and team collaboration with OpenProject. You can restart this video from the help menu.

    • Help and support
    • Upgrade to Enterprise edition
    • User guides
    • Videos
    • Shortcuts
    • Community forum
    • Enterprise support

    • Additional resources
    • Data privacy and security policy
    • Digital accessibility (DE)
    • OpenProject website
    • Security alerts / Newsletter
    • OpenProject blog
    • Release notes
    • Report a bug
    • Development roadmap
    • Add and edit translations
    • API documentation
  • Sign in
      Forgot your password?

      or sign in with your existing account

      Google

Side Menu

  • Overview
  • Activity
    Activity
  • Roadmap
  • Work packages
    Work packages
  • Gantt charts
    Gantt charts
  • Calendars
    Calendars
  • Team planners
    Team planners
  • Boards
    Boards
  • News
  • Forums

Content

Development
  1. OpenProject
  2. Forums
  3. Development
  4. Adding a theme/child-theme, may someone guide me please?

Adding a theme/child-theme, may someone guide me please?

Added by Marek Pietruszko over 9 years ago

Hello there,

first of all, I’m thankful for the work that u guys are doing with the openproject itself, however, I do have a question:

I’m having problem with adding a new theme, or a child-theme CSS file where I can make some changes that are not going to be overwritten after an update. I’m using openproject package installation with the latest version, and I somehow can not make the openproject-themes-shiny and a gem added into the Gemfile.local/plugins work. Probably that guide is outdated and a lot of things changed since that time.

If anyone could provide me some help I would be thankful. I wanted to make some color changes, hide the homescreen—links and few other updates.

Thanks in advance!

With my kindest regards,
Mark


Replies (8)

RE: Adding a theme/child-theme, may someone guide me please? - Added by Mike Lewis over 9 years ago

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.

RE: Adding a theme/child-theme, may someone guide me please? - Added by Mika Lahti over 8 years ago

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 “<openproject_source_dir>/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.

RE: Adding a theme/child-theme, may someone guide me please? - Added by Hamed Jafari over 8 years ago

Hi

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

Thanks

RE: Adding a theme/child-theme, may someone guide me please? - Added by Mika Lahti over 8 years ago

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?

RE: Adding a theme/child-theme, may someone guide me please? - Added by Hamed Jafari over 8 years ago

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

RE: Adding a theme/child-theme, may someone guide me please? - Added by Hamed Jafari over 8 years ago

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

RE: Adding a theme/child-theme, may someone guide me please? - Added by Mika Lahti over 8 years ago

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

RE: Adding a theme/child-theme, may someone guide me please? - Added by Hamed Jafari over 8 years ago

Hi

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

Thanks

  • (1 - 8/8)
Loading...