Por lo general, solo ajusto las plantillas gratuitas existentes y cambio los colores y las fuentes. La pregunta es, cuando ya tengo mi página de Joomla en línea, ¿cuál es la forma más fácil de hacer cambios en la plantilla CSS?

Actualmente, estoy usando las Herramientas de desarrollo de Chrome para buscar y ajustar estilos específicos para una vista previa. Si me gusta, ajusto el archivo CSS de la plantilla directamente en el editor en línea en el área de administración.

Cuando comencé y no tenía ningún contenido, utilicé un servidor web local con Joomla que tenía la ventaja de que podía usar un IDE adecuado para escribir código css y php. Como ya tengo algo de contenido ahora, me gustaría ver cómo se ven los cambios que hago con el contenido que tengo.

Sé que esta es una pregunta básica, pero ¿hay un flujo de trabajo preferido cuando alguien quiere ajustar el diseño de un sitio existente?

Clone el sitio de vida con Akeeba, instálelo localmente y luego ajústelo según sea necesario. Cuando haya terminado de SSH / FTP, los archivos modificados volverán al sitio en vivo.

Hay una gran cantidad de buenas razones por las cuales es imprudente "ajustar" en un sitio en vivo ...

Aquí tiene algunas opciones, dependiendo de si su enfoque es la facilidad de uso, la automatización o el costo:

• Haga exactamente lo que hizo antes con su instalación local, pero una vez instalada, cambie la instalación local de Joomla para usar su base de datos MySQL remota y en vivo configuration.php, si su host admite acceso remoto. Sin embargo, tenga cuidado: cualquier cambio en la base de datos se activará ...

• Use un componente como extplorer y edite los archivos de plantilla directamente en el navegador, con otra pestaña abierta que muestre el sitio, aún usando las herramientas de desarrollo de Chrome. extplorer presenta colores de código y es ideal para hacer pequeños cambios rápidamente.

• Use un sistema de control de versiones para impulsar los cambios; por ejemplo, desarrolle su plantilla en una instalación local de Joomla usando su IDE elegido, con la plantilla en un repositorio. Cuando termine, confirme los cambios en su sitio en vivo. Use un enlace posterior a la confirmación para verificar esos cambios como una versión funcional. Si bien es más complicado de configurar, significa que siempre puede revertir a versiones antiguas de plantillas si comete un error. Agregue MySQL remoto para garantizar la coherencia de los datos en local y en vivo.

• Pague por una plantilla / marco de plantilla adecuado: en mi empresa utilizamos plantillas YooTheme . Este marco de plantilla tiene una característica llamada 'Customizr', que es básicamente una ventana de 2 paneles con cientos de variables CSS (bueno, MENOS variables) a la izquierda y una vista previa en vivo a la derecha. Estas variables controlan lo suficientemente cerca de cada elemento de la plantilla, desde el relleno de la canaleta hasta la sombra del texto del elemento del menú, y todo lo demás. Los cambios se aplican instantáneamente en la vista previa y se pueden definir múltiples 'estilos' para que pueda jugar con diferentes configuraciones variables. Dicho todo esto, estoy seguro de que otros marcos de plantillas tienen características muy similares.

NB: No tengo ninguna aflicción con extplorer ni YooTheme que no sea como usuario.

Si solo está haciendo cambios CSS, también puede continuar previsualizándolos en las Herramientas de desarrollo de Chrome y utilizando un entorno de desarrollo en línea como Cloud9 o ShiftEdit , puede conectarse directamente a su servidor a través de FTP y hacer ajustes al sitio en vivo usando un IDE adecuado similar a como lo hacía cuando estaba alojado localmente.

Sin embargo, no recomendaría esto para cambios más grandes que podrían romper su sitio (aprendí por las malas hace unos años). Para estos, recomiendo configurar un servidor local (o una máquina virtual gratuita de koding.com ), clonar el sitio con Akeeba y usar Git * para enviar cambios a su sitio en vivo una vez que hayan sido probados.

* Si no desea que su código sea público en GitHub, una buena alternativa es BitBucket .

Método 1

Un método que he usado es agregar mi propio archivo css al archivo index.php de la plantilla. Esto se puede envolver para agregarlo solo si usted es el usuario.

Una forma de extender esto es escribir un complemento simple que agregue un archivo CSS si usted es el usuario. Lo he usado para hacer cambios en la plantilla de administración predeterminada, para evitar hacer cambios directamente en la plantilla que podrían ser reemplazados por la próxima actualización.

Algo como...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

Método 2

Para obtener una vista previa de los cambios de plantilla, puede duplicar la plantilla y realizar cambios en el duplicado. Para ver esos cambios, agregue "? Template = test" a la url, que anula la plantilla. Reemplace "prueba" con cualquier nombre que haya decidido usar para el duplicado.

Tenga en cuenta que debe duplicar toda la plantilla, y no solo un estilo. Tanto los estilos como las plantillas se pueden duplicar en la interfaz gráfica de usuario de administración.

No creo que sea posible anular un estilo en la url. [PW: Acabo de descubrir que en J3, puedes anular un estilo en la url. Ver método 3.]

Método 3

Similar al método 2 pero con estilos. Use un estilo de "prueba" y modifique la plantilla principal para incluir la hoja de estilo de prueba. Para anular un estilo en la url, agregue? TemplateStyle =, donde está el identificador de la plantilla (es decir, numérico).