Protostar Dokumentation

Schau mal in unsere Anleitungen: FAQ's & HowTo's
Joomlaeigene Templates anpassen/ändern (z.B. Protostar, Beez3). Vorher eine Template-Kopie anlegen!

hier mal gucken:

https://www.cloudaccess.net/jo…-responsive-template.html

Liebe Grüße

Christine

oder hier:

http://web.archive.org/web/201…5/http://bj.zemplate.com/

Kürzlich hat Sieger66 einen Link zu einem openbook hier eingestellt. Darin gibt es einige Kapitel zu Templates (10.3 - 10.5), die sind auch lesenswert.

Zitat von der_kps

Beiträgen eine Tabelle benutzt, um Bilder und Texte anzuordnen

Tabellen und RWD gehen bei kleinen Monitoren (Mobils und Tablets) nicht wirklich gut zusammen. Schau Dir mal die CSS-Eigenschaft "float" in Verbindung mit div-Containern an. Damit kann man zwei- und dreispaltige flexible Layouts ohne Tabellen erstellen, die auch auf Mobils gut skalieren.

Such auch mal hier im Forum, dieses Thema wurde schon einige Male diskutiert.

Hallo,

Zitat von der_kps

Bisher habe ich mit dem JCE-Editor in den Beiträgen eine Tabelle benutzt, um Bilder und Texte anzuordnen

bin zu spät. KarEm war schneller Das mit div Containern ist tolle Sache. Das schaust Du Dir noch an.

Da ich aber zuvor was gebastelt habe, schicke ich es dennoch. Eine zunächst mal vereinfachte Variante, da ich gesehen habe, dass Du vieles mit dem Editor machst ......... & nicht mit HTML Codes. Das wird auch mal.

2 Bilder und da drinnen steht, wie ich es auf die Schnelle auf einer Testseite gemacht habe (Protostar).

Font-size usw. besprechen wir ein anderes Mal (auch das ist bei Dir Inline Code).

Normale Ansicht:

Mobile Version (also responsiv):

Liebe Grüße

Christine

Eventuell auch nützlich:

http://openbook.rheinwerk-verl…mla_3/26_001.html#u26.1.2

http://web.archive.org/web/201…otostar-uses-span-classes

Zitat von der_kps

Es gefällt mir aber nicht, dass der Text oben an der Bildecke klebt. Aber man kann wohl nicht alles haben.

Daher eventuell nützlich:

https://wiki.selfhtml.org/wiki…p_.28Innenabstand_oben.29

Außerdem:

https://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/span

Wenn du im JCE-Editor etwas vorhandenes z.B. Text per Maus markierst kannst du in der Format-Pulldownliste statt Absatz (= p-Tag) oder Bereich( =div-Tag) auch span wählen dann wird dieser normalerweise wenn der JCE keinen "Schluckauf" hat in span-Tags eingeschloßen.

Zitat von der_kps

Ja, ich arbeite mit derm Editor und greife nur selten in den HTML-Code ein. Dachte, das wäre unschicklich.

Das ist es aber nicht. Zumindest wenn man weiß was man macht.

Zitat von der_kps

Nach was soll ich konkret suchen? Gibt es einen Codeschnipsel, damit ich weiß wo's lang geht?

Beispiel aus:

https://getbootstrap.com/2.3.2/components.html#typography

dort der Abschnitt nach dem Text bei "More Examples"

sieht im Quelltext wie folgt aus:

    <ul class="thumbnails">
            <li class="span4">
              <a href="#" class="thumbnail">
                <img data-src="holder.js/360x270" alt="">
              </a>
            </li>
            <li class="span3">
              <a href="#" class="thumbnail">
                <img data-src="holder.js/260x120" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
                <img data-src="holder.js/160x120" alt="">
              </a>
            </li>
            <li class="span3">
              <a href="#" class="thumbnail">
                <img data-src="holder.js/260x120" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
                <img data-src="holder.js/160x120" alt="">
              </a>
            </li>
          </ul>

Zitat von der_kps

Ich habe keine Vorstellung, wie das Problem (Tabelle ersetzen) damit zu lösen wäre.

Was ich meine könnte etwa wie nachfolgend beispielhaft aussehen:

<h1 style="text-align: center;">SEGELCLUB YCSH 80 HENNESEE, WILLKOMMEN</h1>
<p>&nbsp;</p>
<h2 style="text-align: center;">Der Segelverein am Südstrand des Hennesees<h2>
<p>&nbsp;</p>

<div id="description" style="height: 293px;" >
<p>In der einzigartigen und unverbauten Natur des Hennesees möchten wir Sie herzlich willkommen heißen beim YCSH 80 ! Der Segelverein am Südstrand des Hennesees.</p>
</div>
<div id="descimg">
    <article>
        <img class="descimg" style="display:table-cell; vertical-align: top;" src="images/stories/willkommen/willkommen_1k.jpg" alt="segeln-hennesee-liegeplatz-1" width="390" height="293" />
    </article>
</div>
<div id="description" style="height: 293px;" >

        <p>Segeln auf dem Hennesee bedeutet auch anspruchsvolles segeln. Ob Sportliche Jolle oder kleine Kielyacht, Kanu, Kajak oder Angelboot: Beim YCSH 80 finden Sie auf dem Hennesee 12km freie Fahrt ohne Brücken! </p>
</div>
<div id="descimg">
    <article>
        <img class="descimg" style="display:table-cell; vertical-align: top;" src="images/stories/willkommen/willkommen_3k.jpg" alt="segeln-hennesee-liegeplatz-2" width="390" height="293" />
    </article>
</div>

Diesen Teil im JCE (mit Einstellung Code statt Editor) einfügen und speichern.

in die user.css des Templates Protostar folgende CSS-Definitionen eintragen und sichern:

#description {
    float: left;
    margin: 0;
    padding-top: 1%;
    padding-right: 2%;
    padding-bottom: 1%;
    padding-left :2%;
    border: 0;
    width: 44%;
    font-size: 1em;
    text-align: right;
    clear: left;
}

#descimg {
    float: right;
    margin: 0;
    padding-top: 1%;
    padding-right: 2%;
    padding-bottom: 1%;
    padding-left :2%;
    border: 0;
    width: 44%;
    clear: right;
}

Die Klassen kannst Du natürlich ändern, genauso wie die einzelnen Werte um die gewünschte Optik zu erreichen.

Die Idee ist, dass eine "Spalte" den Beschreibungsteil und die zweite "Spalte" die Bilder beinhaltet. Das Aussehen auf der Webseite wird soweit mie möglich über die CSS-Definitionen bestimmt, lediglich die nötigen Strukturteile (u.a. die beiden "Spalten" werden mit div-Containern definiert.

Dies soll nur die Idee rüberbringen, kann gut sein, dass es bessere Lösungen gibt.

Sieht so aus:

Das hängt schon auch vom Umfang der Änderungen ab. Grundsätzlich immer eine Kopie des Originals aufbewahren.

Für Änderungen ist eigentlich die user.css gedacht, deren Einträge die der template.css bei dem Aufbau einer Seite "überschreiben". Wird das Original-Template geändert, wird es bei einem Joomla- Update wieder überschrieben. Nutzt man eine Kopie des Templates, sollte man m.E. auch prüfen, ob das Original- Template durch eine neuere Joomla-Version geändert wurde und diese dann in der Kopie nachziehen.

Dazu gibt es hier im Forum auch noch weitere Empfehlungen. Schau die mal durch um die "richtige" Vorgehensweise in Deinem Fall zu ermitteln.

Hallo! Fast hätte ich selbst so einen Thread gestartet, da ich ebenfalls Probleme habe, mich in Protostar einzuarbeiten! Bisher hatte ich JYAML als Template verwendet und war fit darin. Es war durchaus ein "Fluid-Design" und brachte gute Ergebnisse auf allen Displaygrößen und Geräten! Aber es wird seit einigen Jahren schon nicht mehr weiter gepflegt und spätestens, wenn es auf Joomla 4 geht, wird das JYAML-Template wahrscheinlich nicht mehr funktionieren.

Nach einiger Suche fand ich das erweiterte / verbesserte Template ProtostarPlus. Im Gegensatz zu "der_kps" will ich möglichst keine Inline-Styles mehr verwenden und alles in den CSS-Dateien definieren. Aber eine CSS-Datei mit fast 170kB Größe und fast 8.000 Zeilen, da hört's bei mir auf mit dem Durchblick. Und diese CSS empfinde ich auch als zu unübersichtlich, als dass es dort Sinn macht, mit Trial 'n Error solange zu probieren, bis ein gewünschter Effekt erreicht wird.

Ich hänge mich deshalb in diesen Thread, weil meine Fragen evtl. auch "der_kps" nützen können.

Was mich am meisten bei Protostar wundert, ist dass alle Schriftgrößen nicht in relativen Maßen sondern als Pixel definiert sind. Wie passt denn das zu einem Template, das auf allen erdenklichen Geräten und Displaygrößen zu gut lesbaren Ergebnissen und zu ähnlicher Anmutung führen soll? Auch line-height, margins und paddings werden fast immer in Pixel definiert. Das verstehe ich einfach nicht!

In JYAML hatte ich alle Werte entweder in Prozent oder em definiert und das Erscheinungsbild war auf allen Geräten und Displaygrößen immer ausgezeichnet!

Müsste ich denn, um eine ähnliche Darstellungsqualität wieder zu erlangen, in der gesamten template.css alle Größenangaben und Abstände von Pixel auf em umstellen? Wenn ja, werde ich schnellstens ein anderes Template auswählen, z.B. wie mir in einem anderen Thread hier empfohlen wurde, eines von Joomla51.com. Einige sind sogar kostenfrei: https://www.joomla51.com/free-joomla-templates

M.E. ging es dem TE bei diesem Thread hauptsächlich um eine Alternative um die bisherigen Tabellendefinitionen, die auf kleinen Displaygrößen mit dem responsive Ansatz nicht zufriedenstellend gelöst werden können zu ersetzen.

Außerdem hat der TE bisher wohl hauptsächlich mit dem Editor gearbeitet und versucht seine Wünsche umzusetzen. M.E. ist der Editor nur bedingt geeignet ein MVC-Konzept mit getrennt definierten Daten für die Präsentation zu realisieren.

Daher ist es hilfreich zu wissen, wie auf Code-Ebene die nötigen Aufteilungen vorgenommen werden können. Dazu kommt, dass die HTML- und CSS-Normen im Laufe der Zeit auch an die fortschreitenden Anforderungen und Entwicklungen angepasst wurden.

Die template.css ist schon eine recht große Datei, vmtl. ist sie über die Jahre mit dieser Entwicklung gewachsen, allerdings besteht ja die Möglichkeit eigene Definitionen in der user.css konform zu den heutigen Regeln zu formulieren. Weiterhin ist dieses Konstrukt gut dokumentiert und wird regelmäßig bei Bedarf von der Joomla-Entwicklung angepasst, dies sind aus meiner Sicht wichtige Vorteile für dieses Template und ich habe damit auch eine mir wichtige Unabhängigkeit von anderen Template-Entwicklungen.

Ich kenne das Nachfolgetemplate zu Protostar der V4 noch nicht, kann mir aber gut vorstellen, dass es auch an die neuen Entwicklungen angepasst wird. Eine Umstellung aller Größenangaben und Abstände von px auf em musst Du m.E. nicht vornehmen, das wird vmtl. mit dem neuen Template sowieso kommen. Außerdem sind diese Aspekte ja wohl nur ein Teil der CSS-Präsentationsdaten.

Der Lösungsvorschlag unter #13 geht m.E. in die gewünschte Richtung, allerdings sollte/muss man sich auch mit genau diesen Konzepten auseinandersetzen.

Zitat von Clemens-XS

Hallo! Fast hätte ich selbst so einen Thread gestartet, da ich ebenfalls Probleme habe, mich in Protostar einzuarbeiten! Bisher hatte ich JYAML als Template verwendet und war fit darin. Es war durchaus ein "Fluid-Design" und brachte gute Ergebnisse auf allen Displaygrößen und Geräten! Aber es wird seit einigen Jahren schon nicht mehr weiter gepflegt und spätestens, wenn es auf Joomla 4 geht, wird das JYAML-Template wahrscheinlich nicht mehr funktionieren.

Moin,

m.E.. verwendet Protostar Bootstrap2, ob das bei dem ProtostarPlus anders ist, habe ich jetzt nicht geprüft.

Da macht es aus meiner Sicht mehr Sinn, sich mit Cassiopeia, dem neuen Standardtemplate von J4 (Bootstrap 4), zu beschäftigen.

Trotzdem eine gute Nacht zu Protostar: Ich habe es unter J4, im Gegensatz zu verschiedenen anderen Templates, zum Laufen bekommen.

Christian