[OrangeHRM v3.0.1] How to change logo images

There are two logo images:

• Path to logo image used on login screen:
  /symfony/web/webres_521db8499614c0.51100681/themes/default/images/login/logo.png
  
  Width: 339px Height: 66px
  
• Path to logo image used after logging in:
  /symfony/web/webres_521db8499614c0.51100681/themes/default/images/logo.png
  
  Width: 283px Height: 56px

I recommend renaming those images and uploading your own logo and renaming the file to logo.png

Note: when the mouse pointer is hovered over the logo "OrangeHRM" is displayed as the HTML ALT text.  This can be changed by editing freshorange.php, path:

\symfony\apps\orangehrm\templates\freshorange.php

 Search for alt="OrangeHRM" text and replace OrangeHRM with whatever you want.

You can also edit the hard-coded image dimensions for the logo.png image in layout.php.  Search for logo.png text and then edit the width and height.  Look from about line 51.

Notes about the login page

• On the login page there is no alt text or hardcoded image dimensions for the logo image
• Beware if your logo is not height 66px, it will mess up the CSS positioning of the various elements on the form in the login page
• You can edit loginSuccess.php to hard-code your own image dimensions, path \symfony\apps\orangehrm\modules\auth\templates\loginSuccess.php
• My next blog post will focus on modifying and re-theming the login page

[OrangeHRM v3.0.1] How to edit or remove the footer copyright text and social icons on the login page

1. To edit or remove the footer text on the login and post-login pages 

Edit the _copyright.php file, path:

\symfony\apps\orangehrm\templates\_copyright.php

The file contents are the following:

Line
1     <?php
2     $version = '3.1.1';
3     $prodName = 'OrangeHRM';
4     $copyrightYear = date('Y');
5    
6     ?>
7     <?php echo $prodName . ' ' . $version;?><br/>
8     &copy; 2005 - <?php echo $copyrightYear;?> <a href="http://www.orangehrm.com" target="_blank">OrangeHRM, Inc</a>. All rights reserved.
9    

 You can edit this as you want.  Here is my suggestion if you want to remove everything, delete lines 7, 8 and 9:

Line
1     <?php
2     $version = '3.1.1';
3     $prodName = 'OrangeHRM';
4     $copyrightYear = date('Y');
5    
6     ?>

This will now look like:

This is quite a nice, clean result.

However, if you want to have custom text in there try this:

Line
1     <?php
2     $version = '3.1.1';
3     $prodName = 'OrangeHRM';
4     $copyrightYear = date('Y');
5    
6     ?>
7     <br/>
8     &copy; <?php echo $copyrightYear;?> Company Name. All rights reserved.
9    

 This will look like:

2. Remove the social sharing links from the footer

Let's be honest that's quite unprofessional, would you really deploy OrangeHRM in to your workplace leaving those links there?  Not me.

We can quite easily apply a CSS mod to remove them.

Edit main.css, path:

\symfony\web\webres_521db8499614c0.51100681\themes\default\css\main.css

/symfony/web/webres_521db8499614c0.51100681/themes/default/css/main.css - See more at: http://unofficialmods.blogspot.co.uk/#sthash.4BDZbVgh.dpuf

Depending on if you have modified main.css before, go to about line 351 or 353.  In my case it is line 353, alternatively search for the text #social-icons

This section should look like:

Line
353     #social-icons {
354        margin-top: 5px;
355     }

 After line 353 add display:none; so it should look like this:

Line
353     #social-icons {
354        display:none;
355        margin-top: 5px;
356     }

 Save the changes and refresh the browser on the login page, the social icons will not display now.

[OrangeHRM v3.0.1] How to remove "Help & Training" and "Join OrangeHRM Community" branding in the header by only editing CSS

There is a neat, quick and easy way to remove the OrangeHRM branding (shown in the following image) with CSS modifications.  As always, make backups of files before editing them.  I've broken this mod in to 3 steps...

Notes:

• When refreshing browsers after CSS changes try a hard refresh using CTRL F5 or hit refresh a few times repeatedly so that the browser fetches the latest CSS files.
• As you edit the CSS file some of the line numbers can change, if that happens search text for the code to ensure you edit the appropriate code.

All the modifications are done by editing main.css file, path:

/symfony/web/webres_521db8499614c0.51100681/themes/default/css/main.css

1. Hide the green box:

Find the following, from line 24:

Line
24     .subscribe {
25         padding:10px 15px 12px 15px;

Between these two lines, so on line 25 add display:none; the code should now look like this:

Line
24     .subscribe {
25         display:none;
26         padding:10px 15px 12px 15px;

Save changes to the file.  When refreshing the current result will look like this:

2. Remove the "Help & Training" link

Find the following, from line 82:

Line
82     #help {
83         color:#f28c38;

Between these two lines, so on line 83 add display:none; the code should now look like this:

Line
82     #help {
83         display:none;
84         color:#f28c38;

Save changes to the file.  When refreshing the current result will look like this:

  

3. Move the welcome/user link top and fix drop down link placement

For my purpose I now want the welcome drop down link to go to the top as it looks odd if left in this position.

Find the #welcome section starting from line 48:

Line
48     #welcome {
49         color:#5d5d5d;
50         background: url(../images/welcome-down.png) no-repeat center right;
51         padding:2px 32px 1px 1px;
52         text-decoration:none;
53         position:absolute;
54         top:55px;
55         right:35px;
56         z-index:999;
57     }

On line 54 change top:55px; to:

Line
54         top:5px;

 Save changes to the file.  When refreshing the current result will look like this:

However, if the link is clicked the drop-down is misplaced:
 

To fix this go to the #welcome-menu section from line 61:

Line
61    #welcome-menu {
62        background:#454648;
63        z-index:999;
64        position:absolute;
65        top:75px;
66        right:30px;
67        -webkit-border-radius: 3px;
68        -moz-border-radius: 3px;
69        border-radius: 3px;
70        padding:5px 10px;
71        display:none;
72        min-width:122px;
73    }

 On line 65 change top:75px; to:

Line
65        top:25px;

Save changes to the file.  When refreshing the final result will look like this:
 

 A full view of the top header should now look like this:

The OrangeHRM branding and links have now been removed.