Fork me on GitHub Fork me on GitHub
Style CSS - Artykuły
Style CSS
  Posted on Sat 25 Mar 2006 by red_Slider (8259 reads)
Pliki CSS
2. style.css
Plik style.css Cascading Style Sheet jest podstawowym stylem skórki. Jest on ładowany po stronie użytkownika, jest używany we wszystkich stronach całej skórki.
Linie 1-17:
body {color: black; background: white; margin: 0; padding: 0;}

table {width: 100%; margin: 5; padding: 5; font-size: small}
table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;}

a {color: #666666; text-decoration: none; font-weight: bold; background-color: transparent;}
a:hover {color: #ff6600;}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: square inside; color: #2F5376}

input.formButton {}
Ładują one style podstawowych elementów strony. Jak widać, sa tutaj sekcja BODY i styl linku jaki używamy na stronie.

Linie 19-31:
.item {border: 1px solid #cccccc;}
.itemHead {padding: 3px; background-color: #2F5376; color: #FFFFFF;}
.itemInfo {text-align: right; padding: 3px; background-color: #efefef}
.itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #ffffff; background-color: transparent;}
.itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate {font-size: 90%; font-style:italic;}
.itemStats {font-size: 90%; font-style:italic;}
.itemBody {padding-left: 5px;}
.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}
.itemText:first-letter {font-size: 133%; font-weight: bold;}
ąąąąąąąąąąąąąąąąąąąąą
.itemFoot {text-align: right; padding: 3px; background-color: #efefef}
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%;}
Te definiują klasy dla modułów NEWS oraz wskazują w jaki sposób newsy (artykuły) na naszej stronie są zrenderowane (nie tylko czcionka, ale też tło, “border”, odstęp od krawędzi).

Linie 33:
th {background-color: #2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;}
Jest to podstawowy styl tabeli nagłówków. Jest to ważna zawartość dla tabel używanych w blokach i modułach, jak forum, ostatnie posty, czy „kontakt z nami” (contact us).

Linie 35-36:
td#headerbanner {width: 100%; background-color: #2F5376; vertical-align: middle; text-align:center;}
td#headerbar {border-bottom: 1px solid #dddddd; background-image: url(hbar.gif);}
Style te odnoszą się do Tabeli nagłówka (Header Table). Zapamiętaj, że obrazek tła nagłówka (header bar image - hbar.gif) jest wywoływany właśnie za pomoc? style.css jako tło, a nie bezpoźrednio z pliku theme.html.

Linie 38-41:
td#leftcolumn {width: 170px; border-right: 1px solid #cccccc; font-size:12px;}
td#leftcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}
td#leftcolumn div.blockContent {padding: 3px; line-height: 120%; line-height: 120%;}
Te klasy i style (id!) definiują wyświetlanie Lewej Kolumny. Zwróć uwagę na to, że osobno definiuje się tytuły bloku lewego oraz zawartość tych bloków.

Linie 44-57:
td#centercolumn {font-size: 12px;}

td#centercolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#centerCcolumn {padding: 0px 3px 1px 3px;}
td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;}
td#centerCcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom: 2px; line-height: 120%;}

td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerLcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}
td#centerLcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 3px; margin-right: 2px; margin-bottom: 2px; line-height: 120%;}

td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerRcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}
td#centerRcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;}
Te style odwołują się do wyświwtlania bloku center-center (centerCcolumn), centralnego lewego (centerLcolumn) i centralnego prawego bloku (centerRcolumn).
Zauważ, że rozmiar czcionki (font-size) bloku centralnego I zawartosci modułów jest wskazany właśnie tutaj (centercolumn).

Linia 59:
div#content {text-align: left; padding: 8px;}
określenie te definiuje nam tag wartswy w zawartości modułów (div). Położenie tekstu (text-align) i odstęp są zdefiniowane właśnie tutaj.
Linie 61-64:
td#rightcolumn {width: 170px; border-left: 1px solid #cccccc; font-size:12px;}
td#rightcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#rightcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}
td#rightcolumn div.blockContent {padding: 3px; line-height: 120%;}
Te identyfikatory (id) określaja nam prawą kolumnę, Jeśli jest wyświetlana. Zwróc uwagę, na użyte atrybuty dla tytułów I zawartości bloków prawej kolumny.

Linia 66:
tr#footerbar {text-align:center; background-image: url(hbar.gif);}
Jest uzyta w tabeli stopki. Zwróc uwagę, że użyty jest tu ten sam obrazek, jak w tle nagłówka.

Linie 68-72:
td#mainmenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px;}
td#mainmenu a:hover {background-color: #ffffff;}
td#mainmenu a.menuTop {padding-left: 3px; border-top: 1px solid silver; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#mainmenu a.menuMain {padding-left: 3px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#mainmenu a.menuSub {padding-left: 9px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
Style te użyte są dla bloku Menu Głównego (Main Menu). Jak widać style wskazuja na różnice pomiędzy pierwszym (najbardziej na górze) linkiem, linkami głównymi I linkami submenu.

Linie 74-77:
td#usermenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#usermenu a:hover {background-color: #ffffff;}
td#usermenu a.menuTop {border-top: 1px solid silver;}
td#usermenu a.highlight {background-color: #fcc;}
Style te uzyte są w bloku Menu Użytkownik (User Menu). Ostatnia linia (a.highlight) określa nam linię Wiadomości, gdzie wyświetlane są wiadomości z powiadomień i Prywatnych Wiadomości dla użytkownika.

Linie 81-87:
.outer {border: 1px solid silver;}
.head {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
.even {background-color: #dee3e7; padding: 5px;}
.odd {background-color: #E9E9E9; padding: 5px;}
.foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
tr.even td {background-color: #dee3e7; padding: 5px;}
tr.odd td {background-color: #E9E9E9; padding: 5px;}
są to style użyte w tabelach. “Odd” I “even” uzywane są właściwie we wszystkich tabelach jako różne kolumny i wiersze.

Linie 89-91:
div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;}
Te style określają nam wyświetlanie się błędów o komunikatów generowanych przez system. Nie ma większego powodu by je zmieniać.

Linie 93-94:
div.xoopsCode { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
div.xoopsQuote { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
Te znów używane są w forum (NewBB) oraz w komentarzach do modułów.

Linie 97-108:
.comTitle {font-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #2F5376; font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0;}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}
Tutaj mamy określenie użytych w modułach elementów wskazujścych na informacje o użytkowniku.

3. styleMAC.css
Linie 1-3:
@import url(style.css);
/* Very short Mac-specific additions/changes here (if
any) */
Ten plik używany jest dla randerowania różnic pomiędzy różnymi przeglądarkami. Plik pozawala nie tylko na import pliku style.css, ale również na pozbycie się różnic w wyświetlaniu skórki dla użytkowników przeglądarek Mac’owskich.
4. styleNN.css
Linie 1-3:
@import url(style.css);
/* Very short Gecko-specific additions/changes here (if
any) */
Ten plik używany jest dla randerowania różnic pomiędzy różnymi przeglądarkami. Plik pozawala nie tylko na import pliku style.css, ale również na pozbycie się różnic w wyświetlaniu skórki dla użytkowników przeglądarek Netscape, w szczególności Mozilla, Mozilla Firebird oraz Mozilla Firefox.
Index :: Print :: E-mail
The comments are owned by the author. We aren't responsible for their content.