Ajuda:Estil personalitzat

De la Viquipèdia, l'enciclopèdia lliure

Un usuari registrat pot personalitzar les fonts de text, colors, localització d'enllaços de navegació i moltes altres coses! Això es fa a través de fulls d'estil en cascada (CSS) personalitzats i desats en subpàgines d'usuari.

Tingueu en compte que quan s'utilitza aquesta funció a la Viquipèdia, el full d'estil personalitzat és en una pàgina visible per tothom i, per tant, l'usuari la publica sota la llicència GFDL.

Per a l'aparença per defecte monobook, per exemple, creeu la pàgina Especial:Mypage/monobook.css on podeu posar les modificacions de CSS que desitgeu utilitzar.

General[modifica]

Nota: En la configuració per defecte, s'ignorarà qualsevol codi d'estil personalitzat. Per habilitar-lo cal definir les següents variables a LocalSettings.php: 

$wgAllowUserJs  = true;
$wgAllowUserCss  = true;

Per a cada estil definible per l'usuari, se selecciona una aparença i s'importa el Full d'Estil en Cascada (CSS) corresponent. Per a cada aparença, l'usuari pot fer diverses eleccions quant a fonts, colors, posicions d'enllaços, etc. Els CSS s'especifiquen en referència a selectors: elements HTML, classes i identificadors especificats en el codi HTML. Consegüentment, les possibilitats per a cada aparença es poden trobar veient el codi font HTML d'una pàgina, en particular mirant les classes i identificadors: quants més n'hi ha, més versàtil és.

Els CSS per defecte per a totes les aparences és a MediaWiki:Common.css i el JavaScript per defecte (en aquest wiki) prové de wikibits.js més alguns arxius especials per a IE i MediaWiki:Common.js (vegeu la font HTML de qualsevol pàgina; el JavaScript es pot veure amb l'URL <//ca.wikipedia.org/w/index.php?title=-&amp;action=raw&gen=js>).

Altres pàgines CSS i JS es troben separades per aparences. Per exemple, a MetaWiki les pàgines CSS per defecte són

i aquí a la Viquipèdia en català tenim:

Els arxius per a una aparença donada en el directori style probablement són iguals a cada projecte. El nom del directori style es selecciona en la instal·lació, vegeu mw:Manual:LocalSettings.php#Stylesheet_Location.

En l'aparença monobook podeu canviar qualsevol aspecte especificat a monobook/main.css i MediaWiki:Monobook.css o similar utilitzant el vostre propi JavaScript o CSS. Els canvis són en subpàgines d'usuari que es poden trobar, per exemple per monobook, amb els enllaços Especial:Mypage/monobook.css i Especial:Mypage/monobook.js.

Per un altre exemple, també podeu canviar l'aparença Clàssic: les vostres subpàgines s'haurien d'anomenar Usuari:nom_d'usuari/standard.css i Usuari:nom_d'usuari/standard.js (i de forma similar per altres aparences).

Poseu els CSS o JS en aquelles pàgines. La previsualització de JS no funciona, i la de CSS funciona d'una forma especial: permet veure els marges de la pàgina (no el contingut) sobre la base de la informació d'estil a la pàgina, a condició que l'aparença utilitzada sigui l'aparença aplicable a la pàgina. Això té unes quantes limitacions, p. ex. un pot previsualitzar els enllaços del marge - però hi pot haver altres tipus que un voldria comprovar. Després de desar, estant a la mateixa pàgina o a qualsevol altra, feu una recàrrega d'actualització (shift-reload/ctrl-f5) per obtenir la nova configuració.

La font HTML conté línies com 

<script type="text/javascript"
src="/w/wiki.phtml?title=Usuari:&{{username}}/standard.js&amp;action=raw&amp;ctype=text/javascript">
</script>
@import "/style/wikistandard.css";
@import "/w/wiki.phtml?title=Usuari:&{{username}}/standard.css&action=raw&ctype=text/css";

per als CSS de tot el projecte en l'aparença particular (en aquest cas referits a wikistandard.css) i els CSS i JS personals per a una aparença particular.

Així el servidor proporciona els enllaços HTML als fitxers CSS i JS però no fa cap interpretació del seu contingut. Per això, per exemple, [[a]] no és interpretat com a enllaç. La interpretació és feta pel navegador, depenent de les seves capacitats i configuracions.

Per a MySkin no hi ha un main.css aplicable. La pàgina css personal aplicable és Usuari:nom_d'usuari/myskin.css (tot en minúscules!).

CSS[modifica]

CSS en subpàgines d'usuari o en un fitxer local[modifica]

A més a més, o alternativament, es pot posar un CSS local al navegador. Si un utilitza diferents navegadors, es pot posar un CSS diferent a cadascun. Cada un s'aplica a tota la xarxa web, no només a un projecte de MediaWiki (i no depèn d'estar registrat). Tanmateix, una configuració només afecta altres pàgines web si utilitzen el mateix selector CSS; p. ex. una definició per al selector a.extiw afecta menys pàgines a la web que un per a h2 (però afecta com a mínim tots els projectes de MediaWiki, no només un).

Per a línies de CSS que haurien de ser diferents en diferents projectes de MediaWiki, p. ex. per a un color de fons diferent per a distingir-los fàcilment, clarament el CSS local no es pot utilitzar; com a mínim aquestes línies s'haurien de posar a les subpàgines d'usuari.

Alguns ordinadors, per exemple en cafès internet, no permeten als usuaris posar preferències pel navegador. En aquest cas les subpàgines d'usuari permeten establir un estil personal.

Quan s'ha posat al navegador l'opció d'ignorar la mida de font especificada en la pàgina web o CSS extern, les línies de CSS sobre la mida de font s'han de posar en el CSS local.

Selectors CSS[modifica]

Els selectors CSS, expressats en termes d'elements, classes i identificadors id, més rellevants per a l'estil del cos de pàgina s'inclouen a continuació. Quan és possible es posen exemples que mostren el resultat per a la configuració d'estil actual:

  • :link - enllaços - exemple: Ajuda:guia d'ús; per defecte: ajuda:guia d'ús (vegeu a o :link)
  • :link:link
  • :link:visited
  • :link#contentTop
  • :link.external - http://exemple; per defecte: http://exemple
  • :link.extiw – enllaç interwiki en el cos de la pàgina - en:example; per defecte: en:example
  • :link.image – enllaç des d'un fitxer a la pàgina de descripció del fitxer
  • :link.internal – enllaç al fitxer mateix (Media:), i enllaç des d'una miniatura a la pàgina de descripció del fitxer - Media:exemple
  • :link.new exemple; per defecte: exemple
  • .allpagesredirect - abc - redireccions a Especial:Allpages i Especial:Prefixindex
  • body.ns-0, ..., body.ns-15 (espais de noms)
  • div#bodyContent
  • div#column-content
  • div#editsection
  • div#globalWrapper
  • div#tocindent
  • div.tocline
  • h1.firstHeading
  • h2
  • h3
  • img.tex TeX image
  • small - exemple
  • table.toc

Els enllaços interns normals no són en la classe internal (hi eren i encara s'hi poden trobar en llocs que utilitzin una versió vella dels programari, p.ex. [1]); es poden definir amb :link i :link:visited, en general, i després posar excepcions a l'estil general amb :link.extiw etc.

Per enllaços entre llengües:

  • #p-lang a

També es pot fer que l'estil depengui del valor d'un atribut, p.ex. amb els selectors

  • :link[title ="Usuari:nom d'usuari"]
  • :link[title ="nom de pàgina"]
  • :link[href ="url completa"]

per codificar amb colors o ressaltar usuaris particular (incloent-hi un mateix) o enllaços a determinades pàgines (com la negreta de les pàgines vigilades als Canvis Recents). Això funciona amb Opera però no amb IE. Vegeu també Ajuda:Vigilar pàgines#CSS.

La llista de seguiment i el canvis recents utilitzen dues classes:

  • autocomment
    exemple
  • new (vegeu més avall)

La pàgina d'historial té les classes autocomment i:

  • user
  • minor

Així la font especificada per user s'aplica a la pàgina d'historial, però no en la llista de seguiment o els canvis recents.

Edició de pàgina[modifica]

  • Caixa d'edició: textarea#wpTextbox1
exemple1
  • Caixa de resum de l'edició: input#wpSummary
exemple2

Blocs d'estil essencials[modifica]

Vegeu m:Customization:Explaining_skins#Major_style_blocks_by_name

No mostrar[modifica]

Un estil extrem per a un text o imatge és no mostrar-lo amb 

.''classname'' {display: none}
#''id'' {display: none}

etc.

No funciona per a enllaços (però es poden posar en una font molt petita).

Una aplicació és l'ús d'una clau d'ordenació amagada en una taula ordenada.

No es pot utilitzar per treure text en expressions per a noms de plantilla, noms de paràmetres, valors de paràmetres, noms de pàgina enllaçada, etc.

A Meta m:MediaWiki:Common.css conté 

".hiddenStructure {display: none}".

Com a resultat p<span class="hiddenStructure">q</span>r dóna pqr.

Encara que això s'utilitzava com a solució abans de que hi hagués funcions parser, és una mostra de que hi pot haver contingut que per defecte estigui amagat, però que es pot mostrar als usuaris que ho defineixin específicament, vegeu els possibles valors de "display", p. ex.:

  • .hiddenStructure {display: inline}
  • .hiddenStructure {display: block}

Exemples:

p<span style="display:inline">q</span>r dóna pqr
p<span style="display:block">q</span>r dóna pqr

Mentre que "display: none" no produeix res, "visibility: hidden" produeix espais en blanc en substitució del contingut; el seu contrari és "visibility: visible".

Exemple:

p<span style="visibility: hidden">q</span>r dóna pqr

Estil depenent d'un paràmetre o variable[modifica]

Classe o id variable[modifica]

Una classe o id poden dependre del resultat produït per una plantilla o d'un paràmetre de plantilla, p. ex. class="abc{{{1|def}}}". Es pot definir l'estil d'una classe per a un o més dels noms possibles de la classe. Si la classe resta indefinida s'ignorarà i s'utilitzarà l'estil estàndard.

En el cas més simple tenim p. ex. class="abc{{{1}}}" i la classe abcdef definida. S'aplicarà si el valor del paràmetre és "def".

Si una pàgina per a l'ús general només té sentit quan es defineixen estils per certes classes, llavors aquestes s'han d'especificar a la pàgina MediaWiki:Common.css que s'aplica a tots els usuaris i totes les aparences, fins on no invalidat.

Un exemple d'aplicació és a m:Template:M to ft css.

Nom d'atribut HTML variable[modifica]

Un nom d'atribut HTML es pot fer variable. HTML Tidy treu atributs amb noms invàlids en la banda del servidor, així el resultat no depèn de la capacitat d'un navegador en ignorar noms d'atribut invàlids, i la quantitat de dades enviades es redueix. Per a una variable amb possibles valors "class", vegeu w:en:Wikipedia:HiddenStructure i w:en:Template:Infobox.

Valor de paràmetre d'estil variable[modifica]

Un text wiki com 

<span style="display:{{{3|none}}}">Wed</span>

mostra "Wed" si el paràmetre 3 està definit, i no és "none", i no mostra res si el paràmetre 3 no està definit o és "none". Si el valor del paràmetre 3 és un estil vàlid per "display", llavors s'aplicarà aquest estil.

Mostres[modifica]

/* fa el fons darrera l'àrea de contingut i les pestanyes amb gris clar */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }

/* fixa la imatge del fons per a que no es desplaci amb l'àrea de contingut */
body { background-attachment: fixed; }

/* substitueix el llibre del fons per una altra cosa */
body { background: Purple; }

/* canvia el fons de l'emmarcat amb pre */
pre { background: White }

/* canvia el logo */
#p-logo a { background: url(http://en.wikipedia.org/upload/wiki.png) 35% 50% no-repeat !important; }

/* treu el logo i en el seu lloc mou les caixes amunt */
#p-logo { display: none }
#column-one { padding-top: 0; }

/* elimina la icona de persona junt al nom d'usuari */
li#pt-userpage { background: none }

/* utilitza les preferències del navegador per a la mida i font de text */
body, #globalWrapper { font: inherit !important; }

/* subratlla sempre els enllaços */
:link { text-decoration: underline; }

/*Mostra el cos del contingut en una columna més estreta per llegir-lo millor */
/*ajusteu els percentatges com desitgeu*/
div#bodyContent {
  width: 50%;
  line-height: 105%;
}

/* canvia el fons de les pestanyes no seleccionades */
#p-cactions ul li a { background: #C7FDC7; }

/* canvia el fons de les pestanyes seleccionades */
#p-cactions ul li.selected a { background: white; }

/* canvia la vora de les pestanyes seleccionades */
#p-cactions li.selected { border-color: #aaaaaa; }

/* no treu les etiquetes al posar-se a sobre */
#p-cactions li a:hover { z-index: 0; text-decoration: none; }
#p-cactions li.selected a:hover { z-index: 3; }

/* estil de la caixa de cerca i els seus botons */
input.searchButton {
    background-color: #efefef !important;
    border: 1px outset !important;  
}
#searchInput { border: 1px inset !important; }

/* colors estàndard pels enllaços */
:link { color: #0000FF; }
:link:visited { color: #7F007F; }
:link:active, :link.new { color: #FF0000; }
:link.interwiki, :link.external { color: #3366BB; }
:link.stub { color: #772233; }

/* posa barra de desplaçament en les seccions pre en lloc de tallar o sobreposar amb Firefox */
pre { overflow: auto; }

/* tatxa l'enllaç Carrega un fitxer com a recordatori de que s'ha de carregar a Commons */
li#t-upload { text-decoration: line-through; }

Cantons arrodonits amb Mozilla[modifica]

/* fa alguns cantons arrodonits, per ara només funciona amb navegadors moz/firefox/other gecko */
#p-cactions ul li, #p-cactions ul li a {  
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
}
#content { 
  -moz-border-radius-topleft: 1em; 
  -moz-border-radius-bottomleft: 1em;
}
div.pBody {
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomright: 1em;
}

/* el mateix seguint les especificacions css3 draft specs, navegadors a comprovar */
#p-cactions ul li, #p-cactions ul li a {  
  border-radius-topleft: 1em;
  border-radius-topright: 1em;
}
#content { 
  border-radius-topleft: 1em;
  border-radius-bottomleft: 1em;
}
div.pBody {
  border-radius-topright: 1em;
  border-radius-bottomright: 1em;
}
Enllaços de cantons i pestanyes arrodonits[modifica]

Trucs d'impressió[modifica]

/*
** Posa totes les regles específiques d'impressió en un bloc @media print.
*/

/* estalvia tinta i paper amb fonts més petites */
@media print {
    #footer,
    #content,
    body { font-size: 8pt !important; }
    h1 { font-size: 17pt }
    h2 { font-size: 14pt }
    h3 { font-size: 11pt }
    h4 { font-size: 9pt }
    h5 { font-size: 8pt }
    h6 { 
        font-size: 8pt;
        font-weight: normal;
    }
}

/* Coses avançades: utilitzant :before i :after és possible afegir un format 
aquest d'aquí afegeix l'href sencer després d'un enllaç (no necessari en la versió actual): */
@media print {
  #content a:link:after, 
  #content a:visited:after {
     content: " ( " attr(href) " ) ";
  }
}

Fer una barra d'eines d'usuari a la barra lateral[modifica]

Comprovat el funcionament amb Camino, Safari i Internet Explorer 7. 

/* Transforma la barra d'eines d'usuari en una barra lateral */
#p-personal {
    position:relative;
    z-index:3;
    width: 11.6em;
}

#p-personal .pBody {
    width: 11.6em;
    border: none;
    margin: 0 0 0.1em 0em;
    float: none;
    overflow: hidden;
    font-size: 95%;
    background: White;
    border-collapse: collapse;
    border: 1px solid #aaaaaa;
    padding: 0.3em 0.5em 0.3em 0.3em;
}

#p-personal ul {
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url("/style/monobook/bullet.gif");

    font-size:95%;
    margin: 0 0 0 1.5em;
    padding:0;
    text-align:left;
    text-transform: none;
}

#p-personal li {
    display: list-item;
    padding:0;
    margin: 0 0 0 0;
    margin-bottom: 0.1em;
}

/* suprimeix la icona de persona el vostre nom d'usuari i d'IP anònima */
/* necessari si no està ja fet */
li#pt-userpage { background: none }
li#pt-anonuserpage { background: none }

Vegeu el monobook main.css per a tots els estils en ús per defecte.

Fixar la posició de la barra lateral al desplaçar-se[modifica]

Barra lateral que queda fixa quan us desplaceu per la pantalla

L'aparença Colònia blava té una opció per a una barra flotant a l'esquerra, que fa que els enllaços de navegació i caixes d'eines quedin a la mateixa posició de la pantalla quan la desplaceu. Per la mateixa funcionalitat amb l'aparença Monobook (en Mozilla) vegeu m:Help:User style/floating quickbar

Moure els enllaços de categories[modifica]

Mou els enllaços de categories al cantó dret superior de l'àrea de contingut, i els mostra en gris. 

/******************************************************************/
/* moure enllaços de categoria a la dreta                         */
/******************************************************************/

/* mou la caixa d'enllaços de categories */
#catlinks {  
  position:absolute;
  z-index:1;
/*  border: 1px solid #aaaaaa; 
  background: #fafaff; */
  right:1em; 
  top:-0.25em;
  width:10.5em;
  float:right;
  margin: 0.2em;
  padding:0.2em;
}

/* format dels enllaços */
p.catlinks {
  color: #aaaaaa;
  font-family: Verdana,sans-serif;
  font-size:67%;
  line-height: 1.5em;
  text-align:left;
  text-indent:0;
  text-transform: none;
  white-space:normal;
  margin: 0.2em;
}

#p-personal h5 {
    display: inline;
}

/* format dels enllaços en la caixa */
p.catlinks a {
  color:#888888;
}

Estil de la pàgina de diferències[modifica]

/* no utilitzar una font petita */
td.diff-addedline, td.diff-deletedline, td.diff-context { font-size: 100% };

/* subratlla només el text que és diferent */
span.diffchange { text-decoration:underline; }

Enllaços externs sobre css[modifica]

JavaScript[modifica]

El JavaScript té moltes possibilitats, per exemple afegir text, incloent-hi enllaços, en les posicions desitjades. Aquest contingut afegit pot dependre del contingut de la pàgina de font HTML produïda pel servidor; per exemple pot dependre d'elements HTML amb un ID, aplicant getElementById. La posició d'inserció pot ser especificada per insertBefore.

Requeriments del sistema[modifica]

La personalització del JavaScript exigeix que el seu administrador del wiki posi una variable de configuració a LocalSettings.php: 

 $wgAllowUserJs = true;

A partir de MediaWiki 1.6.3 si personalitzeu una pàgina d'usuari JavaScript com monobook.js no es mostra cap missatge d'advertència en el cas que el Wikipedia estigui configurat per impossibilitar JavaScript d'usuari. Aparentment el millor mètode per determinar-ho és comprovar el LocalSettings.php del vostre servidor MediaWiki si teniu els drets d'accés per fer-ho, o provar d'afegir algun JavaScript personalitzat per veure si funciona. L'extensió Firefox Web Developer conté una funció "information | view JavaScript" que és convenient per comprovar quin JavaScript ha carregat el Firefox o no. La Viquipèdia en català està configurada amb el JavaScript d'usuari habilitat.

Duplicar els enllaços d'edició al final de l'àrea de contingut[modifica]

Vegeu m:Help:User style/bottom tabs

Canviar les tecles d'accés[modifica]

Ara estan definides amb JS, i les podeu personalitzar fàcilment canviant alguns elements en la matriu 'ta' (vegeu [2]). Línia d'exemple: 

ta['ca-nstab-main'] = new Array('c','View the content page');

La tecla d'accés és el primer valor de la matriu. Un exemple que canvia aquesta tecla a '0': 

ta['ca-nstab-main'] = new Array('0','View the content page');

Com que alt-d és també una drecera a la barra d'adreces en molts navegadors, podeu desactivar la drecera alt-d per esborrar (Delete), posant-la buida d'aquesta forma: 

 ta['ca-delete'] = new Array('','Delete this page');

Les tecles per a dreceres d'accés són en els corresponents JavaScript per a cada aparença. Per exemple, les tecles per Monobook són en la pàgina (protegida) MediaWiki:Monobook.js.

Moure les categories al principi[modifica]

El següent codi mou la caixa de categories al principi de l'article. També podeu aplicar alguns CSS per canviar el format: 

 function catsattop() {
   var cats = document.getElementById('catlinks');
   var bc = document.getElementById('bodyContent');
   bc.insertBefore(cats, bc.childNodes[0]);
 }

Una alternativa que, associada amb un estil apropiat, posarà el text amunt sobre la mateixa línia que el títol: 

function categoryToTop() {
  var thebody = document.getElementById('contentTop');
  var categories = document.getElementById('catlinks');

  if (categories != null) {
    categories.parentNode.removeChild (categories);
    thebody.parentNode.insertBefore(categories, thebody);
  }
}

Alguns CSS que poden anar amb això... 

/* mou la caixa de categories */
#catlinks {  
  right:1em; 
  top:-0.25em;
  max-width: 50%; /* limita la mida de la caixa, però no estrictament */
  float: right;
  margin: 0.5em;
  padding: 0.2em;
}

/* format dels enllaços */
p.catlinks {
  font-size:67%;
  text-align:left;
  text-indent:0;
  text-transform: none;
  white-space:normal;
  margin: 0.2em;
}

Desafortunadament, si la caixa de categoria és gran (amb moltes categories), pot empènyer una infotaula. Per corregir-ho es pot afegir l'atribut "clear: right" a la infotaula.

Variables[modifica]

Variables produïdes pel sistema (amb valors d'exemple): 

var skin = "monobook";
var stylepath = "/skins-1.5";
var wgArticlePath = "/wiki/$1";
var wgScriptPath = "/w";
var wgServer = "http://ca.wikimedia.org";
var wgCanonicalNamespace = "Help";
var wgCanonicalSpecialPageName = false;
var wgNamespaceNumber = 12;
var wgPageName = "Ajuda:Estil_personalitzat";
var wgTitle = "Estil personalitzat";
var wgAction = "view";
var wgArticleId = "318621";
var wgIsArticle = true;
var wgUserName = "Patrick";
var wgUserGroups = ["sysop", "*", "user", "autoconfirmed", "emailconfirmed"];
var wgUserLanguage = "ca";
var wgContentLanguage = "ca";
var wgBreakFrames = false;
var wgCurRevisionId = "2925951";

Enllaços externs sobre JS[modifica]

Vegeu també[modifica]


[modifica] Ajuda específica de la Viquipèdia


Vegeu Viquipèdia:Ajuda

Obtingut de «https://ca.wikipedia.org/w/index.php?title=Ajuda:Estil_personalitzat&oldid=23231093»