XPage : Add a styleClass to a given styleSheet of a XPage - css

Question

How do I add a styleClass to a given XPage styleSheet ?
.required {
background: red;
}
I want to do the same as Knut Herrmann answered here but unfortunately it is not shown how to add that class to the XPage styleSheet (resp. edit that styleSheet). So how to achieve that ?

Answer 1

Create a css file in database's Resources / Style Sheets
and add this css file as resource to your XPage in XPage's property "Resources".

Answer 2

1) Create your own stylesheet file in your database (e.g. custom.css under resources/stylesheets)
2) Now you can add a new styleclass to your stylesheet file or you can overwrite an existing styleclass
Overwrite example:
XPage:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="/custom.css"></xp:styleSheet>
</xp:this.resources>
<xp:text escape="true" id="computedField1" value="Hello"></xp:text>
</xp:view>
custom.css:
.xspTextComputedField {
font-weight: bold;
}
"New" example:
XPage:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="/custom.css"></xp:styleSheet>
</xp:this.resources>
<xp:text escape="true" id="computedField1" value="Hello" styleClass="customXspTextComputedField"></xp:text>
</xp:view>
custom.css:
.customXspTextComputedField {
font-weight: bold;
font-size: 20pt;
}