Beiträge von taolight

  • Cassiopeia - SAFARI - Mobilansicht ab >=992

    Hallo in die Runde,

    nachdem ich meine Seite fast fertig habe, musste ich heute feststellen: auf Safari gibt es leider Probleme mit der korrekten Darstellung ab 992px ... scheint ja sogar das Cassiopeia Standard-Layout zu betreffen ... dort wird bei Start auch das Mobil-Haupt-Menu eingeblendet, auf Firefox gibt es das normale Haupt-Menu ...

    Bisher habe ich folgendes herausgefunden:

    Wenn ich ein Modul: Beiträge auf der rechten Sidebar platziere, scheint Safari hier die richtigen Breiten anzusetzen. Platziere ich ein Custom Modul auf der rechten Sidebar, setzt Safari es gleich unter den Content-Bereich. Beide Module werden mit den Standardeinstellungen gespeichert. Unterschied: beim Custom Modul wird noch folgender Code gesetzt: d-none d-lg-block. Entferne ich diesen Befehl sitzt das Modul beim Start an der richtigen Stelle. Wie kann ich Safari erklären, dass er LG-Bootstrap-Codes richtig interpretiert?

    Ein ändern der für Safari nicht lesbaren: <= und >= Angaben @media scheint nicht ausreichend zu sein. das habe ich schon erfolglos probiert.

    ich wundere mich, dass das noch kein Thema zu sein scheint für andere ... liegt das daran, dass außer mir, keiner mehr Cassiopeia verwendet?

    Herzlichen Dank schon mal an alle, die hier helfen können ...

  • 404 - Error Page via Menu - Header einblenden

    Zitat von Stef

    Du benutzt aber kein Child, sondern wie es aussieht das Cassiopeia:

    Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

    das verstehe ich nicht, weil ich in einem child-template arbeite und wenn ich den seitenquelletext von 404 anschaue, dann steht da u.a. auch der name des childs ... oder?

    Code
    <link href="/media/templates/site/cassiopeia_mbsr/images/favicon.ico" rel="alternate icon" type="image/vnd.microsoft.icon">
	<link href="/media/templates/site/cassiopeia_mbsr/css/user.css?e0c02e" rel="stylesheet">

  • 404 - Error Page via Menu - Header einblenden

    Ich habe dank Chatgtp nun den Fehler gefunden ... die error.php war im falschen Ordner ... danach hat zwar das Modul auf der Position 404-error nicht mehr gearbeitet, dafür aber der Artikel ... Vielen Dank fürs Mitdenken!

    Fehler bei der Template- oder Fehlerdatei

    • Wenn deine error.php nicht vom Template benutzt wird, sondern z.B. die Joomla-System-Fehlerseite (templates/system/error.php), wird dein Template-Code ignoriert.
    • Kontrolliere, ob deine error.php im richtigen Template-Ordner liegt (also z.B. /templates/dein_template/error.php).

  • Anpassung Hauptmenu 1. Toggler / 2. Darstellung reponsive

    Habe mit Chat GTP tatsächlich die Lösung für alle Themen gefunden ...

    hier die Antworten

    Spoiler anzeigen


    /* MENU MAIN Chat-GTP Verbesserungen */

    /* Canvas Toggler */

    /* Toggler mittig im Container */
    .navbar-toggler {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1rem; /* je nach Design anpassen */
    z-index: 1050; /* über Menü */
    }

    /* Nur auf großen Bildschirmen mittig */
    @media (max-width: 991.98px) {
    .navbar-toggler {
    position: static;
    transform: none;
    margin-left: auto;
    }
    }

    /* Container sicherstellen */
    .navbar {
    position: relative; /* damit der absolute Toggler sich daran orientiert */
    }

    /* Reduziere Größe und Umrandung des Buttons */
    .navbar-toggler {
    padding: 0.25rem 0.5rem; /* Weniger Innenabstand */
    border: 1px solid #61452c; /* Dünnere, dunkle Linie */
    border-radius: 0.25rem;
    background-color: transparent;
    }

    /* Optional: Hover-/Fokus-Styling */
    .navbar-toggler:hover,
    .navbar-toggler:focus {
    border: 1px solid #61452c;
    outline: none;
    box-shadow: none;
    }

    /* Styling für das Hamburger-Icon */
    .icon-menu {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") no-repeat center;
    background-color: currentColor;
    }


    /* Zentrierung Main Menu */
    @media (min-width: 992px) {
    .container-nav {
    display: flex;
    justify-content: center;
    }

    .container-nav > nav {
    width: 100%;
    display: flex;
    justify-content: center;
    }

    .navbar-collapse {
    justify-content: center;
    }

    .mod-menu {
    margin-left: auto;
    margin-right: auto;
    }
    }


    /* Menü auf großen Bildschirmen zentrieren */
    @media (min-width: 992px) {
    .navbar-nav {
    margin-left: auto;
    margin-right: auto;
    }

    .navbar-collapse {
    justify-content: center;
    }

    .navbar .mod-menu {
    justify-content: center !important;
    }
    }

    /* Menü auf kleinen Bildschirmen (Canvas-Menü) linksbündig */
    @media (max-width: 991.98px) {
    .navbar-nav {
    justify-content: flex-start;
    }

    .navbar .mod-menu {
    justify-content: flex-start !important;
    }
    }


    .mod-menu {
    flex-wrap: wrap !important;
    }


    /* Container dehnen und Menü umbrechen */
    .navbar-collapse {
    flex-wrap: wrap;
    justify-content: flex-start;
    }

  • Slider Bootstrap Fadeeffekt anpassen

    wunderbar ... das hat geholfen!

    habe mich jetzt für diesen Code entschieden, um Text zu faden ...

    .carousel-item {
    transition: transform 2.4s ease-in-out;
    }

    .carousel-fade .active.carousel-item-start,
    .carousel-fade .active.carousel-item-end {
    transition: opacity 0.2s 0.4s;
    }


    VIELEN DANK!