Neues Template „Little Jo“

[isometric]

Das klappt wunderbar. Was muss ich machen, um das Template so anzupassen?

Ich würde es nämlich sehr gerne verwenden

Edit-Ergänzung:
Ich hatte hier eine Diskussion angestoßen, ob es sinnvoll ist eine zum Template passende init-Datei für Tinymce auszuliefern.

Wäre folgender Eintrag in die init-Dateien sinnvoll, damit Bilder wahlweise links oder rechts von Text umflossen werden sinnvoll, oder gibt es eine bessere Lösung?

Code: Select all

  "image_class_list": [
  {"title": "Choose the Class", "value": ""},
  {"title": "align left", "value": "left_30"},
  {"title": "align right", "value": "right_30"}
  ]

[lck]

Das klappt wunderbar. Was muss ich machen, um das Template so anzupassen?

In dem Test habe ich derweil nur die "lines" ausgeblendet, per display: none.
stylesheet.css Zeile 427

Code: Select all

.toggle-label .lines {
    cursor: pointer;
    margin: 0;
    position: relative;
    z-index: 999;
    
    display: none; /* lck - Test */
}

So kann das aber nicht bleiben. Die Frage ist, mit was kann Android FF umgehen oder warum nicht (Bug?), das muss ich erst eruieren.

Ich hatte hier eine Diskussion angestoßen, ob es sinnvoll ist eine zum Template passende init-Datei für Tinymce auszuliefern.

Wäre folgender Eintrag in die init-Dateien sinnvoll, damit Bilder wahlweise links oder rechts von Text umflossen werden sinnvoll, oder gibt es eine bessere Lösung?

Eigentlich unnütz, da Frank und ich es uns eigentlich zur Regel gemacht haben das in das CSS so einzubinden, dass man im Editor bei "Format" die entsprechenden Klassen auswählen kann, wenn ein Bild markiert wird (auch auf div's anwendbar). Also alles schon vorhanden. Siehe dazu auch Demo-Template Template specific styles.
 

little-jo_formatauswahl-images.jpg

[isometric]

Eigentlich unnütz, da Frank und ich es uns eigentlich zur Regel gemacht haben das in das CSS so einzubinden, dass man im Editor bei "Format" die entsprechenden Klassen auswählen kann, wenn ein Bild markiert wird (auch auf div's anwendbar). Also alles schon vorhanden. Siehe dazu auch Demo-Template Template specific styles.
 

So ist das natürlich schon optimal gelöst, vielen Dank für den Hinweis.

[lck]

So kann das aber nicht bleiben. Die Frage ist, mit was kann Android FF umgehen oder warum nicht (Bug?), das muss ich erst eruieren.

Bitte mal testen http://www.cmsimplexh.momadu.de/demos/_test/little-jo/. Das sollte Firefox (Android) jetzt auch mögen.

Wenn du das so haben willst, die Änderungen sind relativ gering.
stylsheet.css ~Zeile 427

Code: Select all

.toggle-label .lines {
    cursor: pointer;
    margin: 0;
    position: relative;
    z-index: 999;
    
    display: none; /* NEU */
}
.toggle-label:before { /* NEU */
    background-color: #fff;
    box-shadow: 0 -12px #fff, 0 12px #fff;
    content: "";
    height: 2px;
    width: 40px;
    margin-top: 0;
    position: absolute;
    /* transition: box-shadow 500ms linear; */ /* optional */
}
#aside-toggle:checked ~ #lck_wrapper .lck_head .toggle-label:before { /* NEU */
    box-shadow: none;
}

*Edit und diese Zeile ~462

Code: Select all

#aside-toggle:checked ~ #lck_wrapper .lck_content .toggle-label::before {

zu

Code: Select all

#aside-toggle:checked ~ #lck_wrapper .lck_content .toggle-label::after {

[isometric]

Bitte mal testen http://www.cmsimplexh.momadu.de/demos/_test/little-jo/. Das sollte Firefox (Android) jetzt auch mögen.

Wenn du das so haben willst, die Änderungen sind relativ gering.

Die Änderung funktioniert mit Firefox. Vielen Dank, damit komme ich dann erst mal zurecht.

Zu der Möglichkeit Videos responsive einzubinden, habe ich auch folgende Frage:
wie bekomme ich diese <div><div>iframe</div></div> am elegantesten um das iframe herum? Im Editor kann ich zwar einem Div die Klasse zuweisen, aber wie mache ich das mit dem zweiten? Geht das nur über die Quellcodeansicht?

Code: Select all

<div class="responsive-video-wrapper">
<div class="responsive-video"><span class="xhplugincall mceNonEditable" lang="de">{{{youtube_privacy('<iframe title="YouTube video player" src="https://www.youtube-nocookie.com/embed/k4F6ikm_ep8" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');}}}</span></div>
</div>

[lck]

Zu der Möglichkeit Videos responsive einzubinden, habe ich auch folgende Frage:
wie bekomme ich diese <div><div>iframe</div></div> am elegantesten um das iframe herum? Im Editor kann ich zwar einem Div die Klasse zuweisen, aber wie mache ich das mit dem zweiten? Geht das nur über die Quellcodeansicht?

Ja. Eine andere Möglichkeit sehe ich momentan nicht.

[olape]

Also meine Aufrufe sehen nur so aus:

Code: Select all

<div class="youtube"><span class="xhplugincall mceNonEditable" lang="de">{{{youtube_privacy('<iframe src="..." width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');}}}</span></div>

also theoretisch sogar nur so:

Code: Select all

<div class="youtube">{{{youtube_privacy('<iframe src="..." width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');}}}</div>

denn das span ist ja nur vom Editor-Plugin.

heraus kommt dabei:

Code: Select all

<div class="youtube"><div class="yp-video-container" style="max-width: 100%;"><iframe src="..." width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div><script>$("#ypxh_1 button").click(function() {$(this).parent().parent().html('<iframe src="..." width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');});</script></div>

die Klasse youtube ist im Templatestyle so angelegt:

Code: Select all

div.youtube {
  max-width: 560px;
  max-height: 315px;
  margin-bottom: 4em;

Und die Videos verhalten sich responsive.
Denn es steckt ja <div class="yp-video-container" style="max-width: 100%;"> in der Ausgabe.

[isometric]

Code: Select all

<div class="youtube">{{{youtube_privacy('<iframe src="..." width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');}}}</div>

Und die Videos verhalten sich responsive.
Denn es steckt ja <div class="yp-video-container" style="max-width: 100%;"> in der Ausgabe.

Das hat mich auf die Idee gebracht den Aufruf ganz in youtube_privacy zu verlagern:

In diesem Codeblock habe ich in die erste und letzte Zeile geändert um den "responsive-video-wrapper" einzubauen.

Code: Select all

    $t = '<div class="yp-video-container" style="max-width: ' . $pcf['video_max-width'] . ';">
          <div id="' . $id . '" class="yp-video_preview" style="background-image: url(data:image/jpeg;base64,' . $imageData . ');">
            <div class="yp-video_preview_title">' . $ptx['info_title'] . '</div>
            <div class="yp-video_preview_text">' . $ptx['info_text'] . '</div>
            <img style="cursor: pointer;" src="' . $pth['folder']['plugins'] . 'youtube_privacy/images/play.png">
          </div>
        </div>';

Code: Select all

    $t = '<div class="responsive-video-wrapper"><div class="yp-video-container" style="max-width: ' . $pcf['video_max-width'] . ';">
          <div id="' . $id . '" class="yp-video_preview" style="background-image: url(data:image/jpeg;base64,' . $imageData . ');">
            <div class="yp-video_preview_title">' . $ptx['info_title'] . '</div>
            <div class="yp-video_preview_text">' . $ptx['info_text'] . '</div>
            <img style="cursor: pointer;" src="' . $pth['folder']['plugins'] . 'youtube_privacy/images/play.png">
          </div>
        </div></div>';

Wie kann ich das aktive Template abfragen? Ich würde gerne eine Abfrage einbauen, dass nur im Little-Jo-Template der geänderte Codeblock verwendet.

[lck]

Das hat mich auf die Idee gebracht den Aufruf ganz in youtube_privacy zu verlagern:

Zu der Möglichkeit Videos responsive einzubinden, habe ich auch folgende Frage:

Wenn du Holgers Plugin youtube_privacy verwendest, dann sind gar keine Anpassungen im CSS nötig. Das alles bringt das Plugin CSS schon mit. Im Pluginaufruf nur das iframe einfügen und fertig.

[olape]

Wie kann ich das aktive Template abfragen?

Code: Select all

if($cf['site']['template'] == 'little-jo'
|| $tx['subsite']['template'] == 'little-jo') {
    //your code
}

Sollte funktionieren.
Falls es in einer Funktion ist, musst du schauen, dass $ch und $tx bei global auftauchen.