ViCMS 2.1 – Szaty graficzne

ViCMS może posiadać obsługiwać wiele szat graficznych (skórek) dla witryny WWW i pozwalać na przełączanie pomiędzy nimi. W paczce z systemem znajdują się standardowo trzy skórki:

ViCMS 2.1 Skórki

 

Chcąc dodać nową tak, aby była ona widoczna w parametrach witryny, informacje jej dotyczące muszą być zapisane w bazie danych, a pliki powinny zostać umieszczone w katalogu./themes/nazwa, gdzie nazwa jest nazwą skórki.

Baza przechowuje następujące dane:

  • id – numer pozwalający na jednoznaczną identyfikację,
  • nazwa – katalog, w którym przechowywane są pliki (max 100 znaków),
  • x_max – określa maksymalną dopuszczalną szerokość zdjęcia (w pikselach), które można wstawić w treści, aby nie zniszczyć layoutu (max 4 znaki),
  • menu_up – jest to informacja o górnym menu – może przyjmować 3 wartości: 0 – nie ma górnego menu, 1 – górne menu jest pod logo (jak w skórce Green), 2 – górne menu jest nad logo serwisu (jak w skórce Infrared).
  • kolorystyka – przyjmuje wartości: light lub dark w zależności od wykorzystanej palety barw. Parametr używany jest przy ładowaniu danych z serwisu Facebook (jeśli włączona jest opcja integracji), w celu zachowania odpowiedniego kontrastu.

Każdy folder ze skórką powinien zawierać plik style.css (kaskadowy arkusz stylów), który opisuje sposób prezentacji poszczególnych elementów witryny.

Pliki opcjonalne:

  • ie_style.css – style alternatywne dla przeglądarek z grupy Internet Explorer
  • favicon.ico – ikonka
  • icon.png – ikonka, która może posiadać kolor 32-bit, przezroczystość, większą rozdzielczości i być wykorzystana np. jako miniaturka w SpeedDial (ponad 200x200px), itp.
  • mini.jpg – screen prezentujący miniaturkę (sugerowana rozdzielczość to 200 x 160) – będzie widoczny w panelu administratora, przy wyborze szaty graficznej.

Grafiki, tła, czcionki oraz miejsce ich składowania powinny znajdować się w folderze images danej skórki.

Pliki wymagane w images:

  • rss.png – zawiera ikonkę kanału informacyjnego, widoczną na górze bocznego menu,
  • blip.png – ikonka reprezentująca serwis Blip.pl, wyświetlana pod aktualnościami, jeśli włączona jest integracja z tym serwisem.
  • minus.pngminus_bw.pngplus.pngplus_bw.png – ikonki do głosowania. Te z bw w nazwach oznaczają ikonki nieaktywne.
  • trash.png – ikonka symbolizująca kosz (śmietnik) – wyświetlana przy komentarzach (jeśli opcja zgłaszania obraźliwych/niedozwolonych treści jest włączona)

Jakie klasy i selektory id zostały użyte do formatowania? Wystarczy zajrzeć do źródła stron, a następnie po kolei definiować sposób prezentacji elementów w pliku CSS albo wzorować się na którymś ze stylów dołączonych do skórek znajdujących się w paczce z systemem.