Beiträge von Mario

  • Externes CSS

    In Sachen eigenes CSS hinzu fügen hat sich ja in den letzten Versionen schon einiges getan.:thumbup:

    • Längeres CSS sollte man auslagern, das funktioniert in ZP bestens. Allerdings meckert dann Google weil mehrere Dateien abgeklappert werden müssen.
    • In einem kopierten Layout kann man eine eigene CSS-Datei anlegen und den Inhalt dieser Datei automatisch der bundle.css hinzu fügen lassen. Das habe ich gerade probiert und funktioniert bestens. Allerdings ist ein kopiertes Layout natürlich von Updates ausgeschlossen.

    Mein Vorschlag wäre das es in ZP die Möglichkeit gibt eigenes CSS einzufügen welches dann automatisch der bundle.css hinzu gefügt wird. Also im Prinzip ähnlich wie in einem kopierten Layout. ZP legt eine weitere CSS-Datei an die beim Erstellen der bundle.css angehängt wird.

  • Qualität von Headern [Erledigt]

    Der Header wird ja in diesen Layout so groß dargestellt wie der Inhaltsbereich breit ist. Deshalb sollten die Header-Bilder auch diese Größe erhalten.

    Du hast eine Seitenbreite von 1920px angegeben und die Sidebar ist 300px breit. Das ergibt dann mit den Abständen folgende Rechnung.

    1920px Seitenbreite - 300px Sidebar - 50px Abstand linker Seitenrand - 30px Abstand Navi zum Inhalt - 50px Abstand rechter Seitenrand ergibt eine Headerbreite von 1490px.

    Du musst also Im Layoutdesigner 1490px angeben und die Bilder auch in dieser Größe einbinden oder die Seitenbreite entsprechend verringern.

  • Qualität von Headern [Erledigt]

    Um hier genaueres zu sagen müsste man folgendes wissen:

    • Welches Layout wird verwendet.
    • Welche Bild-Größe ist im Layout-Designer vorgegeben.
    • Welche Größe haben die eingefügten Original-Bilder.
    • Das ganze online sehen.

    PS: Der Lösungsvorschlag vom Andi kann nur funktionieren wenn du den Header löschst und nochmal neu anlegst.

  • Video-Player zentrieren

    Zum zentrieren gehe im Widget unten links auf das Mischpult dann auf mehr. Hier trägst du unter Inline-CSS folgendes ein.

    Code
    text-align: center

    Das Video passt sich automatisch der Spaltenbreite an. Hierzu muss dein Video allerdings mindestens so breit sein wie die Spalte.

  • Bildgröße - Cover, Contains, Size, mobile Version, mobile Ansicht, Bildergröße

    Du hast in den Containern einen Textartikel eingefügt und einfach ein paar Umbrüche hinzu gefügt. Diese Umbrüche werden natürlich auch in der mobilen Ansicht dargestellt.

    Du könntest das gewünschte folgender maßen umsetzen.

    Füge einen Artikel (Widget > Quelltext) mit folgendem Inhalt hinzu:

    Code
    <div style="height:20vw;"></div>

    Diesem Artikel fügst du nun deinen Container mit dem gewünschten Bild hinzu.

    Einstellungen: "size" "X 100%" "Y Auto"


    Hinweise:

    • Die Einstellung "height:20vw" legt fest das die Höhe deines Containerbildes immer 20% der Bildschirmbreite einnimmt.
    • Das Widget > Quelltext wird in der Liveansicht schwer greifbar sein. Um dieses zu öffnen am besten mit F8 in den Spaltenmodus wechseln.

  • Bildgröße - Cover, Contains, Size, mobile Version, mobile Ansicht, Bildergröße

    Hallo Patrick,

    wie Thomas schon schrieb, mit einem Link kann man immer besser helfen.

    Aber ich denke ich weiß was du meinst.

    Zu 1.

    HIER eine Erklärung, und HIER kannst du das selber ausprobieren und verstehen.

    Zu 2.

    So wie du dir das vorstellst kann das nicht funktionieren. Eine Hintergrundgrafik für einen Container in einer Responsiven Seite muss flexibel sein.

    Wenn der Bildschirm kleiner wird muss ja der Inhalt weiterhin in der Hintergrundgrafik dargestellt werden Somit muss die Hintergrundgrafik entsprechend angepasst werden damit der komplette Inhalt in dieser dargestellt werden kann. Somit versucht der Browser bestmöglich die Hintergrundgrafik zu skalieren um den Inhalt in dieser unterzubringen.

    Schwer zu erklären. HIER EIN LINK einmal das Fenster am Desktop in der Breite verkleinern dann wirst du das verstehen.

    Kurzum, deine Einstellungen:

    Momentan habe ich ein Bild auf folgende Werte gestellt:

    Position 50% , 50%

    Größe: Cover

    Wiederholen: alles aus

    Attach: Fix ist eingeschaltet

    Randlos: Ja

    sind perfekt für die Responsive Darstellung. Wichtig ist immer das der Fokus der Bilder in der Mitte sitzt oder eben gar kein Fokus vorhanden ist.

  • Mobile Version, Header ausblenden?

    • Den Slider löschen und neu einfügen.
    • Anschließend Erweitert > Erstellen > Alle Seiten Erstellen
    • Und Veröffentlichen > Komplette Website Veröffentlichen

    Es gibt noch die Einstellung Erweitert > Erweiterte Einstellungen > Bilder > Max. Importbreite, Aber der Randlose Slider bleibt davon eigentlich unberührt.

  • Bildergrößen

    Die Geschichte mit dem Pagespeed nimmt ja immer mehr zu.

    Man traut sich ja kaum noch ein schickes knackig scharfes Bild einzufügen. Es gibt aber viele Seiten die von schönen Bildern leben. Meine zum Beispiel ;)

    Für eine künftige Version ist es sicher eine Überlegung wert mehrere Bildgrößen für Header, Slider, Containerhintergrund und Bilder auszugeben Desktop / Tablet / Smartphone.

    Ob die Skalierung dann automatisch oder per Hand ausgeführt wird lasse ich mal dahingestellt.

  • Firefox warnt vor eigener mit ZP erstellter Seite

    Zitat von Stefan S

    Da haben Sie sich wohl einen Virus eingefangen. Wir hatten bisher noch keinen Fall in dem ZP die Ursache dafür war. Als AdHoc Lösung am besten die komplette Site per FTP- Software löschen und dann aus ZP nochmals komplett veröffentlichen.

    Genau richtig.

    Nicht falsch verstehen, der Virus ist sicher nicht über deinen PC sondern direkt auf deinen Server gekrabbelt.

    Wichtig: FTP-Passwort ädern!

  • Mobile Version, Header ausblenden?

    Hallo Beat,

    die Bilder sind im Originalzustand schon total unscharf.

    BILDLINK / 950px × 265px / 189,21 KB

    Wenn diese dann noch auf Seitenbreite gestreckt werden kann da nichts draus werden.

    Ich empfehle die Originale nochmal her zu nehmen, diese auf mindestens 1800px breite zu skalieren und ordentlich zu komprimieren.

    Hier mal ein Beispiel von meiner Seite LINK.

    BILDLINK / 2.000px × 620px / 383,03 KB

  • Linkbox sortieren

    Zitat von Pete

    Dann kann ich den Code für alle Seiten einfügen und für bestimmte Unterseiten einen separaten Code, hat geklappt.

    Nein das ist nicht gut.

    Denn in dem Fall hast du den Code auf den Unterseiten doppelt (1x das Globale und 1x das seitenspeziefische CSS). Kann sein das das es richtig angezeigt wird weil das seitenspeziefische CSS weiter unten steht. Aber trotzdem doppelt mit verschiedenen Werten.


    Wenn du verschiedene Styles für die Boxen anlegen willst solltest du für jeden Style eine extra Klasse anlegen. Somit bleibt das originale Widget auch unberührt.

    Im folgenden Beispiel 3 Verschiedene Styles.

    Einstellungen > CSS

    Nun vergibst du den Linkboxen deine Klassen.

    Gehe im Widget unten links auf das Mischpult, dann auf Mehr.

    Hier trägst du in das Feld CSS-Klasse folgendes ein: linkbox-1

    In den anderen Linkboxen dann entsprechen die CSS-Klasse linkbox-2 oder linkbox-3.

  • Quelltext bearbeiten

    Hallo Paul,

    diese Option ist nur zum einsehen des Quelltextes. Ändern kannst du da nichts.

    Wenn du eigenen Quelltext einfügen möchtest benutze das Widget Quelltext oder gehe im Widget Text auf den Reiter "HTML-Quelltext anzeigen".

  • Mobile Version, Header ausblenden?

    Zur eigentnlichen Frage.

    Wie Thomas schon schrieb geht das mit eigenem CSS.

    Folgendes bewirkt das ab einer Bildschirmbreite von 700 Pixeln der Header ausgeblendet wird.

    Einstellungen > CSS:

    Code
    @media (max-width: 700px) {
#header   {
display:none;
}}


    Aber gerade dieses Layout bietet hervorragende Möglichkeiten die Größe des Headers anzupassen.

    • Was hast du denn unter Layout > Kopfgafik > Bild > Höhe(min.) eingetragen?
    • Wie würdest du dir die Responsive Darstellung wünschen?

  • Unterschiedliches Vorschau-und Zoombild

    Wie Stefan schon schreibt ginge das mit etwas Quelltext.

    Sollte es sich um nur wenige Bilder handeln ist das auch schnell erledigt. Bei sehr vielen Bildern ist der Arbeitsaufwand dann schon sehr groß.

    Hier ein Beispiel.

    Folgender Quelltext kam hier zum Einsatz:

    Anstatt die Bilder wie in meinem Beispiel extern zu verlinken kannst du diese auch über Bildverwaltung von ZP verlinken. LINK

  • Hover09-16-2

    Hallo Beat,

    wenn du die Bilder mit einem FTP-Programm in den Ordner "/media/images" abspeicherst wird ZP diese vermutlich bei der nächsten Veröffentlichung löschen.

    Ich empfehle die Bilder in die Bildverwaltung zu importieren und den Link anschließend über Objekt-ID einzubinden. Eine Beschreibung findest du HIER.

  • Reservierungs-Popup linksbündig statt zentiert mit CSS möglich?

    Hallo Sunny,

    wenn du das Widget auf nur einer bestimmten Seite benutzt auf der keine Bilder sind die in der Fancybox geöffnet werden kannst du das mit folgendem CSS umsetzen. Dieses CSS darf aber nur auf dieser einen Seite eingebunden werden wie hier beschrieben. LINK

    Hier ein Beisiel LINK. Ich habe dort auch ein Bild eingefügt damit du verstehst warum diese dort nicht angebracht sind.

    CSS
    <style>
#fancybox-wrap {
top:35% !important;
left:20px !important;
}
</style>

    Alternativ kann man das auch HIERMIT umsetzen. Den Link zum öffnen kann man auch hier per Position:Fixed positionieren.

  • Lizenzen Express / Business

    Hallo Graf Foto,

    ich komme wie du von w2d und kenne dich auch noch aus dem Forum von damals.

    Ich hoffe du hast die Lizenzbedingungen richtig verstanden. Deshalb führe ich hier nochmal auf.

    Bei w2d brauchtest du für jede Website eine eigene Lizenz. Bei ZP ist das anders.

    Du kannst mit einer Lizenz so viele Websites erstellen wie du möchtest. Dies auch kommerziell als Webdesigner für zahlende Kunden. Eine zusätzliche Lizenz wird erst fällig wenn der Kunde ZP auf seinem Rechner installieren möchte um selbst Änderungen an der Website vorzunehmen. Kleine Änderungen kann der Kunde aber auch selbst vornehmen in dem du das Widget "Online-CMS" verwendest.

  • Welcher Techniker kann helfen - Widget Buchungstool

    Danke Stefan, das hilft.

    Hallo siya, das CSS benötigst du nicht, es funktioniert ja auch ohne LINK.

    Die Frage war nur ob die Verlinkung zur jQuery nötig ist.

    Gehe folgendermaßen vor.

    Füge folgendes per Widget > Quelltext ein:


    Gehe wie HIER BESCHRIEBEN zum Attribut mobile_script und gib dort folgendes ein. Wichtig hier lässt du die angaben <style> und </style> weg.

    Code
    <script src="//code.jquery.com/jquery-3.2.1.js"></script>
<script src='https://media.xmlcal.com/widget/1.00/js/bookWidget.min.js'></script>


    Teste nun. Wenn alles wie gewünscht funktioniert bist du fertig.

    Wenn nicht fügst du dem Attribut mobile_script noch folgende Zeile hinzu:

    Code
    <link rel="stylesheet" href="jquery-ui.min.css">

  • Welcher Techniker kann helfen - Widget Buchungstool

    Hallo NoName,

    wer lesen kann ist klar im Vorteil. :thumbup:

    Ich habe das nochmal getestet.

    • Das Script "//code.jquery.com/jquery-3.2.1.js" wird benötigt.
    • Die Verlinkung zur "jquery-ui.min.css" ist für die richtige Darstellung allerdings nicht nötig.

    Eventuell kann der Support nochmal kurz melden ob die "jquery-ui.min.css" möglicherweise in Zeta Producer bereits inkludiert ist.

  • Welcher Techniker kann helfen - Widget Buchungstool

    Ich habe mir das auch mal angesehen.

    Ich konnte mit CSS die Darstellung etwas verbessern. LINK. Ist aber sicher so nicht Sinn der Sache.

    Theoretisch kann es nur 2 Ursachen haben.

    1. Der Code ist fehlerhaft. Was ich allerdings nicht glaube.
    2. Es werden Id- oder Klassennamen verwendet die auch Zeta Producer verwendet. Hierzu kann sicher der Support am Montag etwas sagen.

  • ZPW Google-Übersetzung (Version 2.0)

    Eine Möglichkeit dies umzusetzen findest du HIER und HIER.

    Umgesetzt habe ich dies zB. auf dieser SEITE.

    • Du kannst dieses mit Position Absolute oder Position Fixed im Logobereich platzieren und im CSS für die mobile Darstellung anpassen.
    • Beachte: Das eingefügte Widget Quelltext ist im Live-Modus nicht mehr greifbar. Hierzu mit der Taste F8 in den Spaltenmodus wechseln.

  • YouTube-Videos in Lightbox

    Zitat von Peter B.

    Nur das ich das richtig verstehe, Zeta Producer selbst kann das nicht und man muss dafür selbst "rumbasteln"?

    Ja in Zeta Producer gibt es bisher dazu kein Widget.

    Hier ein Beispiel wie du das umsetzen kannst. Die Videos werden in einer Größe von 820x461 Pixel dargestellt. Auf mobilen Geräten wird das Video in einem neuen Fenster geladen weil es sonst zu klein werden würde. Sofern eine Youtube-App installiert ist wird es in dieser geöffnet.

    Link zur Beispielseite.

    Einstellungen > CSS

    Code
    <style>
@media (max-width: 964px) {
 .youtube {
display:none;
}}
@media (min-width: 965px) {
 .blank {
display:none;
}}
</style>

    Widget > Quelltext