autores (bàsic, avançat)
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.
| El cabàs conté pomes, mirtils, albergínies, 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%% !
| També voldria algunes 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.
| Aquesta frase conté 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.
| El text està centrat.
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
| Aquest text flota cap a la dreta
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:
| atribut apply | àlies | l'estil s'aplica a... |
|---|
%apply=img ...% | - | totes les imatges que segueixen fins que s'aplica un altre estil |
%apply=p ...% | %p ...% | el paràgraf actual |
%apply=pre ...% | - | el text amb pre-format actual |
%apply=list ...% | %list ...% | la llista actual |
%apply=item ...% | %item ...% | els item de la llista actual |
%apply=div ...% | - | el div actual |
%apply=block ...% | %block ...% | el bloc actual, sigui un paràgraf, una llista, un ítem d'una llista, un encapçalament o una divisió. |
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.
|
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 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.
| Després de la primera línia del paràgraf,
intentem aplicar 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.
| Tanmateix, aquest 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!
| - Ací hi ha un ítem d'una llista
- 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
>><<
|
Quelcom posterior a la línia de dalt es formatarà amb cursiva i color blau,
Açò inclou
text amb pre-format color roig
elements sagnats
|
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:)
| |
Quelcom posterior a la línia de dalt es formatarà amb cursiva i color verd,
Açò inclou
text amb pre-format color roig
elements sagnats
|
|
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@]
| ací un text aleatòri
ací un text aleatòri
|
Consell: Habitualment és aconsellable col·locar a la
capçalera del grup les definicions d'estil comunes, així es comparteixen entre les diferents pàgines del grup i és més fàcil introduir canvis als estils. Alternativament, l'
administrador/a? pot
predefinir? estils extensibles a tot el wiki (vegeu
CustomWikiStyles?).
Consell: Feu servir definicions d'estil comunes per associar el text amb el significat i no simplement amb un color. Per exemple, si els avisos s'han de mostrar en text de color verd, definiu
%define=avis green% i després useu al document
%avis% en lloc de
%green%. Així, si després decidiu que els avisos s'han de mostrar d'un mode diferent, és molt més fàcil canviar la definició (una) que totes les repeticions de
%green% al text.
Consell: Qualsevol estil wiki que no ha estat definit es tracta automàticament com una petició a una classe, així doncs %pre% és el mateix que %class=pre%.
À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
* Els atributs "width" i "height" tenen asteriscs perquè es gestionen de forma especial per a les etiquetes <img .../>. Si s'usen per si sols (i.e., sense que res passi el paràmetre "apply=" a l'estil wiki), aleshores estableixen els atributs 'width=' i 'height=' de qualsevol etiqueta <img ... /> que vagi després. Si no és així, estableixen les propietats 'width:' i 'height:' de l'element on s'aplica el format.
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]]
| 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é
Traducció de PmWiki.WikiStyles -
Pàgina original a PmWikiCa.WikiStyles -
Backlinks
