more wikis
 

Ayuda:Personalizar la piel Monaco

De Ayuda de Wikia

Esta página habla sobre la piel Monaco, que es la piel actual de Wikia.
  • Puedes encontrar más sobre las pieles de Wikia en Ayuda:Pieles.

Como personalizar la piel Monaco. Para características de esta piel, ver Help:Características de la piel Monaco.

Ver también Help:Ejemplos de pieles Monaco personalizadas.

Subir un logo

Añadiendo un logo, darás a tu wiki un aspecto único. Crea y sube un logo:

  1. Crea un logo en alguno de los programas de edición gráfica y asegúrate de que:
    • el tamaño es de 135 pixels de ancho por 155 pixels de alto
    • lo guardas como un archivo .png (eres libre de usar transparencias en tu logo)
  2. Sube el logo con el nombre Wiki.png.
Aquí hay algunos logos bastante buenos:
Image:Monaco_wookielogo.png Image:Monaco_marveldblogo.png Image:Monaco_dofuslogo.png Image:Monaco_muppetwikilogo.png

Contenido

Personalizar el Navegador

La piel de Wikia, Monaco, tiene un navegador que puede ser completamente personalizado. el navegador está dividido en dos secciones: el Main Navigation (Navegador Principal), que tiene varios niveles, y el dos-columnas Link Toolbox (Caja de Vínculos).

  • Para administradores - tú puedes configurar el navegador predefinido que verá todo el mundo editando unos pocos artículos del espacio de nombres MediaWiki.
  • Para usuarios - tú puedes configurar un navegador personalizado para tí mismo editando solamente unas pocas sub-páginas de tu usuario.

Main Navigation (Navegador Principal)

  • Administradores' - Para personalizar el menú del navegador principal, justo debajo de la caja de búsqueda, editad la página MediaWiki:Monaco-sidebar. Hasta que tú pongas tus propios valores para Monaco-sidebar en tu propio wiki, nosotros usaremos los valores por defecto desde la página en Messaging: http://messaging.wikia.com/wiki/MediaWiki:Monaco-sidebar/es (esta página por defecto puede ser cambiada solamente por el staff de Wikia).
  • Usuarios - Para personalizar el menú del navegador principal, justo debajo de la caja de búsqueda, editad la página User:<tu_nombre_de_usuario_aquí>/Monaco-sidebar (Special:Mypage/Monaco-sidebar). Para tenerlo más claro mira User:Johnq/Monaco-sidebar, y crea tu propio navegador principal.


Cada asterisco representa un nivel en la jerarquía del menú. En este ejemplo, los tres nombres que se mostrarán en el sidebar al principio son "Superheroes Wiki", "Personajes" y "Comics".
Tras los "Personajes" se abrirá una segunda lista en el menú, "Héroes" y "Villanos". Los artículos sobre Superman, Batman, y Spider-man serán encontrados dentro del submenú de "Heroes".
Los nombres del menú se vincularán automáticamente a sus respectivos artículos. Si quieres especificar un texto diferente en el menú, primero usa el nombre del artículo, seguido de una barra (|), y a continuación pon el nombre que quieres que se muestre. Puedes usar mensajes de MediaWiki también (ver 'Special:allmessages en tu wiki). 
     * mainpage | Superheroes Wiki
     * #popular# | Editor's pick    (ver la sección de debajo, "palabras mágicas")
     * Categoría:Personajes | Personajes
     ** Categoría:Héroes | Héroes
     *** Superman
     *** Batman
     *** Spider-Man
     ** Categoría:Villanos | Villanos
     *** Lex Luthor
     *** Penguin
     *** Duende Verde
     * Categoría:Comics | Comics
     ** DC Comics
     ** Marvel Comics
     * #category-minorcharacters#   (ver la sección de debajo, "palabras mágicas")
Menú Pricipal - Palabras Mágicas
Además de todo eso, nosotros hemos añadido unas pocas "palabras mágicas" que puedes usar en el Navegador Principal. Las palabras mágicas son las siguientes:
  • #category1# = Crea un menú que muestra el nombre de la categoría con el mayor número de artículos, muestra el top 7 de las páginas de esa categoría, y tiene el vínculo de "ver más..." para ver la página de esa categoría.
  • #category2# = Como en en anterior caso, pero para la categoría segunda con mayor número de artículos.
  • #category-<nombre_de_la_categoría_aquí># = puedes especificar el nombre de una categoría específica ( #category-superheéroes#, por ejemplo).
  • #popular# = Esta palabra hará que aparezca una lista con artículos que el administrador puede poner para que se agranden. Puedes añadir artículos a esta lista aquí: Special:Mostpopulararticles. Si no hay entradas en esta página (o el número de entradas es inferior a siete entradas), el resto de la lista será automaticamente rellenada con los artículos con mayor tráfico del wiki.
  • #visited# = una lista de los artículos con mayor tráfico del wiki.
  • #voted# = una lista con los artículos mejor situados por votos.
  • #newlychanged# = artículos que han sido recientemente cambiados.
  • #topusers# = una lista de los usuarios destacados.
Nota: Para las palabras mágicas #category1# y #category2#, las categorías que tengan ciertas palabras claves podrán ser excluidas de las listas de #category1# y #category2#. Aquí hay una lista de las palabras clave que nosotros excluimos: Image/images, Stub/stubs, Screenshot/screenshots, Screencap/screencaps, Article/articles, Copy edit, Fair use, /files, Panel/panels, Redirect/redirects, Template/templates, Delete/deletion, TagSynced. Para perfeccionar el filtro nosotros filtraremos las palabras en otros idiomas como método para elegir automáticamente categorías relevantes y excluir las irrelevantes. Si tú quieres que específicamente una categoría que tenga una de esas palabras clave aparezca en el navegador principal, usa #category-<nombre_de_la_categoría_aquí># y remplaza el "<nombre_de_la_categoría_aquí>" con el nombre de la categoría que quieras.
Si quieres incluir una categoría con un espacio en el nombre, ejemplo: "Wikia Widgets", remplaza el espacio con un guión bajo, ejemplo #category-Wikia_Widgets#.

Link Toolbox (Caja de Vínculos)

  • Administradores - Para personalizar la caja de vínculos, que aparece bajo el navegador principal, edita la página MediaWiki:Monaco-toolbox en tu propio wiki.
  • Usuarios - Para personalizar la caja de vínculos, que aparece bajo el navegador principal, edita la página User:<tu_nombre_de_usuario_aquí>/Monaco-toolbox (Special:Mypage/Monaco-toolbox). Por ejemplo, User:Johnq/Monaco-toolbox, y crea tu propia caja de vínculos.


Hasta que rellenes con tus propios valores el artículo de Monaco-toolbox en tu propio wiki, usaremos valores por defecto puestos en la página de Messaging: http://messaging.wikia.com/wiki/MediaWiki:Monaco-toolbox/es (esta página por defecto podrá ser cambiada solamente por el staff de Wikia).

Lista por defecto: 

* upload-url|Subir imagen
* specialpages-url|Páginas especiales
* helppage|Ayuda
* recentchanges-url|Cambios recientes
* randompage-url|Página aleatoria
* whatlinkshere|Qué enlaza aquí

Estos vínculos especiales estarán para que no veas un espacio en blanco. El vínculo especial "Qué enlaza aquí" es único porque está hecho para que se incorpore a la página en la que se vea.

Todos los otros en la lista por defecto pueden ser fácilmente remplazados con un nombre equivalente que encuentres en la lista de Special:Specialpages.

La listad de vínculos es automáticamente separada en dos columnas. La primera mitad de la lista comienza en la columna izquierda y la segunda mitad en la columna derecha. El formato de los vínculos es como en el menú anterior. No puedes usar comentarios en esta lista.

Lista de ejemplo: 

* Forum:Index                 |Foro
* Help:Contents               |Ayuda
* m:Help                      |Meta ayuda
* http://irc.wikia.com        |Ayuda directa
* w:Wikia:Statistics          |Estadísticas
* Special:WidgetDashboard     |Tablero
* Special:Preferences         |Preferencias
* Special:Specialpages        |Páginas especiales
* whatlinkshere               |Qué enlaza aquí
* Special:Recentchanges       |Cambios recientes
* Special:MultipleUpload      |Subida múltiple de archivos
* Special:Search              |Búsqueda avanzada

Puedes evitar tener vínculos demasiado grandes que consuman dos líneas en la caja de vínculos si tú:

  • eliges nombres cortos u
  • organizas todos los nombres que sean cortos en la primera mitad de la lista y todos los largos en la segunda mitad
    • Este segundo punto beneficia más a los Administradores que a los lectores/contribuyentes normales porque de los tres vínculos especiales que mostramos abajo, los dos más largos serán añadidos a la izquierda mientras que el corto será añadido a la columna de la derecha.

Automaticamente añadimos tres vínculos especiales a esta lista para las páginas de usuario, las páginas de discusión del usuario, y las páginas del perfil del usuario (esta última para wikis que tengan herramientas sociales añadidas). Los vínculos son:

  • Contribuciones del usuario
  • Enviar e-mail al usuario
  • Bloquear usuario
    • Bloquear usuario solo se mostrará a los administradores.

Personalizar los colores

Colores "prefabricados" para personalizar

Os hemos provisto con algunas opciones prefabricadas para cambiar el color de Monaco. Cualquiera puede ir a sus preferencias, seleccionar la etiqueta de apariencia, y escoger uno de los colores prefabricados para Monaco. Además, los administradores pueden cambiar el color por defecto mostrado a todos los usuarios de la piel Monaco en las "Opciones de Administración", en el botón Preferencias y después Apariencia (Esta sección solamente se mostrará si eres administrador de un wiki en particular).

Personalizar con un color propio

Para crear un tema personalizado para mostrar como predefinido para todos los usuarios, selecciona "Monaco Personalizado" en las opciones de administración y edita MediaWiki:Monaco.css para especificar tu CSS personalizado. El cambio más fácil de todos es especificar un nuevo color para "color1" y "color2". Cambiando estos dos valores tu wiki tendrá un estilo propio. 

.color1, .color1 a {
   background-color: Green;
   color:            White;
}

.color2 {
   background-color: PapayaWhip;
}


Más abajo encontrarás una guía para personalizar completamente el CSS.

Guía para la personalización completa

Editar los valores "color1" y "color2" (como describimos arriba) es la mejor forma de comenzar cualquier personalización. Esta guía te ayudará a personalizar tu wiki. Estos elementos pueden ser añadidos a MediaWiki:Monaco.css.

Si eres un administrador que busca personalizar su piel Monaco y no quieres que se muestre qué es lo que editas, intenta (siempre manteniendo al wiki con otra piel que no sea Monaco Personalizado):

Editar MediaWiki:Monaco.css no afectará a los visitantes hasta que la piel predefinida del wiki cambie a la versión de Monaco Personalizado. En ambos caso, recuerda dejar como piel predefinida Monaco hasta que termines de personalizar el tema y esté listo para mostrarse, entonces cámbialo a Monaco Personalizado.

Personalizando el encabezamiento

Hay algunos elementos únicos en el encabezamiento de arriba de Monaco. Esta sección te ayudará a personalizar el encabezamiento, el logo de Wikia, el menú de botones, y la cabina de widget.

Fondo del encabezamiento

El encabezamiento tiene un estilo inicialmente definido por el valor "color2". 

#wikia_header {
   background-color: red;
   border-color:     Black;
}
[[Archivo:{{{archivo}}}.png]]

Archivo: [[:Archivo:{{{archivo}}}.psd]]

Tamaño: {{{tamaño}}}

Logo de Wikia

Para personalizar el color del logo de Wikia, necesitarás bajarte la plantilla del logo de Wikia en Monaco, ajustar el color que quieras, y subir el archivo resultante a tu wiki.

Algunos ejemplos de encabezamientos personalizados están en la página Help:Personalizar la piel Monaco/Imágenes de encabezamientos. 

#wikia_logo {
   background-image: url(DIRECCIÓN_DE_TU_IMAGEN);
}
* html #wikia_logo {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='DIRECCIÓN_DE_TU_IMAGEN', sizingMethod='crop');
}


[[Archivo:{{{archivo}}}.png]]

Archivo: [[:Archivo:{{{archivo}}}.psd]]

Tamaño: {{{tamaño}}}

Menú de botones del encabezamiento

Como con el logo de Wikia, el menú de botones del encabezamiento tiene gráficos que pueden ser personalizados con un editor de imágenes.

Algunos ejemplos de encabezamientos personalizados están en la página Help:Personalizar la piel Monaco/Imágenes de encabezamientos. 

.headerMenuButton dt, .headerMenuButton dd {
   background-image: url(DIRECCIÓN_DE_TU_IMAGEN);
}
* html .headerMenuButton dt, * html .headerMenuButton dd  {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='DIRECCIÓN_DE_TU_IMAGEN', sizingMethod='crop');
}


Menús del encabezamiento

Los menús del encabezamiento tienen una pequeña parte transparente. Las propiedades de transparencia están incluidas en el código de ejemplo de debajo. El estilo del menú del encabezamiento está inicialmente Definido por el valor "color1". 

.headerMenu, .headerMenu a {
   background-color: red;
   color:            White;
   -moz-opacity:     .95;
   opacity:          .95;
}

Cabina de Widgets 

#widget_cockpit {
   background-color: red;
}

Franja del fondo

La franja del fondo es el fondo que se muestra justo debajo del encabezamiento que muestra el logo del wiki. 

#background_strip {
   background-color: red;
}

La franja del fondo también contiene dos divs que pueden ser usados para acentuar los gráficos. Los divs están posicionados ya en la franja, así que solo tienes que poner una imagen de fondo, un ancho, una altura y situarlo en cualquier posición. 

#accent_graphic1 {
   background-image: url(DIRECCIÓN_DE_TU_IMAGEN);
   height: 155px;
   width: 300px;
}

#accent_graphic2 {
   background-image: url(DIRECCIÓN_DE_TU_IMAGEN);
   height: 155px;
   width: 1000px;
   top: 20px;
   right: 20px;
}

Personalizando los Widgets

Todos los widgets comparten el valor "widget". Al modificar este valor, todos los widgets se verán afectados. 

.widget {
   background-color: red;
}

Encabezamiento del Widget

El encabezamiento del widget tiene un estilo inicialmente definido por el valor "color1". 

.widget dt {
   background-color: red;
}

Caja de búsqueda

Una sutil tonalidad es automáticamente añadida al color de fondo de la caja de búsqueda. Para quitar esta tonalidad, pon background-image: none. El estilo de la caja de búsqueda es inicialmente definido por el valor "color1". 

#search_box {
   background-color: red;
}
[[Archivo:{{{archivo}}}.png]]

Archivo: [[:Archivo:{{{archivo}}}.psd]]

Tamaño: {{{tamaño}}}

El texto dentro de la caja de búsqueda es por defecto "Buscar en este wiki". Puedes ajustarlo cambiando la página MediaWiki:Tooltip-search.

Botón de búsqueda

Como con el logo de Wikia y los botones del encabezamiento, el botón de búsqueda es un gráfico que puede ser personalizado con un editor de imagen. 

#search_button {
   background-image: url(DIRECCIÓN_DE_TU_IMAGEN);
}
* html #search_button {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_TO_YOUR_IMAGE', sizingMethod='crop');
}



Navegación

Si quieres especificar un color para el panel de navegación que sea diferente al color de fondo de los Widget, usa lo siguiente. 

#navigation a {
   background-color: red;
}

Úsalo para especificar el color al que debe cernirse tu panel de navegación. 

#navigation a:hover, .navigation-hover {
   background-color: red;
}

Caja de vínculos

La caja de vínculos está situada justo debajo del navegador del primer widget. 

#link_box {
   background-color: red;
}


Personalizando el área de los Artículos

Barra de la página

La barra de las páginas contiene las etiquetas de Artículo/Discusión así como las acciones para la página( Editar, Historial, etc). Una tonalidad es añadida automaticamente especificada al color de fondo. Para quitar esta tonalidad, configura background-image: none. El estilo de la barra de la página está inicialmente definido por el valor "color1". 

#page_bar {
   background-color: red;
}

#page_controls a {
   color:            White !important;
}

Etiquetas de la página

Las etiquetas de la página, en la mayoría de los casos, son la etiqueta de Artículo y Discusión de la barra de la página. El segundo código configura el color de la etiqueta actualmente seleccionada. 

#page_tabs li {
   background-color: red;
}

#page_tabs li.selected {
   background-color: White;
}

Es una buena idea hacer el fondo de la etiqueta seleccionada con el color del artículo.

Artículo 

#wikia_page {
   background-color: red;
}

Probando la Personalización

Para probar la personalización antes de mostrar los cambios a los usuarios por defecto, usa los parámetros CGI useskin y usetheme en el vínculo para acceder a tu wiki. Por ejemplo, el tema personalizado en WoWWiki puede ser visto sin importar la piel que tengas configurada o la piel que use por defecto el wiki usando el siguiente vínculo.

http://www.wowwiki.com/index.php?title=Main_Page&useskin=monaco&usetheme=custom

Creando una piel oscura

Crear una piel con un texto claro en un fondo oscuro es más complicado que los ajustes mostrados arriba. Puedes encontrar más sobre esto en Help:Personalizar la piel Monaco/Piel oscura.

Recuerda

Recuerda que la mejor forma de saber si todo te ha quedado claro es experimentar. ¡No lo dudes, trata de modificar todo lo que puedas, personalizar el aspecto del wiki es esencial para que los editores se sientan como en casa!

Obtenido de "http://ayuda.wikia.com/wiki/Ayuda:Personalizar_la_piel_Monaco"