Aggiunta di uno stile CSS personalizzato su alcune delle mie pagine

16

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?

— johanpw
fonte

15

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

Alt. 1 - Classe di
pagine Utilizzare 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 <div class="YOURCLASS">...</div>attorno ai tuoi contenuti), a seconda della configurazione del tuo modello.

inserisci qui la descrizione dell'immagine

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

Ad esempio, aggiungi mycustomclassal 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
A tale scopo sono disponibili diversi moduli. Un esempio è il 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 <head>automaticamente al tag.

Alt 3. - carica foglio di stile CSS aggiuntivo
Un'altra alternativa è controllare l'ID della voce di menu corrente nel index.phpfile del modello e caricare 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">';
   }
?>

— johanpw
fonte

Uso la prima alternativa (con la classe di pagina) ma sei a conoscenza di un modo per applicare questi stili nell'editor? Ad esempio i titoli non hanno lo stesso carattere a seconda della categoria di appartenenza, come posso applicare il carattere all'interno dell'editor a seconda della pagina in cui sono visualizzati?

— web-tiki,

9

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.

— FFrewin
fonte

Mi piace questa soluzione, è molto utile e facile da implementare. +1

— johanpw,

4

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

— Faye
fonte

1

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.

— AlejandroVega
fonte