Cassiopeia Hintergrund ändern aber nur für Aussenbereiche (Boxed Layout)

  • Hallo,


    ein Vorschlag für die user.css:

    .site-grid {

    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);

    }


    Christian


    Edit: etwas besser


    .site-grid {

    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%);

    }


    noch eine "Leckerli" für den Footer:


    footer .metismenu.mod-menu .metismenu-item {

    float: left

    }

  • Und nun der modifizierte Code für den Gradienten, sofern man den Standardwert von 1320Pixel für die Breite des Templates benutzt:


    .site-grid

    {

    background: linear-gradient(90deg, rgba(255,255,255,0) calc((100vw - 1320px)/2 - 23px), rgba(255,255,255,1) calc((100vw - 1320px)/2 - 18px), rgba(255,255,255,1) calc((100vw - 1320px)/2 + 1320px + 5px), rgba(255,255,255,0) calc((100vw - 1320px)/2 + 1320px + 10px));

    }


    Geht fast so wie gewünscht, wie man hier sieht.

  • ...

    und damit das alles erst erst bei breiten Bildschirmen passiert und keinen unnötigen Trafic bei Smartphones erzeugt, das ganze noch nur ab 1400 Pixel Anzeigebreite.


    @media only screen and ( min-width: 1400px ) {

    /* breites Browserfenster */

    .site-grid

    {

    ....

    }

    }


    Damit ist das Thema nun wirklich erledigt, der Rest ist noch Kosmetik.


    Trotzdem schade, dass das Cassiopeia-Template hierfür keine Position besitzt.

    Im Vergleich mit dem Helix-Template ist das Cassiopeia-Template nämlich extrem schnell, wenn man es z.B. mit Pagespeed Insights vermisst und auch der subjektive Eindruck ist so...


    Ich hoffe, das Template wird auch in den nächsten Joomla-Versionen weiterhin mit übernommen.

  • Und nun der Code der wirklich funktioniert:


    @media only screen and ( min-width: 1400px ) {

    /* breites Browserfenster */

    .site-grid

    {

    background: linear-gradient(90deg, rgba(255,255,255,0) calc(50% - 675px), rgba(255,255,255,1) calc(50% - 670px), rgba(255,255,255,1) calc(50% + 670px), rgba(255,255,255,0) calc(50% + 675px));

    }

    }


    Ganz Praktisch mit den 50% weil das genau die Mitte ist...

    Obiger Code mit der komplizierten Formel hatte so seine Schwächen auf Firefox usw. da wohl für 100vw unterschiedliche Werte ausgegeben werden.

    Zudem viel zu kompliziert gedacht.