www.crobicom.com - Prilagođavanje design-a zaglavlja

Prilagođavanje design-a zaglavlja

Mustafa Bešlagić
Srijeda, 09 Travanj 2008

Kao što vidite na slici ovim tutorijalom želimo postojeći (default-ni) design zaglavlja u potpunosti promijeniti. Naravno da bi postigli željeni cilj bitno je poznavati osnove CSS-a (Cascading Style Sheets). CSS klase u potpunosti definiraju vizualne karakteristike dijelova stranice. One su definirane u više css datoteka koje se nalaze u [path]\s_oracle10\b_mozilla_4 direktoriju.

[path] ovisi o vrsti web servera. Pogledaj Kako promijeniti sliku bannera

CSS datoteke koje ćemo mijenjati u cilju rješavanja zadatka su:

portalbanner.css
portalcontent.css

Slijedeća slika prikazuje korak po korak prilagođavanje css datoteka zadanom design-u.

Korak 1 - Preinaka izgleda Page Tab izbornika

Za ovaj korak potrebno je pripremiti 4 slike i to:

subtabr.gif subdimtabr.gif bg_tab.gif separator.gif
Ove slike se pohranjuju u b_mozilla4 direktorij!

Važno je napomenuti da su karakteristike page tabova koje mijenjamo definirane u portalcontent.css datoteci.
Dolje navedene klase definiraju izgled tabova. Masna slova označavaju properties-e koje se razlikuju od originalnih. Nekad ih trebate samo promijeniti a ako ih nema u originalnim datotekama tada ih treba dodati.

Preporučam da instalirate firefox i firebug plugin koji će Vam u mnogome pomoći da debug-irate probleme promijenjenih CSS datoteka.
/*ova klasa definira lijevi dio aktivnog tab-a*/
.TabHiCell {
    background-color: #9ABFDC;
    text-align: center;
    background-image: url(bg_tab.gif); /* USED BY PERL RTL-ONLY: background-rtl-image: url(bg_tab.gif); */
    background-position: top left;
    background-repeat: no-repeat;
    padding: 3px 4px 2px 10px;
    border-width: 0;
    border-style: solid;
    border-color: #3f3f7f;
    border-bottom-color: #ffffff;
    text-decoration: none;
}
/*ova klasa definira desni dio aktivnog tab-a tzv. separator*/
TabHiSep {
    background-image: url(subtabr.gif); /* USED BY PERL RTL-ONLY: background-rtl-image: url(subtabr.gif); */
    background-position: top left;
    background-repeat: no-repeat;
    width: 8px;
}
/*ova klasa definira lijevi dio neaktivnog tab-a*/
.TabDimCell
{
    background-color: #DEE8F1;
    text-align: center;
    background-image: url(bg_tab_dim.gif); /* USED BY PERL RTL-ONLY: background-rtl-image: url(bg_tab_dim.gif); */
    background-position: top left;
    background-repeat: no-repeat;
    padding: 6px 4px 4px 10px;
    font-size: 9pt;
}
/*ova klasa definira desni dio neaktivnog tab-a tzv. separator*/
.TabDimSep {
    background-image: url(subdimtabr.gif); /* USED BY PERL RTL-ONLY: background-rtl-image: url(subdimtabr.gif); */
    background-position: top left;
    background-repeat: no-repeat;
    width: 8px;
}
/*ova klasa definira razmak između tabova*/
.TabSep {
    width: 6px;
}

Korak 2 - Kreiranje tab dashboard izbornika umjesto hyperlink navigacije

Za ovaj korak potrebno je pripremiti 4 slike i to:

aktiv.gif neaktiv.gif hover.gif separator.gi

/*ova klasa definira panel kontejner*/
.PanelItems {
   font-size: 8pt;
   font-weight: bold;
   vertical-align: bottom;
   padding-right: 4px;
   border: 0px;
   padding-bottom:0px;
}
/*ova klasa definira panel separator - područje između dashboard tabova*/
.PanelItemSep
{
    width:4px;
    background: url(separator.gif) 0px 0px no-repeat;
    height:25px;
    display:inline-block;
    float:left;
}

/*ova klasa definira neaktivne tabove dashboarda za stanja link i visited*/
.PortalLink:link, .PortalLink:visited {
    font-size: 8pt;
    color: #555;
    text-decoration:none;
    font-weight: normal;
    background:transparent url(neaktiv.gif) repeat 100% 0%;
    height:16px;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    vertical-align:bottom;
    display:block;
    float:left;
}
/*ova klasa definira ponašanje neaktivnih tabova dashboarda kod stanja hover*/
.PortalLink:hover {
    font-size: 8pt;
    color:#ffffff;
    font-weight: normal;
    text-decoration: underline;
    background:transparent url(hover.gif) repeat 100% 0%;
}

/*ova klasa definira aktivni tab dashboarda za stanja link i visited i hover*/
.CurrentPortal:link,
.CurrentPortal:visited,
.CurrentPortal:hover
{
    font-size: 8pt;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    background:transparent url(aktiv.gif) no-repeat 100% 0%;
    height:16px;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    vertical-align:bottom;
    display:block;
    float:left;
}