Estils wiki

< Directives per a taules | Índex de la documentació | WikiStylesExamples? >

autores (bàsic, avançat)

Taula de continguts

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àliesl'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
  • llistes
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
  • llistes
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é

< Directives per a taules | Índex de la documentació | WikiStylesExamples? >


Traducció de PmWiki.WikiStyles - Pàgina original a PmWikiCa.WikiStyles - Référencé par