Was sich bei mir bewährt:
Ab und zu ein erstelltes Backup auf einer Sub-Domain (mit eigener Datenbank) wiederherstellen.
Somit bleibt man in Übung (Backup-Datei und Akeeba Kickstart über FTP einspielen) und weiß, dass alles noch geht und hat eine Seite zum Testen.
Und sollte mal was schief gehen, kann man diese Seite dann für die Hauptseite hernehmen.
Ich danke nochmals allen Helfern, insbesondere Christine!
Hab meine 2 Seiten umgestellt und das Feedback ist positiv, da die meisten User am Smartphone den rechten Daumen einsetzen und so das Menü besser erreichbar ist.
Hallo Christine,
herzlichen Dank.
Macht genau das was es soll jetzt!
Der ganze CSS Code:
/* Hamburger-Menü auf die rechte Seite! */
@media only screen and (max-width:992px) {
.container-header .container-nav {
justify-content: right;
}
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list li {
justify-content: right;
}
nav.navbar.navbar-expand-lg {
justify-content: right;
}
}
Gruß Norbert
OK, dann muss ich noch das Menü andersrum hinbringen...
Danke!
Hallo in die Runde,
weiß jemand auf die Schnelle, wie man im Cassiopeia Template das Hamburgermenü in der mobilen Ansicht rechts statt links positioniert?
Ich weiß, das sind Basics aber ich finde in Google nix dazu und die Klasse ist im Debugger (Browser Entwicklerwerkzeuge) nicht ersichtlich.
Eventuell hat wer ein CSS Schnipsel für die user.css zur Hand.
Danke.
Gruß Norbert
Hallo,
ich habe auch die Ignite Gallery im Einsatz, siehe hier und hier.
Damit gehen auch so Sachen, wie private Galerien für eingeloggte User und der Frontend-Upload ist auch einfach.
Ich habe es auch so konfiguriert, dass die User selber Kategorien anlegen dürfen im internen Bereich.
Die Einstellung der Zugriffsebene einer Kategorie geht über das zugeordnete Profil.
Der Entwickler ist sehr kooperativ, wenn's Fragen gibt oder wenn man mal einen Bug findet.
Anbei noch Bilder der Frontend-Oberfläche für eingeloggte User.
Gruß Norbert
Verehrte Joomla Gemeinde.
eventuell ist der eine oder die andere schon über das Problem gestolpert, wie man bei breiten Bildschirmen den Platz sinnvoll nutzt und über alle Seiten ein gleiches Layout hinbekommt.
Die Sache ist die, eine Anzeigebreite von 1320 Pixeln ist für viele Artikel sehr breit. Nun kann man die Seitenleisten mit Modulen vollklatschen, was aber zu langen Ladezeiten und Traffic beim Navigieren führt.
Eine Lösung wäre ein zusätzliches Seitenmenü, das den Navigationspfad und die Menüstruktur abbildet.
Standardmäßig schaut das etwas mäßig aus...
Hier ein Link wie eine optimierte Version aussehen könnte...
Zuerst ein Modul (Navigationsmenü, HTML5 aktiv) erstellen und auf die linke Seitenleiste damit und dann
ein CSS Code der das etwas aufpeppt.
Zusätzlich in der CSS-Klasse (Moduleinstellungen) noch folgenden Eintrag: "sidemenu d-none d-lg-block"
Anbei der CSS Code für die User.css:
/*Damit position:sticky funktioniert (am Handy aber nicht, sonst geht das mobile Menü nicht richtig)*/
@media (min-width: 992px) {
div.body-innerwrapper {
overflow-x: unset;
}
}
/* dito */
div.sp-column {
height: 100%
}
div.sidemenu {
height: 100%;
border-right: 1px solid lightgray;
}
div.sidemenu > ul {
position: sticky;
top: calc(0% + 120px);
}
div.sidemenu a {
color: black;
}
/* Obere Menüebene */
div.sidemenu ul.mod-menu {
list-style-type: none;
text-transform: uppercase;
font-size: 90%;
font-weight: bold;
padding-left: 0;
}
div.sidemenu ul.mod-menu > li {
margin: 6px 10px 6px 0px;
}
div.sidemenu ul.mod-menu > li.item-101 {
margin-top: 0;
}
/* Der aktuell aktive Menüpunkt in rot */
div.sidemenu ul.mod-menu > li.current > a {
color: #df1313;
text-decoration: none;
}
div.sidemenu ul.mod-menu > li::before { /* Pfeil vorne dran */
font-family: "Font Awesome 6 Free";
content: "\f107";
float: left;
margin-right: 2px;
transform: rotate(-90deg);
}
div.sidemenu ul.mod-menu__sub { /* Untermenüpunkte */
padding: 4px 8px 4px 0;
position: relative;
left: 10px; /* Etwas einrücken damit es mit dem Text des Hauptmenüpunkts abschneidet */
display: none; /* Bei lg nicht anzeigen (braucht zu viel Platz) */
}
@media (min-width: 1200px) and (min-height: 1100px) {
div.sidemenu ul.mod-menu__sub {
display: block; /* Nur bei xl / xxl */
}
}
div.sidemenu li.active ul.mod-menu__sub {
display: block; /* außer es ist der aktive Menüpunkt, dann immer anzeigen */
}
div.sidemenu ul.mod-menu__sub > li {
display: inline-block; /* Nicht jedes item in eine extra Zeile */
padding: 0;
margin: 3px;
}
div.sidemenu ul.mod-menu__sub > li > a {
display: inline-block; /* Kästchen immer viereckig, kein Zeilenumbruch */
text-transform: none; /* KEIN uppercase hier */
padding: 2px 8px;
border-radius: 6px;
background-color: #ededed;
font-weight: normal; /* nicht fett hier */
font-size: small;
}
div.sidemenu ul.mod-menu__sub > li.current > a {
color: #df1313; /* Der aktuell aktive Menüpunkt in rot */
font-weight: bold;
}
div.sidemenu .active a, div.sidemenu a:hover {
text-decoration: none;
}
Eine Möglichkeit, das Problem bei wirklich größeren Änderungen zu lösen, ist es, ein neues Child-Template anzulegen und das dann aktiv zu schalten.
Bei mir ist es so, manchmal übernimmt der Browser die Änderungen in der User.css sofort, manchmal erst nach einem Löschen des Browser-Chashes. Warum? Keine Ahnung.
Den Webseiten Cash habe ich deaktiviert, das Cassiopeia-Template ist so schnell, das bringt fast nix, macht aber jede Änderung mühsam, weil man diesen Cash dann auch immer löschen muss.
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.
Verehrte Joomla Gemeinde,
gibt es eine Möglichkeit, Plugins vor den Google/Bing Crawlern zu verbergen?
Mein Problem: Ich habe Plugins vom DPCalender (kommende Veranstaltungen), frisch eingestellte Photos (Ignite-Gallery) usw. die die Webcrawler mit abgrasen und dann in den Google Ergebnissen anzeigen.
Das Problem ist nun, dass sich diese Daten ändern und die Googleverlinkungen dann nach ein paar Tagen ungültig sind.
Lange Rede kurzer Sinn:
Kann man Plugins vor den Crawlern verbergen?
Ich finde leider im Netz dazu nichts...
Vielleicht hat jemand von euch auch diese Anforderung schon mal umgesetzt?
Gruß Norbert
...
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 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.
Vielen Dank, ich glaube so komme ich eventuell weiter...
Muss dann nur das Verhalten für die verschiedenen Anzeigegrößen anpassen bzw. relevant ist es ja nur für die Desktopversion der Webseite.
Nachtrag:
ich glaube langsam, mit diesem Template geht das so nicht.
Man müsste praktisch im Hintergrund ein Rechteck zeichnen, das über dem Bild liegt und sich adaptiv an den Inhalt anpasst.
Ich sehe mit den Entwicklertools keine Position (Klasse) mit der das gehen könnte beim Cassiopeia Template.
Nun So ganz erledigt ist es nicht das Thema,
weiß jemand die Klasse, in der die die Container (Beiträge, Inhalt) und Module sind?
Also der "non fluid" Layout Bereich, so dass ich den separat färben kann.
Ich will, dass das Hintergrundbild nur im Außenbereich angezeigt wird.
...das war ja auch das Topic.
Dass das Bild nicht angezeigt wurde war ein Randthema, sorry.
Bisher funktionierender Code für diese Seite.
/*ganze Seite*/
body.site
{
background-image: url(/images/banners/Banner_SW_bei_Nacht_Full.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* Modul */
.card
{
background-color: #fff;
}
/* Beträge */
.grid-child.container-component {
background-color: #fff;
border-radius: 5px;
padding: 10px 10px 10px 10px;
}
/* Ganze Seite */
.site-grid
{
background-color: #fffa;
}
Gruß
Norbert
OK,
der funktionierende Code für den Hintergrund ist:
body {
background-image: url(/images/moon.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Also ohne die "../.."
Siehe nun auf der Betaseite.
Mit diesem geht es.
Nun bleibt wie gesagt die Frage über, welche Klasse ist der Layout Bereich, so dass ich für den separat den Alpha Kanal und die Farbe einstellen kann.
Gewünscht ist ein "boxed" Layout wie z.B. auf dieser Seite die ein Helix Template als Basis hat.
An alle herzlichen Dank.
Hallo,
ja danke, OK ich sehe, es ginge mit dem Hintergrundbild.
Liegt wohl an meinem Proxy in der Firma, der dazwischen puffert...
Nun damit ist die Bilderfrage beantwortet.
Nun stellt sich trotzdem die Frage mit der CSS Klasse um den Layout Bereich separat vom Rand mit einer Farbe zu versorgen.
Bzw. dass das Hintergrundbild nur am Rand auftaucht, was dann mit der Transparenzeinstellung des Layoutbereichs (ich hoffe, ich nenne das Richtig) zu tun hat.
Wegen dem Link:
Ja, ich gebe zukünftig wieder die Seite an.
Danke.
Gruß Norbert
Hast du auch mal dein Browsercache gelöscht ? Und ich sehe keine Anpassung in deiner user.css, wo hast du den Code eingefügt ?
Von welcher Seite stammt das? Auf der produktiven Seite habe ich keine CSS Anpassung rein.
Die Betaseite ist diese hier...
