• SCHEDULE A DEMO
  • Contact Sales: (408) 907 4166
  • +91 97405 40246
  • 0
x
Thank you for Downloading!

Schedule Enterprise Self-hosted Demo

Schedule Now
X

How to Customize
Orangescrum in 5 minutes

As an Orangescrum Account owner, you can personalize/customize
Orangescrum look and feel to match your company environment.

1. Upload a Profile Photo

With an avatar, it is a great way to communicate with your teams/colleagues in Orangescrum. A profile photo helps you to identify who has commented or assigned or responsible for a task in a quick view.

To upload your photo, simply navigate to your Settings and click on My Profile under Personal Settings.

Profile Setting

Select your best picture and upload to inspire others to upload their avatars as well!

Profile Setting
Note: Profile photo size must be 300x300 pixels (height x width).

2. Select Time zone

In your Profile Setting page, make sure you have set the right time zone for your account. Otherwise, it may affect your task due dates, email notification and reports’s time.

Profile Setting

3. How to upload your logo

In order to personalize your account with your company color theme and logo, you can replace the Orangescrum logo with your company's.

Orangescrum logo appears on:

  1. Sign up page
  2. Login page
  3. Top left corner universally within the tool

1. Sign up

When you install Orangescrum and hit the URL to sign up, you'll see the below page first.

Wel come Orangescrum Community

In the sign up page, you can change the following items i.e.

  1. Logo
  2. Welcome message
  3. and Google groups link

1. Logo in Sign up page

To change the logo on the sign up page, you must have source code access on your server. The height of the logo must be 366pixels and width of 111 pixels.

  • Go to your Orangescrum app folder (source code)
  • Click on webroot > img folder
  • Upload your logo to be used for the sign up page in images folder
  • Navigate to app > View > Users folder and click on login.ctp
  • On the line number 45, edit the image name and update the image name (logo) which you have uploaded in the images folder and save the file
Change logo
Quick Tip: If you don’t want to edit the path in login.ctp, then upload the logo with logo_outer.png and replace with the existing image in app > webroot > img > images folder.
  • Once it is successfully uploaded, your logo will appear in the sign up page

2. Welcome message

To change the welcome message,

  • Go to app > View > Users folder and click on login.ctp
  • On the line number 49, edit the h4 tag content and update it with your personalized welcome message and save the file
welcome message

3. Google group

To remove the Google group icon, message and links,

  • Go to app > View > Users folder and click on login.ctp
  • On the line number 225, comment the following lines and save the file
Google group
Quick Tip: Before the <div> put this <?php /* and after the </div> put this */ ?> to comment the line.

Once you have made the changes as above successfully,the sign up page will look like this:

Update Signup page

After Sign up, on the welcome page, you can replace your logo with Orangescrum logo as well.

Change onboard logo

To change,

  • Go to your Orangescrum app folder (source code)
  • Click on webroot > img > images folder
  • Upload your logo to be used for the sign up page in images folder
  • Go to app > View > Layouts folder and click on default_inner.ctp
  • In the Default Inner ctp file, change the image name on line number 41 and save the file
Change onboard logo code

After the update, you can view the welcome page with the new logo.

Change onboard logo look

2. Login Page

As you have already replaced the image in the sign up page, you don’t need to update for the login page. It will automatically update the image logo for the login page.

Change onboard logo look

3. Top left corner

The height of the logo in top left corner of your Orangescrum account (once logged in) must be 26 pixels and width of 27pixels.

To change the logo at top left corner,

  • Go to your Orangescrum app folder (source code)
  • Click on webroot > img folder
  • Upload your logo to be used for the sign up page in img folder
  • Go to app\webroot\css folder and click on bootstrap.min_1.css
  • In the bootstrap file, change the image name on line number 286 and save the file
Top nav left logo

Once you made the change the icon will be changed, and will be shown here.

Top nav left logo change

4. Change Favicon

The favicon of a site appears on left of your browser tabs. The height of the must be 16 pixels and width of 16pixels and it should be in ico format. To change the favicon,

  • Go to your Orangescrum app folder (source code)
  • Click on webroot
  • Upload you're your favicon with name "favicon" with ico format
Favicon logo

5. Show your site title

The site title appears next to your favicon on your browser tab. To change the site title;

  • Go to Go to your Orangescrum app folder (source code)
  • Click on app > View > Layouts
  • On the Layout, open the default_outer.ctp file, and update the site title name in <title> </title> tag.
  • On the Layout, open the default_inner.ctp file, and update the site title name in <title> </title> tag.
title text change

6. Change site color/theme

You can change the color theme of your Orangescrum application.

change nav

To change the colors, you need to change the color code in the following files.

  • To change the color of Top bar:

    • Navigate to app > webroot > css and open bootstrap.min_1.css
    • On line number 286, update the background-color and border-color
    change nav top bar
  • To change the color of Quick Links:

    • Navigate to app > webroot > css and open style_inner.css
    • On line number 2084, update the background and border-bottom color
    • On the line number 2103, update the background color for hover color
    • On 2101, change the box shadow and border color
    • On 2908, change the hover color of +New button
    change nav top Quick link
  • To change the color of Settings:

    • Navigate to app > webroot > css and open style_inner.css
    • On line number 2084, change the background color
    • On the line number 942, change the background color for hover
    • On the line number 937, change the background color as well
  • To change the color of Left Menu Panel:

    • Navigate to app > webroot > css and open style_inner.css
    • On line number 872, change the background color
    change Left Panel color

Once you made these changes, the look and feel of Orangescrum will change.

Final customize change
Note: You can hide the Google group section in the application footer by commenting the line from 14 to 18 in footer_inner.ctp inside app > View > Elements. Then update height to 55px on the line number 56 in
app > webroot > css > style_inner.css.

Are you looking for any further customization?