Pada post kali ini, penulis akan menjelaskan tutorial untuk custom WebCenter Spaces. Langsung saja kita mulai.
- Login WebCenter Spaces lalu masuk menu Admnisitration.
- Klik tab resources, pilih page templates
- Klik create
- Nah untuk step selanjut, klik edit dan pilih edit source, maka akan muncul source code dari page template tersebut :s
- Nah untuk mulai skinning di perlukan sedikit pemahaman tentang page template ini , Lihat gambar di bawah yang sebelah kiri merupakan contoh template top navigation dan di sebelah kanan merupakan source code-nya yang di buka di jdeveloper. Setelah kalian lihat maka kalian harusnya tau apa yang harus di edit (note : untuk bagian content kalian bisa ubah langsung css di menu skins(tab resources).
- Nah setelah kalian buka di jdeveloper kalian bisa langsung edit dan menambah kan CSS untuk memperindah website kalian. Langsung aja berikut :
<af:resource type="css">
.xpf[id="T:spcNavPanel:mainTopStretchPanel"]{
border-bottom:4px solid #FF5E4D; /* Set to desired color of bar under header */
-webkit-box-shadow: 0px 1px 10px 5px #222;
-moz-box-shadow: 0px 1px 10px 5px #222;
box-shadow: 0px 1px 10px 5px #222;
-webkit-box-shadow: 0 8px 6px -5px #222;
-moz-box-shadow: 0 8px 6px -5px #222;
box-shadow: 0 8px 6px -5px #222;
}
.x14j .p_AFMaximized {
background-color: #FFFFFF !important;
}
.x1yx {
}
.xrw {
background-image: none;
height: 0px;
}
.xrv[theme="webcenter"]{
background-image: none;
height: 0px;
}
.xry[theme="webcenter"]{
background-image: none;
height: 0px;
;
}
.xrz[theme="webcenter"]{
background-image: none;
height: 0px;
}
.xs0[theme="webcenter"]{
background-image: none;
height: 0px;
}
.xs2[theme="webcenter"]{
background-image: none;
height: 0px;
}
.xs3[theme="webcenter"]{
background-image: none;
height: 0px;
width: 0px;
}
.xs4[theme="webcenter"]{
background-image: none;
height: 0px;
}
.xs5[theme="webcenter"]{
background-image: none;
height: 0px;
}
.x1yx {
background-image: none;
height: 0px;
}
.x12t[theme="webcenter"]{
color:#000000 !important;
font-weight: bold;
}
</af:resource>
| Before : | After : |
 |
 |
Sekian post dari saya :)
No comments:
Post a Comment