Beiträge von Mario

Zitat von Hutzel2018

eine Frage habe ich noch, es ist schon was länger her, wie finde ich heraus wie der einzelne Container heisst, jetzt wie in diesem Fall

#slider .flext-caption

Das benötigst du in dem Fall nicht. Einfach wie oben beschrieben unter Einstellungen > CSS einfügen. #slider .flex-caption ist die CSS-Klasse für das Textfeld in der Header-Grafik.

Zitat von Hutzel2018

und zur Erläuterung bitte, was bedeuten die Werte -050%, 0%

Im Original wird der Text mit position:absolute; left:50%; top:50%; zentriert. Damit würde der Text aber in der Mitte beginnen und nach rechts und unten auslaufen. Mit transform: translate(-50%,-50%); wird dieser dann um jeweils 50% nach oben und links verschoben. Somit wird dieser dann mittig dargestellt.

Die Änderungen:

top: auto;: Hebt die Angabe top:50%; auf.

bottom: 0;: Verschiebt nach ganz unten.

transform: translate(-50%,0%);: Verschiebt den Text um 50% nach links damit er mittig platziert wird. Der Versatz nach oben wird mit 0% aufgehoben weil Text mit bottom: 0; bereits unten bündig dargestellt wird.

Einstellungen > CSS:

<style>
#slider .flex-caption {
width: 100%;
top: auto;
bottom: 0;
-webkit-transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%);
transform: translate(-50%,0%);
}
</style>

Zitat von 6edo

Ich habe den Fehler gefunden: Ich hatte vergessen "webfonts-deactivate 1" wieder zu entfernen.

Die "1" muss bleiben. Ansonsten können die Fonts wieder von Google geladen werden.

Am besten dem Hinweis von Beitrag 5 folgen.

Das Widget ist vorhanden. Bitte einmal den Browser-Cache löschen.

Der Header in deinem Layout Bare steht auf z-index:5. Du solltest also mindestens 6 wählen.

Zu weiteren Fragen wie schon von Steffen angeregt im entsprechenden Forum.

zu1.

Mit "F8" in den Spaltenmodus > Rechtsklick auf den Header > löschen > mit "F8" zurück zur Livevorschau

Anschließend den Header neu anlegen.

zu2.

• Wie von Stefan schon geschrieben das Widget "Sidenav Button" weiter nach unten verschieben. Wenn du diesen zu einem anderen Artikel in eine Spalte packst wird hier auch kein Abstand erzeugt.
• Soll der Artikel-Abstand grundsätzlich bei den 4em erhalten bleiben kannst du den Textartikel auch mit etwas CSS nach oben schieben. (Unten auf das Mischpult > Mehr. Hier im Feld Inline-CSS folgendes eintragen: margin-top:-2em;.

PS: Die Sidenav-Buttons verstecken sich hinter dem Headerbild. Diese kannst du davor darstellen indem du im Widget unter "Einstellungen" den Wert für den "z-index" entsprechend erhöhst.

Eine solche Toolbar ist bei mir nicht vorhanden nur Gestensteuerung.

Aber bei mir springt jetzt nichts mehr auf der Seite.

Wenn du den Ordner in "meine Webfonts" benannt hast musst du in den CSS-Daten überall den Code <$=page.pathToRoot$>media/files/webfonts/ umbenennen in <$=page.pathToRoot$>media/files/meine Webfonts/.

Aber auch da könnte das Leerzeichen noch zu Problemen führen.

Ich kann das auf beiden Seiten nachstellen.

• Die Seite ist frisch geladen und ich befinde mich ganz oben. Ich swipe kräftig nach oben damit die Seite schnell nach unten scrollt.
• https://leichtlast.de/, die Seite scrollt ganz nach unten und springt anschließend kurz über die Überschrift "Leicht".
• https://campandroid.zeta-producer.com/index.html, die Seite scrollt ganz nach unten und springt anschließend direkt über den Footer.

Telefon: Google Pixel 5

Software: Android 12 Build SQ3A.220705.003A1

Browser: Google Chrome 105.0.5195.136

Im Firefox und Dolphin tritt mit dem gleichen Telefon nicht auf.

Sorry, nach den Änderungen Extras > Entwickler > Änderungen übernehmen durchführen.

Zitat von R. Lehmann

Es funktioniert ist aber etwas umständlich.

Wie gesagt bei diesem Widget war es so angedacht das die Hintergrundfarbe durchscheint.

Bei weiteren Fragen bitte im entsprechenden Forum.

Das ist in diesem Widget eigentlich genau so angedacht. Lässt sich natürlich mit etwas CSS anpassen.

• Navigiere zum Widget-Ordner wzp-accordion-2023 und und öffne mit einem geeigneten Text-Editor die zu verwendete HTML-Datei 1. Tab geschlossen.html oder 1. Tab geoeffnet.html.
• Navigiere hier zur Zeile 37 und ändere headstyle += 'border-bottom: 1px solid transparent;'; in headstyle += 'border-bottom: 1px solid red;';
• Navigiere zur Zeile 80 und ändere <div class="accordion2023<$=article.id$> js-accordion<$=article.id$>"> in <div class="accordion2023<$=article.id$> js-accordion<$=article.id$>" style="border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;">.

Bei weiteren Fragen bitte im entsprechenden Forum.

Das sind Font Awesome Icons, diese sind zB. im Texteditor unter Piktogramme aufrufbar.

Die Icons sind in ZP implantiert, und werden automatisch auf deinem Webserver gehostet.

Also keine Gefahr.

Sieht für mich ebenfalls so aus das die Seite noch nicht veröffentlicht wurde. Eventuell einmal "komplette Website veröffentlichen".

Zitat von coseco

..., das haben wir alles gemacht, siehe Anhänge...

Wurden auch wie Schritt 2 beschrieben die Font-Dateien gedownloadet und wie in Schritt 3 beschrieben in ZP eingepflegt?

Ich würde es in Mobile oben rechts im Headerbild platzieren, auf scrollend schalten und den z-index so wählen das es hinter der Navi und über dem Headerbild liegt.

Oder gleich ausblenden weil du die Verlinkung ja außerdem noch in den "Sidenav-Buttons" hast.

PS: Für weitere Fragen zu dem externen Widget bitte im entsprechendem Forum.

Widget Position Bild

Wichtig: Nicht vergessen für die "Mobile Ansicht" die Position des verlinkten Bildes anzupassen damit der Menü-Button oder anderer Inhalt nicht verdeckt wird.

Hallo Dennis,

ja das lässt sich mit Textschatten umsetzen.

Leider beschreibst du nicht genau wo du das einsetzen willst, sonst hätte ich das gerne genauer beschreiben können. Aber in 5 Stunden bin erst mal für 10 Tage weg.

Hier einmal 3 CSS-Varianten wie du den Textschatten als Umrandung einsetzen kannst in der Farbe Weiß, für andere Farben einfach das #ffffff entsprechend anpassen.

Textumrandung Weiß Leicht:

text-shadow: 0 0 3px #ffffff;

Textumrandung Weiß Mittel:

text-shadow: 1px 1px 1px #ffffff, 1px -1px 1px #ffffff, -1px 1px 1px #ffffff, -1px -1px 1px #ffffff;

Textumrandung Weiß Stark:

text-shadow: 2px 2px 0 #ffffff, 2px -2px 0 #ffffff, -2px 2px 0 #ffffff, -2px -2px 0 #ffffff, 2px 0px 0 #ffffff, 0px 2px 0 #ffffff, -2px 0px 0 #ffffff, 0px -2px 0 #ffffff;

Du kannst den Code natürlich entsprechend erweitern.

<style>
.MeinFormBTN input.button {
   background: transparent !important;
   color: blue !important;
   border: 1px solid blue !important;
   transition: all 0.2s !important;
}
.MeinFormBTN input.button:hover {
   color: red !important;
   border: 1px solid red !important;
}
</style>

Die Farben/Werte kannst du natürlich an dein gewünschtes Layout anpassen.

Zitat von Hanabi

Falls nur dieser eine Button im Formular anders aussehen soll, muss individuelles CSS angewendet werden. Dazu könnte dann sicherlich ein anderer User helfen.

Website > Einstellungen > CSS:

<style>
.MeinFormBTN input.button {
    background: transparent !important;
}
</style>

• Öffne das entsprechende "Widget Formular", gehe unten links auf das "Mischpult" anschließend auf "Mehr".
• Hier trägst unter CSS-Klasse folgendes ein: MeinFormBTN

Zitat von Duschgel

Können vor der Schrift im Hauptmenü noch kleine Symbole eingesetzt werden, ...

• Doppelklick auf die gewünschte Seite > Name
• Hier fügst du folgendes, gefolgt von einem Leerzeichen vor deinem Seitennamen ein. <i class='fa fa-home' aria-hidden='true'></i>
• Rufe DIESE SEITE auf, und finde dein Icon.
• Ersetze fa-home durch den Code des gewünschten Icons zB.: fa-envelope-o

Abstand Menüeintrag zur Triangle.

2em ist der Standardwert.

<style>
nav li.haschilds > a:not(.button), nav .dropdown-menu li.haschilds {
padding-right: 2em;
}
</style>

Abstand Triangle zum nächsten Menüeintrag.

1em ist der Standardwert.

<style>
nav > ul li a:not(.button) {
padding: 0 1em;
}
</style>

Anschließend überprüfen ob sich das negativ auf das "Mobile Menü" auswirkt.

Einstellungen > CSS:

<style>
/* HAUPTMENUE 44PX NACH UNTEN */
#header #nav {
    margin-top: 44px;
}
</style>

Anschließend den Spacer auf der Startseite wieder entfernen.

Zitat von Duschgel

Dennoch eine Frage. Kann ich das Facebook Side Plugin in das Side BTN SlideWindow Widget einbinden ? Der Kunde möchte das nur sehen, wenn man in der Side Bar klickt und das Fenster sich dann aufschiebt.

Das Widget bietet die Möglichkeit den Code alternativ über den HTML-Editor einzufügen (Gruppe HTML/CSS). Somit also kein Problem.

Das FB-PlugIn bietet ja 2 Möglichkeiten zur Einbindung. Diese sollten beide funktionieren.

Variante "iFrame":

Einfach den generierten Code über den HTML-Editor im Widget einfügen.

Variante "JavaScript-SDK":

Den ersten Teil über "Website > Erweitert > Attribute > body_start" einbinden.

Den 2. Teil im Widget mit dem HTML-Editor einfügen.

Zitat von Duschgel

Hoffentlich bin ich nicht zu stressig.

Nö

PS: zu weiteren Fragen zu den Externen Widgets bitte im entsprechendem Forum.

Ähnliches habe ich auf meiner Seite Zella.de umgesetzt. Hierzu sind allerdings gute Kenntnisse in HTML/CSS nötig.

Eventuell sind ja die Widgets Sliding Hauptmenü oder Top Bar etwas für dich.

Da immer wieder Anfragen zur Anpassung des Warenkorb Icons gestellt werden hier ein kleines Tutorial dazu.

• Mit unterstehendem CSS können Sie den Warenkorb-Icon des Shops von Zeta Producer anpassen.
• Navigieren Sie zur Seite "Shop > Warenkorb", öffnen Sie hier das Widget "Shop:Warenkorb" klicken Sie unten links auf das "Mischpult" und fügen eine Grafik für Ihr "Warenkorb-Icon" ein.
• Damit die Grafik übernommen wird gehen Sie anschließend auf: "Erweitert > Erstellen > Alle Seiten erstellen".

• Untenstehendes CSS fügen Sie über Website > Einstellungen > CSS ein.
• WICHTIG: Ganz am Anfang des CSS schreiben Sie ein <style> und ganz am Ende ein </style>.

Position des Icons Oben/Rechts:

/*###### POSITION WARENKORB ICON ######*/
.zpshopbasketindicator {
bottom: auto;                      /* Aufhebung Position Unten */
top: 16px;                         /* Abstand von Oben */
right: 16px;                       /* Abstand von Rechts */
}

Warenkorb Größe "GROSS"

/*###### GROESSE WARENKORB ICON (GROSS) ######*/
.zpshopbasketindicator .zpbasketindicator {min-width:80px;}
.zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {max-width:80px;}
.zpshopbasketindicator .zpbasketindicator > span {font-size: 16px; padding: 4px 9px;}

Warenkorb Größe "MITTEL"

/*###### GROESSE WARENKORB ICON (Mittel) ######*/
.zpshopbasketindicator .zpbasketindicator {min-width:60px;}
.zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {max-width:60px;}
.zpshopbasketindicator .zpbasketindicator > span {font-size: 14px; padding: 3px 7px;}

Warenkorb Größe "KLEIN"

/*###### GROESSE WARENKORB ICON (KLEIN) ######*/
.zpshopbasketindicator .zpbasketindicator {min-width:40px;}
.zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {max-width:40px;}
.zpshopbasketindicator .zpbasketindicator > span {font-size: 12px; padding: 2px 6px;}

Abstand zwischen Icon und Artikelanzahl

/*###### ABSTAND ICON/ARTIKELANZAHL ######*/
.zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {
top: 22px;
}

Layout Artikelanzahl

/*###### LAYOUT ARTIKELANZAHL ######*/
.zpshopbasketindicator .zpbasketindicator > span {
border-radius:50% !important;                           /* (50% = Rund) (3px = 3px Runde Ecken) (0 = Eckig) */
color:blue;                                             /* SCHRIFTFARBE */
background-color:rgba(244, 255, 255, 0.8);              /* HINTERGRUNDFARBE */
box-shadow: 0 0 0 1px blue;                             /* RAHMENFARBE */
}

Anpassung für die Mobile Ansicht

/*###### WARENKORB ICON MOBILE ######*/
@media (max-width: 920px) {               /* BREAKPOINT */
.zpshopbasketindicator {
top: 16px;                                /* ABSTAND VON OBEN */
right: 16px;                              /* ABSTAND VON RECHTS */
}
/* WARENKORB ICON KLEIN */
.zpshopbasketindicator .zpbasketindicator {min-width:40px;}
.zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {max-width:40px;}
.zpshopbasketindicator .zpbasketindicator > span {font-size: 12px; padding: 2px 6px;};
}

Zitat von Helmut Maier

Tausend Dank, Mario, hat geklappt !

Dann schließe ich noch an: Gib es einen "Zaubertrick", das unsäglich kleine Warenkorb-Icon größer zu machen?
- Ich hatte ein anderes Symbol mit 512x512px hochgeladen, es wurde aber genauso klein dargestellt.

Helmut

Dann probiere es mal so:

<style>
.zpshopbasketindicator {
bottom: auto;
top: 1em;
}
.zpshopbasketindicator .zpbasketindicator {
min-width: 60px;
}
.zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {
max-width: 60px;
}
</style>

Beachte aber das du Position und Größe auch in der "Mobilen Ansicht" kontrollieren musst.

Da fehlt die schließende Klammer. Der Ort ist sicher auch der falsche.

Richtig wäre folgender Code unter Einstellungen > CSS:

<style>
.zpshopbasketindicator {
bottom:auto;
top:1em;
}
</style>

Nach dem veröffentlichen eventuell den Browsercache leeren.

Zitat von Soeren

Deine Verlinkung hat für mich aber den Nagel auf den Kopf getroffen. Für mich sieht es wie eine organisierte Masche aus.

Ja, natürlich, das ist bei 99% der Fällen so, von Bilder-Lizenzen bis Google-WebFonts.

Zitat von Soeren

Trotzdem frage ich mich noch immer warum Zeta ein Template zur Verfügung stellt, bei dem WebFonts genutzt werden (sowas muss doch nicht sein

oder hätte anders gelöst werden können).

• Naja, zum einen sollten ja verschiedene Layouts auch ein verschiedenes Layout haben, wenn alle Layouts auf die gleichen Schriftarten begrenzt sind macht das dann nur wenig Sinn.
• Zum anderen muss man bedenken das dieses Gesetz ja noch recht jung ist und bei ZP nicht wie bei Google oder Microsoft tausende von Mitarbeitern sitzen die das in 4 Wochen stemmen könnten.

Zitat von Soeren

Oder wenn schon WebFonts im Template enthalten sind, könnte Zeta ja auch gleich einen "Cookie-Consent" im Template hinterlegen.

Ich bin mir sicher, sollte das technisch möglich sein wird daran schon gearbeitet.

Alternativ wird sicherlich auch sofern technisch Möglich an einer besseren Variante gearbeitet .

• Du kannst im Layout-Designer auch Schriftarten wählen welche nicht von Google sind. (Welche das sind kann ich aus dem Stehgreif auch nicht beantworten.)
• Du kannst die Google-Webfonts auch selber hosten. LINK
• Impressum und Datenschutz sind immer Pflicht.
• Cookie Hinweis brauchst du nur wenn du auch welche setzt.

Eventuell ein Bildschirm welcher sich auch mit Touch bedienen lässt?

Funktioniert bei mir unter Wndows10 im Chrome, Firefox und Edge. Bei welchem Betriebssystem mit welchem Browser funktioniert das nicht?

offtopic:

Einfach die Exfrau heiraten und PC tauschen.

Hallo Maria,

bitte versuche deine Anliegen genauer zu beschreiben. Ich hatte deinen Beitrag gelesen konnte aber nicht antworten weil ich die Probleme nicht genau definieren konnte.

zu1.

Das hat sich ja scheinbar erledigt? In alten Versionen war die Layout-Auswahl Standardmäßig eingeblendet, jetzt ist dazu ein Klick auf den Button "Layouts" erforderlich. Funktioniert das jetzt?

zu2.

Für die Kategorie-Auswahl gibt es keine Hintergrundfarbe LINK ZUM DEMOSHOP. Die Seite von einem Screenshot ist die STARTSEITE VOM DEMOSHOP.

Hier wurde ein Bild mit dem Link zur Kategorie eingefügt. Daneben ein Textartikel mit der Beschreibung. Dem dazugehörigen Container wurde dann die Hintergrundfarbe hinzugefügt.

PS: Ich habe Zufälligerweise vor 3 Tagen erst zwei Widgets zur Kategorieauswahl veröffentlicht. Eventuell ist ja da etwas für dich dabei.

SHOP Kategorie Rotate

SHOP Kategorie Flex

Zitat von masch

Hallo,

wenn das Zeta eigene Widget "Button" gemeint ist, dann wird die Einstellung im Widget gemacht.

Dann muss man aber für jeden Button im gesamten Projekt das Widget öffnen und ändern. Mit dem CSS geht das mit einem Rutsch.

Eine Einstellung im Layout gibt es hier scheinbar nicht.

Um nicht jeden Button extra anfassen zu müssen würde ich das mit CSS lösen.

Einstellungen > CSS:

<style>
.button{border-radius:0 !important;}
</style>

Hallo -EM-,

in meinen Augen ist die Silbentrennung korrekt hyphens: auto;.

Eine Einstellung für responsives Verhalten der Überschriften gibt es in diesem Layout nicht. Aber mit etwas CSS kannst du da nachsteuern.

zB. Einsellungen > CSS:

<style>
@media (max-width: 860px) {
h1 {font-size:2.6em;}
h2 {font-size:2.2em;}
h3 {font-size:1.8em;}
h4 {font-size:1.6em;}
}
@media (max-width: 560px) {
h1 {font-size:2.0em;}
h2 {font-size:1.8em;}
h3 {font-size:1.6em;}
h4 {font-size:1.4em;}
}
</style>

Das responsive Verhalten für das Logo ist das der Abstand nach oben verringert wird. Wenn du dieses skalieren möchtest kannst du dieses ebenfalls mit CSS anpassen.

zB. Einsellungen > CSS:

<style>
@media (max-width:1024px) {
#logo img {width:90px; height:90px;}
}
</style>

Wenn du gern mit großen Überschriften arbeitest ist das Widget WZP Überschrift Flex eventuell etwas für dich.

Du kannst dem Code vom Thomas auch noch die Layout-Einstellungen für den Button und ein cursor:pointer; hinzufügen.

<input class="button" style="cursor:pointer;" type="button" value="Zurück" onClick="javascript:history.back()">

Ich habe eine solche Seite (noch in Arbeit) erstellt. Gästeseite

Die Seitenbreite steht bei mir allerdings auf 1024px weil ich auch vereinzelt Laptops erwarte.

Ich würde die Widgets alle untereinander platzieren.

Ansonsten einfach die MP4-Datei zippen.

Eventuell das Widget Text Toggle.

Als Text für den Button könntest du zB: <i class="fa fa-chevron-down" aria-hidden="true"></i> eingeben um den gewünschten Pfeil zu erstellen.

Mit etwas CSS könnte man den Pfeil auch zentrieren.

PS: Sollten weitere Fragen zu dem Widget bestehen bitte im entsprechenden Forum.