Share
A menudo, en mi carrera como web ninja, me pidieron que modificara los proyectos de código abierto de tema para alinearlos con la marca de mis clientes. Dependiendo del proyecto, esto puede ser más o menos frustrante (te estoy mirando Magento) pero MediaWiki es uno de los proyectos más fáciles para trabajar debido a la cantidad limitada de archivos y cosas que ajustar. En este tutorial, veremos el proceso de creación de temas que usé para diseñar el próximo PSDTUTS Wiki, pero el proceso, en particular con Firebug, podría aplicarse a casi cualquier CMS.
Crear un conjunto de código existente, incluso si se hizo para que fuera un tema fácil, puede ser una tarea desalentadora. Aquí, te mostraré cómo hacer esto lo más rápido posible, con el código más limpio y pragmático. Aquí están los pasos que vamos a seguir:
Así que una palabra rápida sobre el proyecto. Fui contratado por Collis de Eden para realizar una instalación de MediaWiki para el próximo PSDTUTS Photoshop Wiki en el que están trabajando. Aquí está el diseño que me dieron:
Lo primero que se debe hacer cuando los proyectos de terceros en la temática es evaluar cuánto trabajo se necesita al echar un vistazo a la estructura del directorio. En nuestro caso con MediaWiki, toda la edición se realizará en dos archivos dentro del archivo / skins (MonoBook.php y monobook / main.css) además de cargar algunas imágenes. Una de las grandes cosas de MediaWiki es que, dado que solo estamos tratando con dos archivos, podemos pasar la mayor parte del tiempo ajustando el diseño para cumplir con las especificaciones de nuestros clientes, sin averiguar dónde realizar cambios..
Después de ordenar los archivos que va a editar, es importante evaluar si esto será una reescritura inicial o si simplemente va a modificar los colores y el estilo de un diseño existente. Mi cliente solo me pidió que ajustara el tema predeterminado de MediaWiki. Como no tenemos que volver a escribir el tema por completo, normalmente copio los archivos que cambiaremos como copias de seguridad en el servidor (en este caso, monoBook.php.backup y main.css.backup) y comenzaremos a editar el original. Archivos para minimizar la cantidad de tiempo que tendré que pasar..
No voy a entrar en el proceso completo de convertir una maqueta de un sitio web en un sitio web que viva y respire; pero en lo que nos centraremos es en encontrar los bits que desea cambiar y sobrepasarlos en nuestros archivos de plantilla..
Una de las cosas más sorprendentes sobre el desarrollo y diseño web después del movimiento de estándares web es la utilización constante de CSS para diseñar sitios web y software web como MediaWiKi. Debido al trabajo de nuestros padres geek (¡y madres!), Podemos estar seguros de que cualquier proyecto que abordemos normalmente utilizará estas tecnologías avanzadas. Veamos cómo podemos aprovechar esto para nuestro estilo de un tema existente.
Las hojas de estilo en cascada se llaman así debido a una cascada o reglas de herencia que siguen. Si tienes una hoja de estilo externa que establece esta regla:
cuerpo
fondo: azul;
Pero luego, más adelante en esa misma hoja de estilo hay una segunda definición de la siguiente manera:
cuerpo
fondo: rojo;
Los documentos con los que está tratando realmente tendrán un fondo rojo porque esta fue la última declaración que se hizo. De la misma manera, CSS obedecerá cualquier regla que sea más específica, como ejemplo, si tiene un estilo establecido en todos
ul margen izquierdo: 100px;
Pero luego vuelva a establecer esa regla para listas con una clase determinada como;
ul.monkey margen izquierdo: 0px;
Debido a las reglas de especificidad, todas las listas que tienen la clase configurada como mono no tendrán un margen en el lado izquierdo, mientras que la mayoría de los elementos de la lista desordenados tendrán un margen a la izquierda de 100 píxeles. ¡Esto es increíblemente útil y efectivo porque simplemente puede restablecer los estilos al final de su hoja de estilo para su proyecto particular para hacer correcciones al estilo y traer más en línea con su nuevo sitio! (mira cómo hice eso para este proyecto al final de la hoja de estilo)
Hemos explorado un poco acerca de cómo corregir el estilo y ponerlo en forma para su nuevo tema, pero empecemos y empecemos a escribir algo de código. El tema que a Collis se le ocurrió es básicamente un cambio de estilo del tema actual "predeterminado" de MediaWiKi en los colores y la sensación de PSDTUTS, así que sabía que el fondo sería el siguiente:
¡Fácilmente hecho! Acabo de abrir el archivo "main.css" del que hablamos anteriormente en el directorio / skins / monobook / e inserté el siguiente código:
/ * ¡Cosas añadidas para hacer que se vea como PSDTUTS! * / Body background: # 2b241e;
La primera línea se llama comentario, si ya está escribiendo una gran cantidad de código (Css, Xhtml, Php o C ++!) Probablemente esté familiarizado con los comentarios. Los comentarios nos permiten dejar la información almacenada en nuestros documentos que no se mostrarán en el sitio web final, pero nos permiten recordar lo que estábamos pensando durante la sesión de codificación de la noche, finalizando su último proyecto.
La siguiente declaración es muy clara, simplemente restablece el color de fondo para el elemento del cuerpo. Debido a las reglas de herencia de CSS de las que ya hemos hablado, este color de fondo anulará el color de fondo establecido anteriormente porque se establece más adelante en el documento. Todo el granizo CSS!
Ahora nos dirigimos por el camino correcto para lograr que nuestro tema funcione y sea hermoso, pero no todos los elementos css en su nuevo tema serán tan fáciles de encontrar y corregir como lo más obvio
etiqueta. De hecho, esto siempre ha sido un gran obstáculo en la temática de todo tipo de productos CMS.Una manera realmente fantástica de rastrear estos divs aleatorios y de span es usar un complemento de Firefox de gran valor llamado Firebug.
Si aún no tiene estos instalados, instale Firefox así como Firebug. Firebug es un complemento de Firefox que hará que su flujo de trabajo de desarrollo web sea mucho más sencillo. Lo dejo a usted para que explore su sitio y encuentre todas las cosas increíbles que Firebug le facilitará. Lo usaremos simplemente para identificar elementos en nuestro tema y para averiguar cómo identificar los selectores para usar en tu archivo css para cambiarlos.
Más fácil decirlo que hacerlo ¿eh? Veamos un video rápido:
Esperemos que ahora tenga una mejor comprensión de cómo comenzar a crear un wiki, o cualquier CMS de hecho.
Para darte una idea de cómo es mi proceso, lo grabé mientras trabajaba en la wiki. Si tiene ideas para "acelerar" este proceso, o tiene una forma diferente de hacer las cosas, hágamelo saber en los comentarios.!
(Música cortesía de JustWaitSee)
Puede ver el proyecto finalizado en el sitio PSDTUTS Photoshop Wiki, aunque el proyecto no se ha iniciado oficialmente, así que no espere ver demasiado allí todavía.!
Accentsconagua