Przegląd styles.css

11 July 2008 Comments

Każda skórka jPortala zawiera plik style.css formatujący czcionkę i inne elementy w skórce. Każda skórka ma taki sam zestaw klas, lecz o odpowiednio zmodyfikowanych kolorach i innych ustawieniach. Oto przegląd pliku css z opisem co dana klasa określa. Komentarze znajdują się za // dwoma ukośnikami.

/* ================================================================ */
/* definicja wygladu kalendarza                                     */
/* ================================================================ */

// określa wygląd nazwy miesiąca
.calendar_1 {
  font-family: Verdana; 
  font-size: 16px; 
  font-weight: bold;
  text-align: center;
  padding-top: 0px; 
  padding-right: 0px; 
  padding-bottom: 0px; 
  padding-left: 0px; 
  color: #444444;
} 

// skrótowe nazwy dni
.calendar_2 { 
  font-family: Verdana; 
  font-size: 10px; 
  font-weight: bold;
  text-align: center;
  padding-top: 0px; 
  padding-right: 0px; 
  padding-bottom: 0px; 
  padding-left: 0px; 
  background-color: #D1D7DC; // kolor tła pod skrótami dni
  color: #444444; // kolor skrótów dni 
} 

// dni miesiąca
.calendar_3 { 
  font-family: Verdana; 
  font-size: 10px; 
  text-align: center;
  padding-top: 0px; 
  padding-right: 0px; 
  padding-bottom: 0px; 
  padding-left: 0px; 
  color: #444444; // kolor dni (liczby) miesiąca
} 

// dzisiejszy dzień
.calendar_4 { 
  font-family: Verdana; 
  font-size: 10px; 
  font-weight: bold;
  text-align: center;
  padding-top: 0px; 
  padding-right: 0px; 
  padding-bottom: 0px; 
  padding-left: 0px; 
  background-color: #555555; // kolor tła pod dzisiejszym, podświetlonym dniem
  color: #eeeeee; // kolor cyfry dzisiejszego dnia 
} 

/* ================================================================ */
/* podstawowe class'y modulow systemu                               */
/* ================================================================ */

// tekst ankiety, fragmeny tekstów jPortala (np przy liście stron newsów)
.uni_01 { 
  font-family: Verdana; 
  font-size: 11px; 
  padding-top: 1px; 
  padding-right: 3px; 
  padding-bottom: 1px; 
  padding-left: 3px;
  color: #555555;
}

// co wyżej, m.in. napis "Powered by"
.uni_02 { 
  font-family: Verdana; 
  font-size: 11px; 
  padding-top: 2px; 
  padding-right: 4px; 
  padding-bottom: 2px; 
  padding-left: 4px; 
  color: #666666;
}

.poll { 
  border: 0px; 
  background-color: #EFEFEF; // kolor pola wokół pola "radio" ankiety
}

// wygląd tekstu w tagu CODE
.code {
  border: 1px #999999 solid; 
  background-color: #F4f4f4; 
  font-family: Courier; 
  font-size: 12px; 
  padding-top: 1px; 
  padding-right: 3px; 
  padding-bottom: 2px; 
  padding-left: 16px; 
  text-align: left; 
  color: #990000; 
} 

// tekst w tagu CYTAT/QUOTE
.cytat { 
  border: 1px #999999 solid; kolor obramowania
  background-color: #F4f4f4; kolor tła cytatu
  font-family: Verdana; 
  font-size: 11px; 
  padding-top: 1px; 
  padding-right: 3px; 
  padding-bottom: 2px; 
  padding-left: 16px; 
  text-align: left; 
  color: #006633; kolor czcionki w cytacie
} 

/* ================================================================ */
/* definicje uzytkownika (uzyte w functions.inc.php)                */
/* ================================================================ */

// Generalne ustawienia, scrollbar - pasek przewijania w IE
body {
  color="#0000FF";
  scrollbar-face-color: #D1D7DC;
  scrollbar-highlight-color: #FFFFFF;
  scrollbar-shadow-color: #DEE3E7;
  scrollbar-3dlight-color: #D1D7DC;
  scrollbar-arrow-color:  #666666;
  scrollbar-track-color: #EFEFEF;
  scrollbar-darkshadow-color: #888888;
}

// Tytuły bloków itp
.title { 
  font-family: Verdana; 
  font-size: 11px; 
  padding-top: 0px; 
  padding-right: 3px; 
  padding-bottom: 0px; 
  padding-left: 3px; 
  color: #666666;
}

// tekst w komórkach
.menu { 
  font-family: Verdana; 
  font-size: 11px; 
  padding-top: 0px; 
  padding-right: 0px; 
  padding-bottom: 0px; 
  padding-left: 0px; 
  color: #666666;  kolor takich tekstów jak w logowaniu „nick”, „hasło”
} 

// w komentarzach itp. określa "frazy" w jP, np: Artykułów (X)
.o { 
  font-family: Verdana; 
  font-size: 11px; 
  padding-top: 1px; 
  padding-right: 1px; 
  padding-bottom: 1px; 
  padding-left: 1px;
  font-weight: bold; 
  color: #eeeeee;
} 

// kolor w bocznych blokach menu
.block { 
  font-family: Verdana; 
  font-size: 11px; 
  padding-top: 2px; 
  padding-right: 3px; 
  padding-bottom: 2px; 
  padding-left: 3px; 
  color: #666666;
} 

// wygląd pola title (login/hasło itp.)
input { 
  font-family: Verdana; 
  font-size: 11px; 
  color: #666666; // kolor czcionki
  border: 1px #999999 solid; // obramowanie
  background-color: #F4f4f4; // tło
} 

// wygląd drop down menu (wysuwane okienko - wybierz skórę)
select { 
  font-family: Verdana; 
  font-size: 11px; 
  color: #666666; // kolor tekstu
  border: 1px #999999 solid; // obramowanie
  background-color: #F4f4f4; // tło tego okienka
} 

// Textarea (pisanie posta, artykułu itp.)
textarea {
  font-family: Verdana; 
  font-size: 11px; 
  color: #666666; 
  border: 1px #999999 solid; 
  background-color: #F4f4f4;
} 
 
a:visited { text-decoration: none; color: #666666}  // kolor odwiedzonego linka
a:link    { text-decoration: none; color: #666666}  // kolor linków
a:hover   { text-decoration: none; color: #bbbbbb}  // kolor linka pod myszą

Dla pełnej jasności mała ściągawka z niektórych poleceń w CSS:
- padding: przesunięcie w px z wybranego kierunku (padding-top od góry itd.). Głównie zmieniamy tylko padding-top w "title".
- font-family: nazwa czcionki
- font-size: rozmiar czcionki w px. Standardowo 11-13
font-weight: wygląd czcionki (bold - pogrubienie, italic - kursywa, underline - podkreślenie)
- text-align: wyrównanie (justify - wyjustowane, left, right, top, middle, down)
- background-color: kolor tła. Można zamienić na:
- background-image: url('link/do/foto.jpg'); : plik graficzny jako tło.

Dodatkowo wygląd forum i tła pod np. komentarzami określone są w functions.inc.php skórki:

<?php

$color[1] = '#D1D7DC';   // tło nagłówków (czóbków) np w artykułach
$color[2] = '#ECEFF0';   // kolor komórki „Górnego menu”
$color[3] = $theme;      // zawiera nazwe katalogu theme'a  
$color[4] = '#F8f8f8';   // tło komórek artykułów itp jeżeli komórka nie ma własnego
$color[5] = '#EFEFEF';   // 1 kolor listy (forum, panel admina, itp.) kolor co drugiego „wiersza” (np. ciąg tematów) na forum i w panelu admina
$color[6] = '#D1D7DC';   // naglowek listy np. czubek forum
$color[7] = '#666666';   // kolor czcionki naglowkow listy
$color[8] = '#DEE3E7';   // 2 kolor listy (forum, panel admina, itp.) kolor co drugiego „wiersza” (np. ciąg tematów) na forum i w panelu admina
$color[9] = '#666666';   // kolor drobnych podpisow np. w katalogu stron  „Wywołań:”

RkBlog

jPortal, 11 July 2008

﻿Przegląd styles.css

Przegląd styles.css