Thanks for using Woffice! If you have any issue or question, feel free to open a ticket at https://woffice.io/support/

How To Implement the Glass Skin

Glass Skin is a relatively new skin available from WOffice version 4.1.2. In order to have the skin implemented, you will need to carry out the following steps:



  1. Navigate to the Appearance > Theme Settings > General Options and set the “Theme Skin” to “Glass”



2. Navigate to the Theme Settings > Login section

Here, ensure that you set the background color to #1d0904 and logo width 60.



These stylings will be applicable while using a custom login page



3. Go to the Theme Settings > Home Dashboard

Here, you will need to set the option “UPPERCASE HEADLINES” to “Nope”.





4. Navigate to the Theme Settings > Menu section

Within this section, apply the following color codes in the respective sections:

BACKGROUND COLOR: #432d2a

BACKGROUND COLOR: #ffdc82

MENU COLOR #2: #fff4e8

MENU ICON COLOR: #fff4e8

MENU HOVER COLOR: #fff4e8


In addition, set the “MENU WIDTH” to”180” and “UPPERCASE ELEMENTS” to “Nope”.




5. Proceed to the Theme Settings > Header Bar section


Here, ensure that you set the “main logo”. In addition, set the “logo width” value to “180”and “navigation bar height” to “70”.

Once this is done set the colors on the respective sections as outlined below:

TEXT COLOR:                       #000000

BACKGROUND COLOR: #ffffff

ICONS COLOR: #746464

LINK HOVER COLOR: #f4f4f4






6. Navigate to the Theme Settings > Title Box section


Here, you will need to upload a title side image and leave the option “HEADLINE TEXT IN UPPERCASE ?” unchecked.


With the above done, set the colors on the respective sections as outlined below:

HEADLINE COLOR: #4a3636

LAYER COLOR: #1d0904

BORDER COLOR: #1d0904





7. Go to the Theme Settings > Footer & ExtraFooter section

Within this section, set the color values as follows:

TEXT COLOR:                                   #000000

LINK COLOR:                                   #1d0904

WIDGETS BACKGROUND COLOR: #ffdc82

COPYRIGHT BACKGROUND COLOR: #ffa47e

COLOR OF THE BORDER BETWEEN 

THE WIDGETS AND THE COPYRIGHT: #1d0904






Within the Extra Footer segment, set the border color value as outlined below:

BORDER COLOR: #1d0904




8. Navigate to the Theme Settings > Styling section

Within the font options segment set the font values as outlined below:

MAIN FONT FAMILY: Josefin Sans

HEADLINES FONT FAMILY: Josefin Sans

In addition, set the “UPPERCASE HEADLINES ?” value to “Nope”.



Within the color options segment, assign the color values as outlined below:

ALTERNATIVE BACKGROUND COLOR #1:           #ffdc82

ALTERNATIVE BACKGROUND COLOR #2:           #ffa680

ALTERNATIVE COLOR #1: #ffdc82

ALTERNATIVE COLOR #2: #ffa680

MAIN COLOR: #1d0904

MAIN TEXT COLOR: #000000

MAIN PARAGRAPH COLOR: #1d0904

HEADLINES COLOR: #1d0904

BODY BACKGROUND COLOR: #faf1ed

LIGHT COLOR #1: #f0f0f6

LIGHT COLOR #2: #fff4e8

LIGHT COLOR #3: #1d0904

NOTIFICATIONS BADGE COLOR: #ea5704

NOTIFICATIONS COLOR (ORANGE): #ea5704

NOTIFICATIONS COLOR (GREEN):             #1d0904




9. Save your changes

10. Navigate to the Unyson > WOffice Maintenance extension


In case you wish to enable maintenance mode, you can activate the extension.


You may then click on the “settings” link and set the color values and opacity as follows within the “style” tab:

Text color :: #ffffff

Background color :: #1d0904

Layer Opacity::  0.5



If you have any issue or question, feel free to open a ticket at https://woffice.io/support/