====== Arkusze stylów CSS ======

Większość sposobu wyświetlania przez [[:DokuWiki]] może być definiowana za pomocą arkuszy stylów CSS. Samo DokuWiki definiuje tylko kilka niewielkich stylów. Reszta definicji CSS pochodzi od użytych [[.:template|szablonów]] i [[.:plugins|wtyczek]].

Wszystkie pliki CSS są pobierane za pośrednictwem jednego dyspozytora w [[xref>lib/exe/css.php]], który obsługuje również buforowanie, zastępowanie wzorców i optymalizację. Wczytywanie arkuszy stylów oprócz innych czynności wykonywane jest wewnątrz funkcji ''tpl_metaheaders()'', zatem nie zapomnij umieścić jej w swoim szablonie.


===== Tryby arkuszy stylów =====

Jest pięć typów trybów arkusza stylu:

  * **screen**: Używany do wyświetlania stron w przeglądarce
  * **print**: Definicje stąd zostaną użyte do drukowania stron
  * **all**: Stosowane we wszystkich trybach wyświetlania
  * **rtl**: Definicje w plikach ''rtl'' zostaną wczytane dodatkowo gdy jest użyty [[:localization|język]] pisany z prawej do lewej
  * **feed**: Stosowane podczas wyświetlania [[:syndication|stopki]]

===== Arkusze stylów DokuWiki =====

[[:DokuWiki]] wczytuje swoje arkusze z 4 źródeł, które ładowane są w następującej kolejności (Arkusze RTL są dodawane na końcu każdego kroku):


==== 1.Podstawowe arkusze stylów ====

Te arkusze znajdują się w ''/lib/styles''. Określają one stylizację podstawowych elementów, jak wygląd komunikatów błędów.

==== 2.Style wtyczek ====

Wtyczki mogą określać własne definicje przy użyciu następujących plików:

^ Tryb        ^ Plik CSS ^
| screen      | ''style.css'' or ''screen.css''  |
| print       | ''print.css''  |
| all         | ''all.css'' |
| rtl         | ''rtl.css''    |
| feed        | ''feed.css'' |

Aby dostosować się do zestawu kolorów szablonu, autorzy wtyczek powinni używać [[#gwarantowane zastępcze oznaczenia kolorów|gwarantowanych zastępczych oznaczeń kolorów]].

:!: Arkusze stylów z wtyczki wczytywane są nawet, jeśli wtyczka nie jest używana (nie jest jednak, jeśli wtyczka jest [[:config:disableactions|wyłączona]]).

:!: Style zdefiniowane tutaj powinny mogą powodować konflikty. Zatem uważaj pisząc wtyczkę. Jeśli to możliwe, dodaj przedrostek do własnych stylów by nie powodowały one konfliktów.

==== 3.Style szablonów ====

Arkusze stylów szablonu są ładowane z wybranego folderu szablonu. [[:DokuWiki]] odczytuje ''[[#style.ini]]'' znajdujący się w folderze i wczytuje wszystkie CSS wymienione w tym pliku. Wczytywanie wykonywane jest zgodnie z [[#Tryby arkuszy stylów|aktualnym trybem]].

Dodatkowo s tym pliku ''[[#style.ini]]'' definiowane są [[#replacements|zastąpienia]].

  * Patrz również: [[templates|Rozwój szablonów]]

==== 4.Style użytkownika ====

Dodatkowe style, niezależnie od użytego szablonu moga być zdefiniowane przez administratora wiki poprzez utworzenie następujących plików CSS w folderze konfiguracyjnym wiki (''conf/'' w niepoprawianych wiki):

^ Plik CSS w Anteaterze               ^ Plik CSS przed i po Anteaterze((przywrócone po 2011-02-26)) ^ Kiedy używane ^
| ''conf/userstyle.css''              | ''conf/userstyle.css''      | Stosowane w trybie ekranowym |
| ''conf/printstyle.css''             | ''conf/userprint.css''      | Stosowane podczas wydruku strony |
| ''conf/rtlstyle.css'' [[develonly]] | ''conf/userrtl.css''        | Stosowane gdy używany język spisany z prawej do lewej |
| ''conf/feedstyle.css''              | ''conf/userfeed.css''       | Stosowane w wyświetlaniu [[:syndication|stopki]] |
| ''conf/allstyle.css''               | ''conf/userall.css''        | Stosowane we wszystkich trybach wyświetlania |

Jest to użyteczne do nadpisywania małych części stylów szablonu lub wtyczek bez borykania się z problemami korekt po aktualizacji.


===== Użycie identyfikatorów =====

Podczas używania własnych IDów w szablonie do przypisywania stylów upewnij się, że identyfikatory nie powodują konfliktów z istniejącymi już IDami. W szczególności upewnij się, że nie wchodzą w konflikt z identyfikatorami automatycznie przypisywanymi do nagłówków sekcji. Najprostszym sposobem zapewnienia tego jest użycie dwóch sąsiadujących podkreśleniach (%%__%%) w twoich IDach. Ponieważ identyfikatory sekcji są zawsze poprawnymi [[.:pagenames|nazwami stron]], nie będą one nigdy zawierać sąsiadujących ze sobą podkreśleń.

We wtyczkach użyj <nazwawtyczki>%%__%%<id>. Na przykład '' 'searchindexplugin%%__%%buttonfield' ''

===== Style.ini =====

''style.ini'' jest [[wp>INI_file|plikiem ini]]. Zawiera on dwie sekcje:

==== [stylesheets] ====

Ta część definiuje, jakie pliki CSS są wczytywane. Każda linia jest zdefiniowana następująco:
  cssfile.css = tryb

''cssfile.css'' jest nazwą twojego pliku, zaś tryb to [[#Tryby arkuszy stylów|tryb]] do którego się on odnosi.

==== [replacements] ====

Syspozytor CSS DokuWiki jest w stanie zastąpić oznaczenia zastępcze we wczytywanych arkuszach stylów co jest konfigurowane w sekcji ''[replacements]'' w szablonach ''[[#style.ini]]''. Jest to szczególnie użyteczne do definiowania schematu kolorów jednokrotnie i  ponownego użycia tych kolorów we wszystkich plikach. Późniejsze dostosowanie kolorów jest wtedy prostą kwestią zmiany pliku ini.

=== Gwarantowane zastępcze oznaczenia kolorów ===

Następujące oznaczenia zastępcze są jedynymi bezpiecznymi do użycia we wtyczkach.

^zmienna oznaczenia		^znaczenie			^wartość w domyślnym szablonie ^nazwa przed 2006-08-05	^
^''%%__background__%%''		|podstawowy kolor tła		|''#fff''		|''%%__white__%%''	|
^''%%__background_alt__%%''	|alternatywny kolor tła  	|''#dee7ec''		|''%%__medium__%%''	|
^''%%__background_neu__%%''	|neutralny kolor tła    	|''#f5f5f5''		|''%%__lightgray__%%''	|
^''%%__border__%%''		|kolor ramki			|''#8cacbb''		|''%%__dark__%%''	|
^''%%__text__%%''		|podstawowy kolor tekstu	|''#000''		|''%%__black__%%''	|
^''%%__text_alt__%%''		|alternatywny kolor tekstu	|''#638c9c''		|''%%__darker__%%''	|
^''%%__text_neu__%%''		|neutralny kolor tekstu		|''#666''		|''%%__darkgray__%%''	|

Od 2006-08-05 nazwy te zostały zmienione na bardziej poprawne semantycznie. Wtyczki i szablony używające zastępowania wzorców starsze niż ta data mogą być niedostosowane do tych zmiennych, zalecane było ich stosowanie.

=== Inne zastępcze oznaczenia kolorów używane przez szablon domyślny ===

Te dodatkowe oznaczenia zastępcze zostały użyte w szablonach domyślnych. Inne szablony mogą ich równiez używać, ale nie jest to wymagane.

^zmienna oznaczenia		^znaczenie			^wartość w domyślnym szablonie ^nazwa przed 2006-08-05	^
^''%%__background_other__%%''	|inny kolor tła         		|''#f7f9fa''		|''%%__lighter__%%''	|
^''%%__text_other__%%''		|inny kolor tekstu			|''#ccc''		|''%%__mediumgray__%%''	|
^(none, omitted)		|-					|''#eef3f8''		|''%%__light__%%''	|
^''%%__extern__%%''		|kolor linku				|''#436976''		|(unchanged)		|
^''%%__existing__%%''		|kolor linku dla działającego linku wewnętrznego |''#090''		|(unchanged)		|
^''%%__missing__%%''		|kolor linku dla brakującego linku wewnętrznego	|''#f30''		|(unchanged)		|
^''%%__highlight__%%''		|kolor podświetlonych wyszukiwanych fragmentów	|''#ff9''		|(unchanged)		|