it-swarm.it

creazione di un nuovo modello in 3.3

Sto creando il mio primo nuovo modello, molto principiante.

Ho un sito Web statico HTML5 e CSS3 che ho creato da me stesso e convertendolo in un modello Joomla 3.3.

Ho letto alcuni tutorial su come creare un modello di base e così via, ma non ho davvero il tempo di mettere le mani su tutto, quindi ho bisogno di una soluzione rapida che possa semplicemente usare tutto il mio stile CSS e ignorare qualsiasi cosa accada da Joomla.

Ho provato a mettere un po 'di stile <div> tag nel mio indice o come modulo in (HTML personalizzato) ma ci sono alcuni stili CSS che sovrascrivono le mie regole CSS quindi voglio solo sbarazzarmi di tutto da joomla e mantenere pulito il mio nuovo modello.

Ho questo nel mio index.php

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');

ma penso che lo stile principale che prevale sul mio provenga da questa linea

<jdoc:include type="head" />

che non so cosa porti.

4
Elhamy

La regola generale quando si esegue un modello è caricare i propri file CSS dopo il <jdoc:include type="head" />. Questo è importante perché in questo modo hai l'ultima parola sulle regole CSS. Tuttavia, ciò significa anche che non usi $doc->addStyleSheet() nel tuo modello. Invece lo scrivi semplicemente come HTML nella tua testa dopo l'istruzione jdoc.

C'è un motivo per usare ancora l'API per aggiungere file JavaScript o CSS all'interno del tuo modello. Cioè se carichi asset che possono anche essere caricati da estensioni. Quindi Joomla farà in modo che venga caricato solo una volta, mentre altrimenti potresti averlo caricato due volte.

Quindi potrebbe avere senso caricare il file bootstrap utilizzando l'API, ma il tuo stile modello (style.css) e JavaScript (main.js) devono essere caricati hardcoded dopo il tag jdoc.

Su un sidenote: puoi caricare il Bootstrap CSS usando JHtmlBootstrap::loadCSS() ( http://api.joomla.org/cms-3/classes/JHtmlBootstrap .html # method_loadCss ). Va benissimo se fatto all'interno di un modello, ma non usare mai questa chiamata all'interno di un interno.

Tuttavia potrebbe essere più sensato lavorare dai file Bootstrap LESS e compilare il tuo file CSS da esso. Quindi puoi anche mescolare e abbinare le cose di cui hai bisogno e sfruttare i mixin e le variabili già fornite di Bootstrap.

6
Bakual

Sfortunatamente Joomla non funziona in questo modo. Per creare un modello Joomla, devi avere alcuni elementi dinamici come il tag jdoc che importa il componente e così via.

<jdoc:include type="head" /> è anche un requisito molto utile. Fondamentalmente, ottiene tutto lo script, il link e qualsiasi altra cosa che dovrebbe essere iniettata nel <head> da un'estensione e lo inietta per te. Ad esempio, supponiamo che tu abbia un modulo che richiede graph.js. Per importare questo, dovresti usare qualcosa del genere:

JHtml::_('script', JUri::root() . 'modules/my_module/js/graph.js');

Adesso <jdoc:include type="head" /> ottiene il codice sopra e lo inietta nel <head> per te in modo da non doverlo fare manualmente. Pertanto, tienilo lì e non rimuoverlo. Mi verrà richiesto anche per alcuni script di base che vengono spediti con Joomla.

Se desideri utilizzare i moduli nel tuo sito, non puoi semplicemente aggiungere il codice HTML al tuo index.php e aspettarti che funzioni correttamente ed essere dinamico. Questo è il motivo per cui usiamo:

<jdoc:include type="modules" name="position-7" />

che importa il modulo e la struttura HTML con cui è codificato è. È possibile tuttavia aggiungere HTML personalizzato per avvolgere il modulo in questo modo:

<div class="sidebar">
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-7" />
    </div>
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-8" />
    </div>
</div>

Non è molto complesso e rende la vita molto più semplice. Joomla non si basa su un approccio statico, pertanto è necessario attenersi al modo in cui funziona.

4
Lodder

Quando ho iniziato per la prima volta, i modelli di Joomla pronti all'uso non erano così puliti, e questo era buono per un principiante.

Ho una sezione di testa che assomiglia a questa ...

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/menus.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/modules.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/styles.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/peter.css?v=20140508-6" type="text/css" />

In particolare, i fogli di stile non sono inclusi nel modo "Nizza" con addStyleSheet e, di conseguenza, rimangono dove sono stati inseriti, per ultimi! Eventuali fogli di stile aggiunti dinamicamente vengono inseriti in <jdoc:include type="head" /> punto.

Ciò che potrebbe accadere nel tuo modello è che i tuoi fogli di stile vengono caricati per primi, quindi quelli aggiunti in modo dinamico a Joomla vengono aggiunti per ultimi. Tutto dipende da dove vengono chiamate le funzioni addStyleSheet.

Se sei sicuro di avere tutto ciò di cui hai bisogno nel modello e non hai bisogno di aggiungere bit dinamici aggiuntivi (ad es. Per l'editor di frontend) o per eventuali estensioni che aggiungi, allora potresti andare via con la rimozione di <jdoc:include type="head" />, almeno per un modello per principianti.

Oppure ... aggiungi i tuoi fogli di stile in un punto fisso, fuori dalla testa inclusa.

Una volta che passi oltre un principiante, probabilmente vorrai includere la sezione head. Esistono modi per manipolare il contenuto dinamico, anche se non necessariamente per un principiante. Ad esempio, per il debug, ho un foglio di stile che aggiungo in modo dinamico usando un'estensione personalizzata, se sono l'utente che ha effettuato l'accesso.

1
Peter Wiseman

Se i tuoi stili vengono sostituiti, è senza dubbio a causa del css di Bootstrap, in quanto utilizza alcuni selettori ad alta specificità.

Il tuo sito statico utilizza Bootstrap? In caso contrario, allora sei quasi sicuramente meglio senza di esso nel tuo modello Joomla. Finirai solo per combatterlo. Penso che questo sia quello che hai già visto.

Se il tuo sito statico non ha usato Bootstrap anche allora puoi dimenticare meglio tutti i discorsi qui su MENO e includere semplicemente il tuo CSS e JS, come hai fatto. devi usare Bootstrap nel tuo modello Joomla.

1
Seth Warburton