Yüzeyler, Jetspeed'deki değişik parçaların, renk, yazı türü(font) ve sınırlarını belirler. Yüzey tanımları denetlemeler(controls), denetciler(controllers), portletler ve şablonlar gibi Jetspeed kaynaklarına başvuru noktası olarak merkesi bir tasarım birimi oluştururlar. JPortal sitemizin abartılı renklerine uyum sağlamak için tanımladığımız jportal-skins.xreg'deki kayıt parçalarını inceleyin.
<?xml version="1.0" encoding="UTF-8"?>
<registry>
<skin-entry name="jportal-skin" hidden="false">
<property name="text-color" value="#ffffff" hidden="false"/>
<property name="background-color" value="#ffffff" hidden="false"/>
<property name="title-text-color" value="#000000" hidden="false"/>
<property name="title-background-color" value="#ceff63"
hidden="false"/>
<property name="title-style-class" value="TitleStyleClass"
hidden="false"/>
<property name="highlight-text-color" value="#ffffff"
hidden="false"/>
<property name="highlight-background-color" value="#6331ff"
hidden="false"/>
</skin-entry>
</registry>
Daha sonra JetspeedResources.properties.merge'de, portal sitesi için varsayılan yüzey(skin)'i tanımlayın:
services.PortalToolkit.default.skin=jportal-skin
Varsayılan yüzey(Skin) bir kaynak için özel bir yüzey belirlenmediğinde kullanılacak olan yüzeydir. Varsayılan yüzet en az çabayla çabucak bir site görünümü oluşturmanızı sağlar.
Jetspeed Yüzey Belgeleri(Jetspeed Skin documentation)'inde mevcut bütün yüzey for all available skin parameterrelerini bulabilirsiniz.
Yüzeyler Cascading Style Sheets (CSS) lerle birlikte kullanılır. CSS web belgelerine biçim(yazı türü(font), renkler, aralıklar, vb.) eklemek için World Wide Web Consortium (W3C) tarafından tanımlanmış basit bir mekanizmadır.
JetspeedResources.properties.merge, portal sitesinin biçim sayfası(stylesheet) tanımlanmıştır:
site.stylesheet=css/jportal.css
JPortal sitesinin CSS'ine bakınca, Jetspeed'in varsayılan CSS'i default.css'in bu CSS'e url ile aktarıldığını görüyoruz.
@import "default.css";
A:link {
text-decoration : none;
color : #333366;
}
A:visited {
text-decoration : none;
color : #666699;
}
A:hover {
color : #CC3300;
}
A.index:link {
font-size : 11px;
color : #333366;
}
A.index:visited {
font-size : 11px;
color : #333366;
}
A.index:hover {
color : #CC3300;
}
Daha sonra defult.css'i geçersiz kılarak(override) ederek pek çok CSS oluşturacağız. CSS'de belirtilen biçimler yüzey içinden başvurulabilir. Yüzey kaydında yapıldığı gibi:
<property name="title-style-class" value="TitleStyleClass"
hidden="false"/>