Top Menu

Jump to content
Home
    • Projects
    • Work packages
    • 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
    • User guides
    • Videos
    • Shortcuts
    • Community forum
    • Professional 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?
      Create a new account

      or sign in with your existing account

      Google

Side Menu

  • Overview
  • Activity
  • Roadmap
  • Work packages
  • Calendars
  • Team planners
  • Boards
  • Forums
  • Wiki
    • Table of contents
      • Expanded. Click to collapseCollapsed. Click to showDeveloper
        • Hierarchy leafAccessibility Checklist
        • Hierarchy leafCode Review Guidelines
        • Expanded. Click to collapseCollapsed. Click to showContribution
          • Hierarchy leafGit Workflow
          • Hierarchy leafTranslations
        • Expanded. Click to collapseCollapsed. Click to showDeveloping Plugins
          • Hierarchy leafDeveloping an OmniAuth Authentication Plugin
        • Hierarchy leafRelease Process
        • Hierarchy leafReport a bug
        • Hierarchy leafSecurity
        • Hierarchy leafSetting up an OpenLDAP server for testing
        • Hierarchy leafTheme Features
      • Hierarchy leafDownload
      • Expanded. Click to collapseCollapsed. Click to showFeature tour
        • Hierarchy leafRelease Notes OpenProject 30
        • Expanded. Click to collapseCollapsed. Click to showRelease Notes OpenProject 30 - Overview
          • Hierarchy leafGlossary
          • Hierarchy leafRelease Notes - Accessibility
          • Hierarchy leafRelease Notes - Accessibility changes
          • Hierarchy leafRelease Notes - Add work package queries as menu items to sidebar
          • Hierarchy leafRelease Notes - Copy projects based on Templates
          • Hierarchy leafRelease Notes - Design changes
          • Hierarchy leafRelease Notes - Fixed Bugs
          • Hierarchy leafRelease Notes - Keyboard Shortcuts
          • Hierarchy leafRelease Notes - Project settings
          • Hierarchy leafRelease Notes - Ruby&Rails Update
          • Hierarchy leafRelease Notes - Security
          • Hierarchy leafRelease Notes - Timelines
          • Hierarchy leafRelease Notes - Work packages
      • Hierarchy leafHowto create animated gifs
      • Hierarchy leafMigration Squashing
      • Hierarchy leafMod security
      • Hierarchy leafNew work package page
      • Hierarchy leafOP3 to OP4 Debian upgrade
      • Hierarchy leafOP4 Ubuntu1404 Stable with MySQL in production
      • Hierarchy leafOpenProject 40 Development Setup
      • Expanded. Click to collapseCollapsed. Click to showOpenProject Foundation
        • Hierarchy leafBoards
        • Hierarchy leafMembers
        • Hierarchy leafOPF-Meetings
        • Hierarchy leafStatutes
      • Expanded. Click to collapseCollapsed. Click to showRelease Notes
        • Hierarchy leafOpenProject released on Bitnami
      • Expanded. Click to collapseCollapsed. Click to showRelease Notes OpenProject 40 - Overview
        • Hierarchy leafRelease Notes OpenProject 40 - Accessibility improvements
        • Hierarchy leafRelease Notes OpenProject 40 - Column header functions in work package table
        • Hierarchy leafRelease Notes OpenProject 40 - Improved Design
        • Hierarchy leafRelease Notes OpenProject 40 - Integrated query title on work package page
        • Hierarchy leafRelease Notes OpenProject 40 - Integrated toolbar on work package page
        • Hierarchy leafRelease Notes OpenProject 40 - OmniAuth integration for OpenProject
        • Hierarchy leafRelease Notes OpenProject 40 - Work package details pane
      • Expanded. Click to collapseCollapsed. Click to showSecurity and privacy
        • Hierarchy leafFAQ
      • Expanded. Click to collapseCollapsed. Click to showSupport
        • Expanded. Click to collapseCollapsed. Click to showDownload and Installation
          • Hierarchy leafInstallation MacOS
          • Expanded. Click to collapseCollapsed. Click to showInstallation OpenProject 3 0
            • Hierarchy leafDebian Stable with MySQL in production
            • Hierarchy leafInstallation Ubuntu
            • Hierarchy leafInstallation Windows
            • Hierarchy leafInstallation on Centos 65 x64 with Apache and PostgreSQL 93
          • Expanded. Click to collapseCollapsed. Click to showInstallation OpenProject 40
            • Hierarchy leafOP4 Debian Stable with MySQL in production
          • Expanded. Click to collapseCollapsed. Click to showMigration paths
            • Hierarchy leafFrom Chilliproject to OpenProject
            • Hierarchy leafMigration 15 to 30
            • Hierarchy leafMigration 24 to 30
            • Hierarchy leafMigration Redmine 2x › OpenProject 30
            • Hierarchy leafOpenProject 3 Migration
          • Hierarchy leafOpenProject 40
        • Expanded. Click to collapseCollapsed. Click to showNews
          • Hierarchy leafNew OpenProject Translations Plugin
          • Hierarchy leafNew Plugin on OpenProjectorg Local Avatars
          • Hierarchy leafNew design for OpenProject
          • Hierarchy leafNews Accessibility workshop for OpenProject
          • Hierarchy leafNews Glossary for OpenProject
          • Hierarchy leafNews Heartbleed fixed
          • Hierarchy leafNews Icon Fonts
          • Hierarchy leafNews OpenProject 30 Release
          • Hierarchy leafNews Release GitHub Integration Plugin
          • Hierarchy leafNews Success Story Deutsche Telekom
          • Hierarchy leafNews Timelines
          • Hierarchy leafOpenProject 3013 released
          • Hierarchy leafOpenProject 3017 released
          • Hierarchy leafOpenProject 40 released
          • Hierarchy leafOpenProject 40 will be coming soon
          • Hierarchy leafOpenProject 405 released
          • Hierarchy leafOpenProject and pkgrio
          • Hierarchy leafOpenProject news moved to a new blog
          • Hierarchy leafOpenProjectBitnami
          • Hierarchy leafPackager version with plugins released ("Community edition")
          • Hierarchy leafRegistration OpenProject-Foundation
          • Hierarchy leafRelease OpenProject AuthPlugins
          • Hierarchy leafUpdates on OpenProject
          • Hierarchy leafWe need your feedback for the the new fullscreen view for work packages
        • Hierarchy leafOpenProject Plug-Ins
      • Hierarchy leafWiki
You are here:
  • Forums
  • Development

Content

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

Added by Marek Pietruszko about 7 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 about 7 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 about 6 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 “/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 about 6 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 about 6 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 about 6 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 about 6 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 about 6 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 about 6 years ago

Hi

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

Thanks

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