Selbst erstelltes Template an Joomla anpassen...

majesticc89 · 2. Mai 2017

Servus Leute,
ich habe leider nichts vergleichbares gefunden und hoffe mit diesem Thread auch allen zukünftigen Entwicklern die am Anfang stehen helfen zu können.
Ich habe ein Template selber entwickelt und würde dieses nun in Zukunft mit Joomla gestalten (da noch weitere Benutzer/Redakteure geplant sind, die kein HTML können). Dazu muss man einige Modifikationen am Template anbringen. Zum einen die "templateDetails.xml erzeugen", die Joomla ja (unter Anderem) zur Installation benötigt. Zum Anderen muss man Positionen und Module definieren, mit denen dann Joomla! arbeiten kann.
In meinem konkreten Beispiel möchte ich gerne eine Website mit drei Spalten erstellen (wobei die Linke nur als Navigationsmenü dienen soll), sowie einem Header mit Logo und einem Footer mit den AGBs etc.

Ich habe es also wie folgt gestalten:

templateDetails.xml

Spoiler anzeigen

index.php (mit Hilfe einer Flexbox):

Spoiler anzeigen

style.css

Spoiler anzeigen

Soweit so gut. Es lässt sich installieren und wird mir folgendermaßen ausgegeben:

In der "templateDetails" habe ich bereits die <positions> definiert, die ich dann an den benötigten Stellen in der index.php mit dem <jdoc:include.... Befehl eingearbeitet habe.
Jetzt meine Frage: Was kann/muss man noch ergänzen/verändern?
Ich habe im Backend das Problem, dass Beiträge nicht auf der Website angezeigt werden, ich kann ihnen z.T keine Module zuweisen.

Zusätzlich habe ich noch keine "Parameter" (in der templateDetails) eingefügt, was daran liegt, dass ich da noch nicht ganz durchblicke.

Code

<!-- Parameter Block start -->
<config>
  <fields name="params">
    <fieldset name="advanced">
    <field name="unser_header_bild"
                  type="media"
                  default=""
                  label="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_LABEL"
                  description="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_DESC"
                  filter="string"
                  />
    </fieldset>
  </fields>
</config>
<!-- Parameter Block ende -->

Alles anzeigen

Habe dieses Beispiel unter "joomla-templates.de" gefunden, weiß aber noch nicht gänzlich wofür ich das benötige. Den Header (Logo) kann ich auch direkt in der .php bearbeiten,
brauche da jetzt nicht zwangsweise eine Hilfe im Joomla Backend.

Ein langer Beitrag, tut mir Leid, habe versucht alles so detailliert wie möglich zu erklären.
Des Weiteren habe ich das Template komplett selber geschrieben (mein Erstes), also seid bitte nachsichtig mit mir, sind sicher dutzende Fehler enthalten.
Ich bin ja schon froh, dass es überhaupt funktioniert (mehr oder weniger)!

Edit by Admin: Langen Code in Spoiler

Re:Later · 2. Mai 2017

Einen Blick ins Protostar-Template werfen. Da findest du viele Winks!

Code

<jdoc:include type="head" />

Wichtig, damit Erweiterungen ihr CSS, JavaScript einfügen können sowie viele typische HEAD-Inhalte einer Webseite.

Code

<jdoc:include type="message" />

hier gibt Joomla und Erweiterungen Warnungen, Infos und Fehler aus.

Code

<jdoc:include type="component" />

Hier wird Beitrag bzw. Komponenteninhalte ausgegeben, je nachdem, welche Komponente bzw. Menüeintragstyp im Menüeintrag gewählt hast.

Code

echo $this->params->get('unser_header_bild', 'anderes-bild.jpg');

gibt dir das in dein Mediafeld eingetragene Bild aus, natürlich nur den Bildnamen (glaub auch Pfad), nicht direkt das Bild oder, wenn das Mediafeld leer blieb das 'anderes-bild.jpg'.

Code

, 'anderes-bild.jpg'

kannst auch weglassen...

majesticc89 · 2. Mai 2017

Also die verschiedenen <jdoc:include types.. /> werde ich mir jetzt genauer anschauen, bzw. auch mal das Prototype Template durchgehen (was leichter gesagt als getan ist).

überarbeitete index.php:

HTML

<!doctype html>
<html>
  <head> <!-- Allg. Info -->
    <title>EXAMPLE</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="templates/exampletemplate/css/style.css">
    <jdoc:include type="head" />
  </head>
  <body> <!-- gesamte Website -->
    <header> <!-- Logo OBEN -->
    <img src="templates/exampletemplate/bilder/headerlogo.png" width="1800" height="200" alt="LOGO">
    </header>   
  <div id="Flexbox"> <!-- Container -->
    <nav> <!-- Navigation LINKS -->
    <jdoc:include type="modules" name="navi-links" />
    </nav>
    <main> <!-- Hauppteil -->
    <jdoc:include type="modules" name="main-mitte" />
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    </main>
    <aside> <!-- News RECHTS -->
    <jdoc:include type="modules" name="news-rechts" />
    </aside>
  </div> 
  <footer> <!-- Fußleiste UNTEN -->
  <jdoc:include type="modules" name="footer-unten" /> 
  </footer>
</body>
</html>

Alles anzeigen

Ich finde beim Protostar-Template bei den:
jdocs include type=modul immer noch eine "style" Info! Bspw.: style="well" / "none" / "xhtml" etc.
Ist das zwingend notwendig?

chr-hl · 2. Mai 2017

Moin,

hier aus der Doku.

Christian

majesticc89 · 2. Mai 2017

Servus Christian,
danke für die Doku, ist aber leider nicht ganz was ich möchte. Ich möchte ja, dass man quasi diese Menüs IN JOOMLA erstellen kann, für Leute die kein HTML können. Oder zumindest, dass ich dann bspw. ein "rounded" Menü vorgebe und man dieses dann über Joomla.... verfeinern und füllen kann.
Verbessere mich wenn ich zu naiv bin, aber könnte man nicht mit <jdoc module> und <position> einen Bereich definieren, den man dann via "Beitrag und Verlinken" bearbeiten kann und so selber ein Menü aufbauen kann?

Indigo66 · 2. Mai 2017

Zitat von majesticc89

Ich möchte ja, dass man quasi diese Menüs IN JOOMLA erstellen kann

Joomla baut Dir ein Menü als unsortierte Liste. Für das Aussehen und Funktion ist das Template zuständig oder Dein Können.

Zitat von majesticc89

Verbessere mich wenn ich zu naiv bin, aber könnte man nicht mit <jdoc module> und <position> einen Bereich definieren, den man dann via "Beitrag und Verlinken" bearbeiten kann und so selber ein Menü aufbauen kann?

Die scheinen Grundlagen zu Joomla zu fehlen. Über das Menümodul, kannst Du Dir so viele Menüs erstellen wie Du möchtest und auf postionen anzeigen, die das Template hergibt.
Schau mal in unsere "Anleitungen" da kannst Du Dir das Basiswissen aneignen.

Wenn Du was Klickibunti willst, dann schau Dir mal das https://www.smartaddons.com/jo…ons/item/182-sj-mega-menu an.

christine2 · 2. Mai 2017

Hallo,

Zitat von majesticc89

Ich finde beim Protostar-Template bei den: jdocs include type=modul immer noch eine "style" Info! Bspw.: style="well" / "none" / "xhtml" etc. Ist das zwingend notwendig?

dazu hier: Modulstile verwenden, verstehen und eigene anlegen/programmieren bzw. https://www.ghsvs.de/programmi…en-verstehen-eigene-coden

Und wie Tom schon schrieb, hier die Anleitungen: https://forum.joomla.de/index.php/Board/21-FAQ-s-HowTo-s/ - zu den verschiedensten Themen
Liebe Grüße, Christine