Protostar z-index

  • Hallo,

    ich arbeite hier www.joomla3.derkps.de mit Protostar und habe auf Seite 1 einen Beitrag in die Position 'Content' gesetzt. Dieser Text erscheint in voller Breite.

    Auf Seite 2 steht ebenfalls ein Text in der Position 'Content'. Zusätzlich habe ich ein Bild in die Position 7 (aside, rechts) gesetzt.

    Die Position 7 soll über den anderen Positionen schweben. Das habe ich in user.css mit

    eingestellt. Zur Demonstration, dass die höhere Z-Ebene funktioniert, habe ich Position 7 verschoben.


    Mich stört, dass die Position 'Content' - trotz niedrigerer Ebene - jetzt schmaler wird.

    Kann man das ändern? Ich möchte im 'Content' weiterhin die volle Breite haben.


    Die schon veröffentlichten Beiträge zur 'rechten Position' habe ich gelesen, kann für mich aber keine Lösung ableiten.


    vG

  • Hallo

    nun habe ich eine neue Position eingefügt und auf Seite 1 veröffentlicht www.joomla3.derkps.de


    index.php zwischen <!-- End Sidebar --> und <!-- Begin Content -->

    PHP
    1. <?php if ($this->countModules('position-kps') && $hideByView == false && $hideByEdit == false): ?>
    2. <div id="position-kps">
    3. <jdoc:include type="modules" name="position-kps" style="html5nosize" />
    4. </div>
    5. <?php endif; ?>


    Aber was habe ich jetzt gewonnen? Ähnlich wie Position-3 kann ich im css nichts verschieben (z-index etc).
    In der .xml werden 14 Positionen aufgeführt. Wo sind die?

    vG

  • KarEm

    Mein BE sieht etwas anders aus und eine Vorschau (Augensymbol) sagt bei http://www.joomla3.derkps.de : keine verfügbar. ?tp=1 funzt auch nicht. hmm

    Egal, bei meinen anderen Seiten funktioniert es. Aber da ist keine 10 oder 14. Vielleicht Platzhalter (frei)? Wem nutzt es?


    christine2

    Woher weißt du, dass ich mal mit .kps gearbeitet habe?


    Beim Einkaufen kam mir der Gedanke, dass es dem neuen Modul an einem Style fehlt.

    Wenn ich im BE z.B. '.well' aus Position-7 ausgewählt habe, konnte ich das neue Modul verschieben.

    In meiner Schlichtheit habe ich in 'index.php' style=kps gesetzt und in 'user.css' einen '.kps' in Anlehnung an '.well' notiert.

    .kps war aber wirkungslos und tauchte im BE nicht zur Auswahl auf.


    Nun habe ich deinen Vorschlag übernommen:

    index.php style="custom"

    user.css .custom {

    Module | Erweitert | Modulstil: vom Template geerbt


    Aber es passiert noch immer nichts:

    Der Modultitel wird nicht angezeigt

    Die Formatierung ist wirkungslos

    Der Firefox-Inspektor sagt, dass der Modulstil fehlt.


    Was habe ich nicht verstanden?


    vG

  • "Style" gibt an, wie das Modul an dieser Stelle ausgegeben wird;

    in der CSS findest du das, was du unter der "id" angegeben hast und wird in der CSS mit einer Raute eingeleitet (id = Raute, class = . [Punkt])

    In deinem Beitspiel also

    Code
    1. #position-hammbummel { Formatangaben }
  • das bedeutet, dass zu id="position-hammbummel" der style="hammbummel" gehört; nur jetzt ist es style="custom" ?

    Nein ;).


    Wenn in der index.php des Temlates id="position-hammbummel" steht, hat es mit "custom" zunächst mal nichts zu tun, sondern bleibt "position-hammbummel" und wird im CSS forgendermassen angesprochen:


    #position-hammbummel {

    ...

    }


    Aendere einfach deinen Eintrag


    .custom {

    min-height: 20px;

    padding: 0px

    margin-bottom: 0px;

    ...

    ...}


    indem du daraus das hier machst:


    #position-kps{

    min-height: 20px;

    padding: 0px

    margin-bottom: 0px;

    ...

    ...

    }

  • Aaaah, jetzt ja! anka .

    Jetzt verstehe ich auch, was christine2 und time4mambo gemeint haben mit "id = Raute, class = . [Punkt])". Eine Klasse spreche ich hier ja garnicht an. Mit # funktioniert es! Meine Gedanken hingen fest an 'style="well" in index.php und der korrespondierenen (Klasse) '.well' in css. Das kommt davon, wenn man blöd ist und nur abschreibtpardon
    Und ich habe festgestellt, dass bei dieser J-Installtion die Positionsanzeige in den Template-Optionen erst freigegeben werden muss. KarEm , jetzt sehe ich auch, wo ich mit meiner position-kps bin.


    Vielen Dank für eure Hinweise!beer


    In index.php habe ich span3 ergänzt, bin aber nicht sicher, ob das regelkonform ist. Ich erinnere mich an einen Thread mit "12er-Regel". Bei mir soll es nur eine ganz kleine Spalte sein.

    Code
    1. <div id="position-kps" class="span3">

    Aber eine Frage habe ich noch:

    Zwischendurch habe ich in user.css immer wieder mit '.kps' und '.command' erfolglos experimentiert.

    Diese Notationen waren nur kurzfristig präsent und wurden oben mehrmals zitiert.
    Wie hat man von außen Einsicht in die css-Daten?search


    vG

  • Na cool8)

    Mit https://whatcms.org/ erfahre ich, ob mit Joomla gearbeitet wird.
    Dann schaue ich mit den

    Zitat


    Entwickler-Tools in den Browsern.

    nach und 'adaptiere' das, was mir gefällt. Aber ischa alles open source und für Forum-support von Nutzen. Wenn das bei z.B. C# auch möglich wäre ...


    Also die vollständige Antwort für Firefox user:
    Menü öffnen | Web-Entwickler | Inspektor (Strg+Shift+C)
    und dann {} Stilbearbeitung.


  • Hallo,

    In index.php habe ich span3 ergänzt, bin aber nicht sicher, ob das regelkonform ist. Ich erinnere mich an einen Thread mit "12er-Regel". Bei mir soll es nur eine ganz kleine Spalte sein.

    Hier mal zum Nachlesen: https://www.ghsvs.de/programmi…ositionen-mit-bootstrap-2

    Also die vollständige Antwort für Firefox user:

    Menü öffnen | Web-Entwickler | Inspektor (Strg+Shift+C)

    und dann {} Stilbearbeitung.

    Bin aber zu faul & mache nur F12 :-) Dennoch, Deine Info ist richtig nett. Danke schön!

    "Stilbearbeitung" ist OK, davor muss man es ja noch untersuchen, siehe Bild.


    wegen der spans und Inspector, siehe Bilder. Aufgeteilt in: Deine Seite 1 & Deine Seite 2


    Seite 1 (da ist der Inhalt inkl. Lokomotive) > span12



    Seite 2 (da ist der Inhalt inkl. Lokomotive) > span 9:



    und rechts "eigenes Modul" > span 3:




    Liebe Grüße

    Christine

  • Hallo christine2 !

    Du gibst dir immer viel Mühe mit kommentierten Screenshots. Das sagt mehr als 1000-2638 Worte:thumbup:


    Die Positionen 7/8 (rechts/links) werden mit mehreren If-Abfragen in index.php auf Existenz geprüft und der Content dann von span12 auf 9 oder 6 reduziert ( chr-hl ). Und das ist genau das, was ich nicht gebrauchen kann. Auskommentieren der If-Abfrage macht keinen Sinn.


    Die 'position-kps', wie ich sie benötige, steht unmittelbar nach <!-- Begin Content --> und vor 'name="position-3" '

    Somit sind die im Tutorial angesprochenen Klassen "container-fluid" und "row-fluid" bereits eingebunden.

    Eine Einstellung class="spanX" steht aus meiner Sicht nicht im Widerspruch zum o.g. Tutorial und passt wg. 1-spaltig auch in die 12er-Regel.


    Seit ich um die Bedeutung von # in user.css weiß, habe ich in den Seiten verschiedene Einstellungen probiert; sie sind nur von vorübergehender Bedeutung. Die Verwendung von 'aside' ist für mich nicht weiter zielführend.


    Vielen Dank
    vG

  • Mission completed!

    Eine Zusammenfassung für alle, die ebenfalls mal mit Protostar ein schwebendes Modul mit neuer Position einrichten wollen.


    Arbeitsschritte

    1. templateDetails.xml: zwischen bestehenden Positionen einfügen

    Code
    1. <position>position-neu</position>

    2. index.php: zwischen bestehenden Positionen einfügen, z.B. nach <!-- Begin Content -->

    PHP
    1. <!-- ####### neue Position, Beginn ########## -->
    2. <?php if ($this->countModules('position-kps') && $hideByView == false && $hideByEdit == false): ?>
    3. <!-- <div id="position-neu" > -->
    4. <div id="position-neu" class="span3">
    5. <jdoc:include type="modules" name="position-kps" style="xhtml" />
    6. </div>
    7. <?php endif; ?>
    8. <!-- ########### neue Position, Ende ########### -->

    3. user.css: neuen Style einfügen, zum Beispiel

    Code
    1. #position-neu {
    2. height: auto; padding: 10px; margin: 10px;
    3. background-color: #ccc; /*#ffffff;*/
    4. border: 4px solid #e3e3e3;
    5. float: right;
    6. position: relative; top: -70px; right: 10px; z-index: 100;
    7. }
  • Hallo der_kps,


    Zunächst: Danke für Deine Zusammenfassung. Aber: habs (leider) befürchtet ...... Das mit den minus Werten (position) hat Folgewirkungen. Schau mal hier:



    In der mobilen Ansicht verdeckt es dadurch den: "Hamburger". Könnte man ev. mit einem sogenannten "hidden-phone" bearbeiten. (= Kein Foto mobil)

    Tut mir Leid, weiß noch nicht .... In Moment, nur auf die Schnelle gedacht. Hmm.


    Liebe Grüße

    Christine

  • Hallo christine2!

    #18: Hamburger? BigMac, DoppelWopper. Verstehe ich jetzt nicht. thinking Ahh, jetzt. Du meinst das mobile Menü!

    Niemand ist gezwungen, eine negativen Top-Wert zu verwenden; nur ich!

    Wir erinnern uns an diese Seite www.woltman.de (Kalenderelement, cantao) oder diese www.ycsh80.de (position7/aside, top: -30px).

    Meine persönliche Aufgabenstellung war und ist, ein Element überlappend in ein anderes zu verschieben. Jedenfalls für die Saison 2019.

    Bei 'aside' rutscht das in der mobilen Ansicht nach unten, da stört nichts.

    Bei http://www.joomla3.derkps.de ist top: -70px natürlich heftig, aber eben nur ein Beispiel.

    In der Mobil-Anschicht ist das Design eh futsch und im Klopapierrollen-Layout sehen die Seiten ... na ja, eher sch.... aus. (woltman.de soll 7500,-€ gekostet haben)


    #!9: Danke für diesen Code, jetzt sehe ich auch den BigMac (oder war es der Hamburger?):thumbup:

    Damit werde ich noch etwas spielen.

    Aber nicht jetzt. Zum arbeiten ist es noch immer zu warm, zum schlafen aber auch. Und ein 'beruhigendes' Bierchen geht nicht, weil ich in der Früh zum Doc muss wg. Blutwerten.

    Irgendwas ist immer. ;(Ich setze mich in den Strandkorb und warte ab.8)


    vG