Accordion 2023

MichaelW · 18. Juli 2022

Hallo Mario,

schon wieder ich

Ich würde ganz gerne das Widget Accordion 2023 einsetzen, bin aber mit dem Layout nicht ganz glücklich. Optisch würde ich lieber Accordion 2021 nutzen, aber die Einstellmöglichkeiten sind beim 2023er einfach besser. Kann man irgendwie die Optik identisch anpassen (also weißer Hintergrund und Linien oben und unten)? Momentan sieht es so aus - und soll so nicht bleiben:

Besteht auch die Möglichkeit, dass man die Überschrift linksbündig zum Inhalt schieben kann?

Viele Grüße

Michael

Mario · 18. Juli 2022

zu 1.

In den beiden HTML-Dateien findest du in Zeile 37 folgendes headstyle += 'border-bottom: 1px solid transparent;'; ändere mal das transparent in eine Farbe.

zu 2.

Im Widget "Einstellungen > Innenabstand Horizontal em", hier den Wert verringern.

MichaelW · 19. Juli 2022

Hallo Mario,

vielen Dank - hat funktioniert. Besteht noch eine Möglichkeit den Tabs Trennlinien (oben und unten) zu verpassen?

Viele Grüße

Michael

Mario · 19. Juli 2022

Genau das sollte der Code oben eigentlich bewirken. Bitte genau beschreiben.

MichaelW · 19. Juli 2022

Komme gerade nicht an meinen Rechner ran. Schau gerne mal hier: https://hosting.zeta-producer.com/7368751766/index.html Änderungen sind dort eingeflossen.

Den Patzer mit dem Menü übersiehst Du bitte Keine Ahnung, was mit dem Fullpage Menü passiert ist. Auf dem iPhone ist es einwandfrei. Muss ich mir morgen mal ansehen.

Mario · 19. Juli 2022

Füge mal dem Accordion etwas Inhalt hinzu und beschreibe genau was du meinst.

MichaelW · 20. Juli 2022

Hallo Mario,

Fehler lag bei mir. Mit Deiner Anleitung hat es wunderbar funktioniert. Muss jetzt mal noch überlegen, wie ich ein Formular einbauen kann. Der erste Versuch war nicht so prall (siehe Tab 'UMZUG'). Ich finde auch keine Möglichkeit den Focus-Rahmen der Felder zu ändern. Ist ja (zumindest optisch) blöd, wenn alles blau und der Focus-Rahmen rot ist. Ist aber ein anderes Thema. Kennst du vielleicht einen Formular-Builder, mit dem ich WYSIWYG arbeiten und den Quelltext kopieren kann? Habe jetzt ein Formular in ZETA erstellt und über Seitenquelltext im Browser kopiert und in dein Widget eingefügt.

Auch das Fullpage-Widget funktioniert und nach Löschung des Cache sieht es auch vernünftig aus. Ich finde aber ums verr***** keinen Grund, warum ein kleines Kästchen über dem N von AN erscheint (https://hosting.zeta-producer.com/7368751766/index.html). Einzig beim iPhone und iPad erscheint es nicht, Chrome, Firefox und Edge zeigen es an.

Mario · 20. Juli 2022

Das ist eine "Checkbox", lässt sich ja auch auswählen wenn man in den oberen Bereich klickt.

Das Widget "Fullscreen-Menü" arbeitet mit einer "Checkbox" um das Menü zu öffnen da es ja ganz ohne JS auskommt. Diese sollte aber nicht sichtbar sein.

Verschwindet sie denn wenn du den Code für das Formular heraus nimmst?

Folgendes CSS sollte auch funktionieren, könnte aber Einfluss auf dein Formular haben:

CSS

input[type="checkbox"], input[type="radio"] {
display: none !important;
}

Ich versuche das mal nachzustellen und schaue ab ich da was am Widget ändern kann.

Oder eben das: https://www.widget-zp.de/2022/side-menue.html

Mit Formular-Editoren habe früher mal gearbeitet, ist schon lange her. Schau mal hier: https://www.zeta-producer.com/de/tools.html

MichaelW · 20. Juli 2022

Hallo Mario,

probiere ich später aus. Das Formular kam später rein, da war die Box bereits vorhanden. Ich hatte das Widget auch schon einige Male entfernt und neu eingearbeitet, dann taucht sie auf. Wie gesagt: bei den mobilen Apple-Geräten erscheint das Kästchen nicht.

Mario · 20. Juli 2022

Ich kann das leider auch mit deinem Layout nicht nachstellen. Da ist es schwierig was zu finden.

Eventuell kannst du mir das ja noch recht kleine Projekt zukommen lassen.

Extras > Optionen > Projekt senden

Anderer Empfänger: mario(at)zella.de

MichaelW · 21. Juli 2022

Hallo Mario,

habe das Projekt mit einem anderen Producer-Theme neu aufgesetzt; Kästchen erscheint wieder. Das neue Projekt (mit noch weniger Inhalt) wird gerade zu Dir übertragen. Wäre klasse, wenn Du etwas findest und mit einen Tipp gibst.

Viele Grüße

Michael

Mario · 21. Juli 2022

Scheinbar nutzt du noch das alte Widget "Fullpage Menü" und nicht das neue Fullscreen Menü.

MichaelW · 22. Juli 2022

Hallo Mario,

danke für den Hinweis - da habe ich gepennt. Leider bekomme ich das Kästchen nicht weg. Widget wurde ausgetauscht, Kästchen ist noch immer da. Neues Projekt aufgesetzt (wird gerade an Dich übermittelt) und das Fullscreen-Widget eingesetzt: Kästchen ist wieder da.

Wenn Du noch eine Idee hast..... Ansonsten muss ich auf eine Deiner anderen Lösungen ausweichen (aber hier gefällt mir der Öffnen/Schließen-Effekt halt viel besser).

Viele Grüße

Michael

Mario · 22. Juli 2022

Da ist ein Fehler im Widget "Info-Line".

Öffne mal die "infoline.css" im Widget-Ordner "wzp-info-line" hier ganz unten das </style> löschen und die Datei speichern.

Anschließend "Extras > Entwickler > Änderungen übernehmen"

MichaelW · 23. Juli 2022

Hallo Mario,

was soll ich sagen? PERFEKT und 1.000 DANK. Jetzt sieht es einwandfrei aus.

Viele Grüße

Michael

MichaelW · 25. Juli 2022

Hallo Mario;

eine andere Frage zum Widget: Kann man die Höhe des Inhaltbereichs einstellen? Hintergrund ist, dass ich gerne kleine Formulare einbauen möchte. Das funktioniert, allerdings ist der Inhaltsbereich recht klein und ich muss scrollen (es wird - wenn keine Text eingegeben wurde - nur eine Zeile angezeigt).

Viele Grüße

Michael

Mario · 25. Juli 2022

Die Höhe der einzelnen Tabs wird durch den Inhalt vorgegeben, dabei sollte es eigentlich keine Rolle spielen ob das Text oder Formulare sind.

Wenn du den Quellcode für das Formular über den Editor einfügst kann es auch sein das der Editor da noch etwas hinzufügt was dazu führt.

Da du die Formulare sowieso über Quellcode einfügst kannst du mal folgendes probieren.

CSS:

CSS

<style>
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #333;
overflow: hidden;
}
input {
position: absolute;
opacity: 0;
z-index: -1;
}
label {
position: relative;
display: block;
padding: 0 0 0 1em;
color: #fff;
background: #999;
font-weight: bold;
line-height: 3;
cursor: pointer;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: #e2e2e2;
-webkit-transition: max-height .95s;
-o-transition: max-height .95s;
transition: max-height .95s;
}
.tab-content p {
margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
max-height: 60em;
}
/* Icon */
label::after {
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
input[type=checkbox] + label::after {
content: "+";
}
input[type=radio] + label::after {
content: "\25BC";
}
input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}
.end {
height: 5px;
}
</style>

Alles anzeigen

Widget Quelltext:

HTML

<div class="tab"><input id="tab-1" type="radio" name="tabs2"><label for="tab-1">Nur Text</label>
<div class="tab-content">
<!--############## ANFANG INHALT TAB 1 ##############-->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!--############## ENDE INHALT TAB 1 ##############-->
<div class="end"></div>
</div>
</div>




<div class="tab"><input id="tab-2" type="radio" name="tabs2"><label for="tab-2">Ein Bild</label>
<div class="tab-content">
<!--############## ANFANG INHALT TAB 2 ##############-->
<p>Ein Text zum Bild "Lorem ipsum dolor sit amet..."</p>
<img src="https://hosting.zeta-producer.com/7368751766/media/images/mp_handwerk.jpg" alt="Bild">
<!--############## ENDE INHALT TAB 2 ##############-->
<div class="end"></div>
</div>
</div>




<div class="tab"><input id="tab-3" type="radio" name="tabs2"><label for="tab-3">360° Panorama</label>
<div class="tab-content">
<!--############## ANFANG INHALT TAB 3 ##############-->
<p>Ins Bild klicken und mit gedrückter Maustaste die Maus in die gewünschte Richtungen bewegen.</p>
<iframe src="https://www.zella.de/pano/luftpano/" width="100%" height="500" frameborder="0"></iframe>
<!--############## ENDE INHALT TAB 3 ##############-->
<div class="end"></div>
</div>
</div>




<div class="tab"><input id="tab-4" type="radio" name="tabs2"><label for="tab-4">Video AC/DC - Thunderstruck</label>
<div class="tab-content">
<!--############## ANFANG INHALT TAB 4 ##############-->
<div style="text-align: center; margin: auto">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/v2AC41dglnM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  
</div>
<!--############## ENDE INHALT TAB 4 ##############-->
<div class="end"></div>
</div>
</div>

Alles anzeigen

Accordion 2023

Teilen

Ähnliche Themen

Header mit Accordion 2023

Panorama-Tour