Agregar estilo CSS personalizado en algunas de mis páginas

16

Me gustaría agregar un estilo CSS personalizado a algunas de mis páginas para darles un estilo único y anular el estilo de plantilla predeterminado.

¿Cómo puedo lograr esto en Joomla?

— johanpw
fuente

15

Hay varias formas de agregar código CSS personalizado a una página específica. Aquí hay un par de alternativas:

Alt. 1 - Clase de
página Usar clases de página. En el editor de elementos de menú, debajo de la pestaña "Visualización de página", hay un campo llamado "Clase de página". Esto agregará una clase a su <body>etiqueta (o <div class="YOURCLASS">...</div>alrededor de su contenido), dependiendo de cómo esté configurada su plantilla.

ingrese la descripción de la imagen aquí

Luego, simplemente cree una nueva regla en el archivo CSS de su plantilla, utilizando la clase que especificó.

Por ejemplo, agregue mycustomclassal campo "Clase de página" en su elemento de menú, y ponga esto en su archivo CSS:

.mycustomclass p {font-color:red;} // Make text red on this particular page

Alt. 2 - Módulos CSS personalizados
Hay varios módulos disponibles para este propósito. Un ejemplo es CSS personalizado , un módulo que le permite agregar cualquier código CSS y publicarlo en las páginas que desea diseñar.

Una opción similar es Custom HTML Advanced , un módulo que le permite agregar HTML, JavaScript y CSS a sus páginas. El código se puede agregar a la <head>etiqueta automáticamente.

Alt 3. - cargar una hoja de estilo CSS adicional
Otra alternativa es verificar la ID del elemento del menú actual en el index.phparchivo de su plantilla y cargar otra hoja de estilo CSS si es necesario:

<?php 
   $currentMenuId = JSite::getMenu()->getActive()->id ;
   if ($currentMenuId == "14") {
       echo '<link rel="stylesheet" type="text/css" href="mystyle.css">';
   }
?>

— johanpw
fuente

Utilizo la primera alternativa (con la clase de página), pero ¿conoce alguna forma de aplicar estos estilos en el editor? Por ejemplo, los títulos no tienen la misma fuente según la categoría a la que pertenecen, ¿cómo puedo aplicar la fuente dentro del editor según la página en la que se muestran?

— web-tiki

9

Uno de mis enfoques favoritos es crear clases dinámicas para el elemento del cuerpo.

Entonces:

<?php
  $app    = JFactory::getApplication();
  $menu   = $app->getMenu();
  $active = $menu->getActive();
  $class  = $active->alias . " pageid-" . $active->id;
?>
<body class="<?php echo $class; ?>">

Algunos ejemplos de lo que producirá el código anterior es:

Página de inicio:

<body class="home pageid-13">

Sobre nosotros página:

<body class="about-us pageid-15">

Ahora puede crear estilos específicos personalizados por página, utilizando las clases anteriores.

— FFrewin
fuente

Me gusta esta solución, es muy útil y fácil de implementar. +1

— johanpw

4

Este es otro método para hacer lo mismo.

Va por encima del doctype:

<?php
  $app = JFactory::getApplication();
  $menu = $app->getMenu()->getActive();
  $pageclass = '';

  if (is_object($menu))
    $pageclass = $menu->params->get('pageclass_sfx');
?>

Entra en su índice donde está su clase de cuerpo:

<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

Ahora, todo lo que agregue a la clase de página del elemento de menú aparecerá en la identificación del cuerpo. Cualquier elemento de menú sin una clase será automáticamente body id = "default".

— Faye
fuente

1

También puede intentar con esta extensión asignar diferentes hojas de estilo a sus elementos de menú: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

Saludos.

— AlejandroVega
fuente