Feng Office Integration and Customization

I recently worked on a website for a client where they would like a place for their clients to view files and a calendar for appointments. Instead of building my own solution I researched open source packages. On Softaculous I found an installation for the project collaboration application Feng Office. The following is the overview from Softaculous:

Feng Office is a Collaboration Platform that enables you to manage your projects and business services, collaborate with your team and your customers, organize and share documents and files.

Original Login Screen

Feng Office’s code is written in PHP, has a proven track record of stability and security. Feng Office is being actively developed.

I wanted to integrate the login screen with the site so it appeared seamless and once the client logged out they would have the site’s menu. Below are the the steps I took:

1. I pulled the menu attributes from the main CSS and created a new one and placed in the following directory:
/clients/public/assets/themes/default/stylesheets

2. Then to add the logo and menu I edited the dialog.php:

/clients/application/layouts

You referance the CSS file by adding this line:

<?php echo stylesheet_tag(‘style.css’) ?>

Where style.css is the name that was dropped in step one.

3. Then add your HTML to dialog.php. Familiarity with PHP is helpful, but not needed.
Below is where I placed my HTML:

<body class=”loginBody” style=”text-align:center;”>

CUSTOM HTML

<div class=”loginDiv”>

4. I wanted to replace the background to match the rest of the site. I replaced the background by replacing the following file:

*Note: You can just change the link in the login.css file instead of replacing the file. My fear is that it was referenced else where.

/clients/public/assets/themes/default/images/layout/login/background.png

The issue I found was it did not repeat on the y axis so I updated the login.css

/clients/public/assets/themes/default/stylesheets/login.css

.loginBody {
background: #72BF44 url(../images/layout/login/background.png) repeat-x scroll 150px 0;
}

to

.loginBody {
background: #72BF44 url(../images/layout/login/background.png) scroll 150px 0;
}

New Login Screen

Hope this was helpful to someone. If you have questions please email me as I have comments closed.
Email: mgerkhardt@thinkux.com

Happy Coding

Links:
Link for Custom Feng Login Page
Feng Office
Softaculous