it-swarm-eu.dev

Aggiunta di uno stile CSS personalizzato su alcune delle mie pagine

Vorrei aggiungere uno stile CSS personalizzato ad alcune delle mie pagine per dare loro uno stile unico e sovrascrivere lo stile del modello predefinito.

Come posso raggiungere questo obiettivo in Joomla?

joomla-3.xjoomla-2.5templatescss
16
johanpw

Esistono diversi modi per aggiungere un codice CSS personalizzato a una pagina specifica. Ecco un paio di alternative:

Alt. 1 - Classe di pagina
Utilizza le classi di pagine. Nell'editor delle voci di menu, nella scheda "Visualizzazione pagina", c'è un campo chiamato "Classe di pagina". Ciò aggiungerà una classe al tuo <body> tag (o un <div class="YOURCLASS">...</div> attorno ai tuoi contenuti), a seconda della configurazione del modello.

enter image description here

Quindi crea semplicemente una nuova regola nel file CSS del tuo modello, usando la classe che hai specificato.

Per esempio. Aggiungi mycustomclass al campo "Classe di pagina" nella tua voce di menu e inseriscilo nel tuo file CSS:

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

Alt. 2 - Moduli CSS personalizzati
Diversi moduli sono disponibili per questo scopo. Un esempio è CSS personalizzato , un modulo che ti consente di aggiungere qualsiasi codice CSS e pubblicarlo nelle pagine che vuoi modellare.

Un'opzione simile è Custom HTML Advanced , un modulo che ti consente di aggiungere HTML, JavaScript e CSS alle tue pagine. Il codice può essere aggiunto a <head> tag automaticamente.

Alt 3. - carica foglio di stile CSS aggiuntivo
Un'altra alternativa è quella di verificare l'ID della voce di menu corrente nel index.php file e carica un altro foglio di stile CSS, se necessario:

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

Uno dei miei approcci preferiti è creare classi dinamiche per l'elemento body.

Così:

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

Alcuni esempi di ciò che produrrà il codice sopra è:

Pagina iniziale:

<body class="home pageid-13">

Chi siamo pagina:

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

Ora puoi creare stili specifici personalizzati per pagina, usando le classi sopra.

9
FFrewin

Questo è un altro metodo per fare la stessa cosa.

Supera il tipo di documento:

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

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

Va nel tuo indice dove si trova la tua classe corporea:

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

Ora, tutto ciò che aggiungi nella classe di pagina della voce di menu apparirà nell'ID del corpo. Qualsiasi voce di menu senza una classe sarà automaticamente body id = "default".

4
Faye

Inoltre puoi provare con questa estensione per assegnare diversi fogli di stile alle tue voci di menu: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

Saluti.

1
AlejandroVega