it-swarm-es.tech

Agregar estilo CSS personalizado en algunas de mis páginas

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?

16
johanpw

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 tu <body> etiqueta (o una <div class="YOURCLASS">...</div> alrededor de su contenido), dependiendo de cómo esté configurada su plantilla.

enter image description here

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

P.ej. Agregue mycustomclass al campo "Clase de página" en su elemento de menú y colóquelo en su archivo CSS:

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

Alt. 2 - Módulos CSS personalizados
Varios módulos están 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 <head> etiqueta automáticamente.

Alt 3. - cargar hojas de estilo CSS adicionales
Otra alternativa es verificar la ID del elemento del menú actual en la plantilla index.php archivo, y cargue 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">';
   }
?>
15
johanpw

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

Asi que:

<?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.

9
FFrewin

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".

4
Faye

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.

1
AlejandroVega