Protostar Dokumentation

  • Hallo!

    Ich versuche mich gerade am aktuellen Protostar-Template.

    Es gibt wohl nichts, was man nicht einstellen kann. Die Frage ist nur wo und wie.

    Alte Forenbeiträge, tote Links und Antworten auf ähnliche Fragen, die aber nicht zu meiner

    Probemstellung passen, helfen mir nicht.


    Gibt es eine aktuelle Doku, ein Tutorial o.ä?

    Oder ein einfacheres Template, Hauptsache responsive.


    vG

  • Hallo,

    vielen Dank für die Hinweise!
    Jetzt habe ich einen Überblick über Protostar.
    Spezielle Dinge (z.B. Rahmen entfernen, hor. Menü etc.) muss ich wohl im Einzelfall googeln und in der css ändern.
    Aber woher wissen 'die', wo was zu ändern ist?


    Mein Kardinalproblem jedoch bleibt:
    Bisher habe ich mit dem JCE-Editor in den Beiträgen eine Tabelle benutzt, um Bilder und Texte anzuordnen
    www.ycsh80.de
    Mit RWD geht das natürlich nicht. Eine befriedigende Lösung habe ich bisher nicht.

    Auch soetwas wie hier wäre interessant (Die Ferienregion || Veranstaltungen)
    www.meschede.de/tourismus-freizeit-kultur
    Aber ohne Tabelle fällt mir nichts ein.


    vg

  • 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,

    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

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

    Um eine Tabelle zu vermeiden, habe ich Text und Bild so in den Beitrag gebracht, wie von Christine2 beschrieben (Trotzdem danke, nun weiß ich, dass ich da wenigstens richtig liege).

    Das Ergebnis hat aber erstmal nichts mit WYSIWYG zu tun!

    Also habe ich mit Leerzeilen gefummelt. Auf Mobil eine Katastrophe!

    Im Bild-Manager setze ich stattdessen zu Ausrichten: links zusätzlich Clear: rechts und umgekehrt. www.test.ycsh80.de. (Willkommen, Anfahrt)

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


    Div ist mir bekannt und mit float habe ich schon in dem altem Template gearbeitet (http://www.ycsh80.de).

    Aber irgendwie stehe ich auf der Leitung: Ich habe keine Vorstellung, wie das Problem (Tabelle ersetzen) damit zu lösen wäre.

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


    Wenn es dann noch gelingt, position-7 (aside) für Wetter/Wasserstand eine Ebene hoch zu setzen und etwas nach oben in den Slider zuschieben (www.ycsh80.de),

    bin ich erstmal fertig.


    vG

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



    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.

  • 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:


  • 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:


    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:



    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:


  • Aaahh - jetzt - ja, nun weiß ich bescheid!

    Vielen Dank!


    Ähnliches kenne ich von meinem alten Template und verstehe nun auch, was die Autoren o. a. Tutorials in jedem Einzelfall meinen.


    User.css muss ich mir noch rein ziehen.
    In einer Kopie von protostar habe ich in template.css einzelnen Originalcode auskommentiert und geänderten Code herein kopiert.
    Der alte Code geht nicht verloren und der geänderte wird ausgeführt.
    Nur die ZeilenNr stimmen nicht mehr, wenn ich Im Forum eine Fundstelle genannt bekomme (aber das ist auch schon mit jedem Update ein Problem).
    Ist meine Methode eine gängige/empfehlenswerte oder gibt es bessere?


    vG

  • 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 zusammen!

    Hier noch ein Nachtrag zu meiner eigenen Arbeit:

    Zitat

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

    Wenn ich im JCE Bild-Manager für Ausrichtung oben einen negativen Wert einsetze, verschiebt sich das Bild relativ zum (kurzen) Text nach oben und die Bilder können sogar überlappen. Im Editor noch position und z-index ergänzen ...
    <img style="margin: -35px 0px 10px 10px; position: relative; z-index: 10; float: right;" src= ...

    dann sieht das so aus www.test.ycsh80.de. 8)


    vG

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

  • 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

  • Moin!

    Ich bin nur der Gelegenheits-Joomlaner, der immer zu Saisonbeginn www.ycsh80.de modifiziert.

    In 2018 bin ich einem grudsätzliche Irrtum zu 'responsiv' aufgesessen und habe mein altes Template nun durch protostar ersetzt.

    Hier gab es das Problem, dass ich mit dem WYSIWYG JCE-Editor arbeite/gearbeitet habe und Tabellen benutzt habe.

    Im Forum bekam ich zahlreiche Hinweise zur Lösung der Probleme.


    Die Mächtigkeit von Protostar und die Formatierung in px kann ich nur bestätigen.

    Der/Mein RWD-Erfolg ist mäßig. Google meckert:

    Inhalt breiter als Bildschirm (welcher Inhalt genau, 980px?)

    Anklickbare Elemente liegen zu dicht beieinander (Menu, wo änderbar?)


    M.W. ist protostar (bootstrap 2) nicht geeignet für Joomla 4 (boostrap 4).

    So warte ich auch auf Joomla 4 mit cassiopeia.


    vG