Global stylesheet is the shared stylesheet which is applied to your entire site or a set of pages, depending on your configuration. When you want to make changes on your site, you only need to create a new global stylesheet, or edit the existing global stylesheet.

Global stylesheets of eXo Platform are put into the CSS folder to manage the stylesheet of your desired site. This section aims at showing you how to create and apply your own global stylesheet by *Sites Explorer* and by configuration.

h1. Create and apply the global stylesheet by Sites Explorer {anchor:id=DEV.CreateYourOwnPortal.CreateAndApplyGlobalStylesheetByContentExplorer}

*1.* Click !images/gear_icon.png|width="5mm" fo:scalefit="1" html:scalefit="0"! *--> Content --> Sites Explorer --> Sites Management drive*.

*2.* Select one site node in the *Sites Management* pane, for example *acme*, then select the CSS folder.

!images/CreateNewGlobalStylesheet.png|align="center"  width="150mm" fo:scalefit="1" html:scalefit="0"!

*3.* Click *New Content* to open the form to create the new global stylesheet.

!images/CreateGlobalStylesheetForm.png|align="center"  width="150mm" fo:scalefit="1" html:scalefit="0"!

*4.* Enter the name of global stylesheet into the *Name* field, for example *GlobalStylesheet\_Orange*.

*5.* Set the value as "True" to activate your global stylesheet for your site in the *Active* field. By default, "True" will be set when you create a new global stylesheet. If you select "False", your newly created global style will be disabled.

*6.* Input one positive integer into the *Priority* field.

{note}
The successful application of your newly created global stylesheet depends on values in both *Active* and *Priority* fields. If "True" is set in many global stylesheets, the system will automatically render all global stylesheets in the CSS folder in the descending order and get the stylesheet with the highest priority. Thus, after selecting "True", you need to pay attention to the priority level so that the selected priority of your stylesheet is higher than those of other global stylesheets in the CSS folder. 

The default global stylesheet will be automatically created in the CSS folder when you create a new site. However, this global stylesheet can be overwritten by either setting "False" for its *Active* field or setting the higher priority for other global stylesheet than that of the default global stylesheet.
{note}

*7.* Define your styles in the *CSS data* field. Here, you can directly enter your CSS rules, or copy and paste them from your favorite text editor.

*8.* Click the *Save* or *Save & Close* button to save your newly created global stylesheet. You will see your global stylesheet in the *Sites Management* pane.

!images/GlobalStylesheet_org.png|align="center" width="150mm" fo:scalefit="1" html:scalefit="0"!

* To edit your global stylesheet or predefined global stylesheets, simply select the corresponding file and click *Edit Document* on the action bar to open the *Edit* form. To rename the document, right-click the corresponding global stylesheets in the *Sites Management* pane, then select *Rename*.


h1. Create and apply the global stylesheet by configuration {anchor:id=DEV.CreateYourOwnPortal.CreateAndApplyGlobalStylesheetByConfiguration}

After being created as above, your desired global stylesheet can be initialized automatically when the application is started by doing as follows:

*1.* Open the *CSS* folder.

*2.* Select *System* and click *Export* on the *Action* bar.

!images/ExportImportGlobalStylesheet.png|align="center"  width="150mm" fo:scalefit="1" html:scalefit="0"!

*3.* Copy and paste the file you have exported, for example *StylesheetOrange.xml*, into the folder containing all stylesheets for your site, such as "/acme-website/WEB-INF/conf/acme-portal/wcm/artifacts/site-resources/acme/".

*4.* Add the code below to the file where all global stylesheets will be initialized for your site, such as *acme-deployment-configuration.xml* in the folder "/acme-website/WEB-INF/conf/acme-portal/wcm/deployment/".

{code:xml}
<object-param>
  <name>ACME Stylesheet Green data</name>
  <description>Deployment Descriptor</description>
  <object type="org.exoplatform.services.deployment.DeploymentDescriptor">
    <field name="target">
      <object type="org.exoplatform.services.deployment.DeploymentDescriptor$Target">
        <field name="repository">
          <string>repository</string>
        </field>
        <field name="workspace">
          <string>collaboration</string>
        </field>
        <field name="nodePath">
          <string>/sites content/live/acme/css</string>
        </field>
      </object>
    </field>
    <field name="sourcePath">
      <string>war:/conf/acme-portal/wcm/artifacts/site-resources/acme/StylesheetOrange.xml</string>
    </field>
    <field name="cleanupPublication">
      <boolean>true</boolean>
    </field>
  </object>
</object-param>
{code}

*5.* Save the file where you have added the code in *Step 4* and clean data created in the previous start-up.

*6.* Start eXo Platform. After accessing the *Sites Explorer* page, you will find your global stylesheet in the CSS folder of the relevant site.


h1. Check the display of global stylesheets {anchor:id=DEV.CreateYourOwnPortal.CheckDisplayOfGlobalStylesheet}

You can have several global stylesheets in one site. To see differences when applying various global stylesheets, for example *GlobalStylesheet\_Blue* and *GlobalStylesheet\_Orange*, do as follows:

*1.* Activate the *GlobalStylesheet\_Blue* and *GlobalStylesheet\_Orange* by turns.

*2.* Click *My Spaces* on the *Administration* bar and select the relevant site that you have customized the style.

If you activate *GlobalStylesheet\_Blue* (the pre-defined stylesheet), your site will be displayed as below:

!images/DisplayGlobalStyleBlue.png|align="center"  width="150mm" fo:scalefit="1" html:scalefit="0"!

When you activate *GlobalStylesheet\_Orange* (your CSS stylesheet), you can see your site is now displayed in a different style:

!images/DisplayGlobalStyleOrange.png|align="center"  width="150mm" fo:scalefit="1" html:scalefit="0"!