Els fonaments

Els estils wiki permeten modificar el color i altres atributs de forma dels continguts. Un estil wiki s'escriu usant signes de percentatge, per exemple %red% o %bgcolor=lightblue%.

Els estils wiki VS. els estils CSS

Els estils wiki, tal i com s'escriuen a les pàgines del wiki, no són exactament estils CSS o classes CSS. Els estils wiki ens permeten usar classes CSS predefinides per l'administrador/a, i definir noves combinacions d'estils, sense cap necessitat d'editar/actualitzar els fitxers CSS locals del servidor.

Noteu que PmWiki permet l'ús de class= i style= a les taules i als blocs de divisió, però aquests són atributs HTML directes, no són pas estils wiki; és necessari saber CSS per a usar-los.

El tipus de lletra i el color del text

L'ús més bàsic dels estils wiki és per canviar atributs del text com ara bé el color, el color de fons, o el tipus de lletra. PmWiki defineix diversos estils wiki per a canviar el color del text a %black%, %white%, %red%, %yellow%, %blue%, %gray%, %silver%, %maroon%, %green%, %navy%, i %purple%.

El cabàs conté %red% pomes, %blue% mirtils, %purple% albergínies, %green% llimes, %% i més.

Per a usar altres colors no predefinits, feu servir l'estil wiki %color=...%. (Nota: el colors RGB (#rrggbb) sempre s'han d'especificar en lletres minúscules per a evitar conflictes amb les ParaulesWiki.)

També voldria algunes %color=#ff7f00% taronges%% !

Per a canviar el color de fons, feu servir %bgcolor=...% com a estil wiki:

Aquesta frase conté %bgcolor=green yellow% text groc sobre fons verd.

Per a més ajuda al voltant dels colors, vegeu WikiStyle Colors.

Justificació del text

Els estils wiki s'usen per a controlar la justificació del text

%center% El text està centrat. 

%right% Justificat a la dreta.

i per a crear text flotant:

%rfloat% Aquest text flota cap a la dreta

%rframe% flota cap a la dreta amb un marc

Lorem ipsum dolor sit amet, consectetuer sadipscing elitr

Abast

Els estils wiki també poden especificar un abast; sense aquesta especificació, l'estil s'aplica a tot el text posterior fins al pròxim estil wiki o el final del paràgraf, el que esdevingui abans. L'atribut apply= i els seus àlies permeten canviar l'abast de l'estil com es mostra tot seguit:

Per tant, %p color=blue% és el mateix que %apply=p color=blue%, i %list ROMAN% és el mateix que %apply=list list-style=upper-roman%.

Alguns àlies d'estil predefinits també usen apply, així %right% és un àlies de %text-align=right apply=block%.

Exemple: Aplicació d'un estil a un paràgraf:

%p bgcolor=#ffeeee% La especificació de l'estil wiki al principi d'aquesta línia s'aplica a tot el paràgraf, fins i tot si hi ha %blue% altres especificacions d'estils wiki%% al bell mig del paràgraf.

Nota: Un estil wiki aplicat només tindrà efecte si està a la línia que comença l'element que es suposa que ha de modificar. En altres paraules un estil wiki situat a la tercera línia d'un paràgraf no pot canviar els atributs del paràgraf:

Després de la primera línia del paràgraf,
intentem aplicar %apply=p color=blue% per canviar el color.
Açò no funciona perquè l'estil ve després de la primera línia del paràgraf.

Tanmateix, aquest %apply=p color=red% paràgraf
''serà'' en roig perquè l'estil del bloc 
té lloc en la primera línia del seu text.

* Ací hi ha un ítem d'una llista
* %list red% Uups, és massa tard per a canviar l'estil de la llista!

Blocs més grans

Es pot usar el bloc >>EstilWiki<< per tal d'aplicar un estil wiki a un bloc gran d'elements. L'estil s'aplica fins trobar el pròxim >><<.

>>blue font-style:italic bgcolor=#ffffcc<<
Quelcom posterior a la línia de dalt es formatarà amb cursiva i color blau,

Açò inclou
    text amb pre-format %red%color roig%%
* llistes
-> elements sagnats
>><<

    text amb pre-format color roig

Fixeu-vos que la directiva (:div style="..." class="...":) no funciona del mateix mode que >>EstilWiki<<, només pot contenir un estil normal HTML i atributs de classe.

Els atributs HTML "class" i "style" per a taules i divisions

Els estils wiki només són les ordres entre %...% signes de percentatge.

Tables, Table directives i els blocs de divisió (:div:) permeten a les autores més avançades incorporar atributs HTML/CSS class= i style=. Noteu que aquests atributs no són Estils Wiki, per a usar-los cal tenir coneixements de CSS.

(:table style="font-style:italic; color:green; border:1px solid blue; background-color:#ffffcc":)
(:cellnr:)
Quelcom posterior a la línia de dalt es formatarà amb cursiva i color verd,

Açò inclou
    text amb pre-format %red%color roig%%
* llistes
-> elements sagnats
(:tableend:)

    text amb pre-format color roig

Fixeu-vos que la directiva (:div style="..." class="...":) no funciona del mateix mode que >>EstilWiki<<, només pot contenir un estil normal HTML i atributs de classe.

Àlies d'estil personalitzats

Es pot usar l'atribut define= per definir un àlies (o drecera) a qualsevol estil wiki. Posteriorment es pot tornar a usar aquest àlies per a especificar altres estils wiki.

%define=box block bgcolor=#ddddff border="2px dotted blue"%

%box% [@ací un text aleatòri@]

%box font-weight=bold color=green% [@ací un text aleatòri@]

Àlies d'estil predefinits

PmWiki defineix algunes àlies per als estils.

• Color del text: %black%, %white%, %red%, %yellow%, %blue%, %gray%, %silver%, %maroon%, %green%, %navy%, %purple% (àlies per a %color=...%)
• Justificació: %center% i %right%
• Imatges i capses
  • Flotant a esquerra o dreta: %rfloat% i %lfloat%
  • Elements emmarcats: %frame%, %rframe%, i %lframe%
  • Mida de miniatura: %thumb%
• Obre l'enllaç a una finestra nova: %newwin% (àlies per a %target=_blank%)
• Comentaris: %comment% (àlies per a %display=none%)
• Llistes ordenades: %decimal%, %roman%, %ROMAN%, %alpha%, %ALPHA% (vegeu també Cookbook:OutlineLists)

Atributs dels estils wiki

Els atributs d'estil reconeguts a dintre d'una especificació d'estil wiki són:

    ------------ CSS -------------          --HTML--
    color               bgcolor             class 
    background-color    margin              id
    text-align          padding             hspace
    text-decoration     border              vspace
    font-size           float               target
    font-family         list-style          rel
    font-weight         width*              accesskey
    font-style          height*             value
    display

    Especials: define, apply

Els atributs de les dos primeres columnes corresponen a les propietats CSS amb el mateix nom. Els atributs de l'última columna només s'apliquen a elements específics:

• class= i id= assignen una classe o identificador CSS a un element HTML
• target=nom obri el subsegüent enllaç a una finestra del navegador anomenada "nom"
• rel=nom identifica la relació de la pàgina de destí d'un enllaç
• accesskey=x usa 'x' com una drecera de teclat per al subsegüent enllaç
• value=9 estableix el número per a l'ítem actual de la llista ordenada

Habilitar els estils

Un administrador/a pot habilitar els estils que no estan llistats a dalt modificant el fitxer local/config.php. Per exemple per habilitar l'atribut "line-height" cal afegir la línia:

$WikiStyleCSS[] = 'line-height';

Definir l'abast d'altres elements HTML

Per poder aplicar estils wiki a altres elements HTML podeu afegir-los a $WikiStyleApply. Per exemple per a permetre donar format a les files de les taules o a les àncores, etc.

Per aplicar un format a les etiquetes d'àncora, afegiu al config.php:

$WikiStyleApply['link'] = 'a';

Aleshores, podeu aplicar una classe o estil a l'àncora:

%apply=link red%[[WikiStyles | enllaç de prova]]

O, per aplicar un atribut ID a una fila TR d'una taula, afegiu al config.php:

$WikiStyleApply['row'] = 'tr';

Aleshores, amb les taules avançades, podeu tenir:

(:cellnr:) %apply=row id=el_meu_id_estil bgcolor=pink% contingut de la cel·la

I també a les taules simples:

|| border=1
|| %apply=row id=el_meu_id_estil% 1 || 2 || 3 || 4 ||

Nota: l'estil %apply=row...% hauria d'estar a la mateixa línia que (:cellnr:).

Exemples

WikiStyleExamples? conté exemples per com usar els estils wiki.

Problemes coneguts

• Quan es defineixen estils, els símbols de percentatge (com: %block width=50% %) s'han de substituir per "pct". PmWiki convertirà el "pct" en "%" (CSS vàlid).
• Si especifiqueu múltiples valors per a un atribut, com ara bé border="2px solid blue" assegureu-vos de tancar els valors entre cometes.
• Assegure-vos d'usar lletres en minúscula per als colors RGB en hexadecimal, %color=#aa3333% funcionarà, %color=#AA3333% pot no funcionar.

Vegeu també

• CustomWikiStyles?
• PmWiki:List Styles Styles for use in wiki lists
• WikiStylesPlus

Traducció de PmWiki.WikiStyles - Pàgina original a PmWikiCa.WikiStyles - Rückverweise