[Cassiopeia] Logo und Menü zentrieren und einrahmen

Um das Menü mittig zu bekommen, versuche mal folgenden Eintrag in der user.css:

.container-header .mod-menu {
   justify-content: center;
}

Und bzgl. Logo/Bild würde ich das auf der Position "topbar" versuchen. Ich weiß nicht, wo du es momentan untergebracht hast?

Falls du weitere Fragen hast, am besten eine Testversion auf einer Subdomain erstellen, damit man das analysieren und die eigenen Vorschläge auch gleich überprüfen kann. Sonst ist man ein wenig am Raten.

Gibt es einen Link zur alten bzw. bisherigen Seite? Wenn ich mit meiner Vermutung richtig liege, dann handelt es sich dort nicht um Protostar, auch nicht um Joomla. Oder poste mal eine Seite, wie das insgesamt ausschauen soll!

Hallo techniker,

deaktiviere das Logo im Cassiopeia-Template.

Erstelle ein eigenes Modul und füge dein Logo dort ein (setze es mittig im Editor).

Wähle die Modulposition "Leiste oben Topbar".

Speichern und fertig

Fast vergessen: Bild (dein Logo) noch mit der Startseite verlinken.

Ja, für das Logo schon aber dein Menü soll ja auch mittig sein und daher bitte wie JoomlaWunder geschrieben hat noch den Code zusätzlich einfügen:

.container-header .mod-menu {
   justify-content: center;
}

Zitat von techniker

Danke, aber funktioniert leider nicht.

Liegt das Menü auch auf Position "menu" und wurden Joomla- und Browser-Cache geleert?

Hab es gerade mal getestet und es funktioniert bei mir ohne Probleme.

Poste mal den Inhalt deiner user.css

Vielleicht auch möglich:

.container-header .container-nav {
   justify-content: center;
}

Für das Zentrieren brauchst du ein bisschen CSS Code (user.css Datei)

.navbar-brand, .container-nav .navbar {margin: 0 auto;}

Mit der Klasse boxed kannst du Rahmen um die Beiträgen anzeigen lassen: https://cassiopeia.joomla.com/help/category-blog

Zitat von techniker

Danke das zentrieren klappt, nach Cache leeren.

Das mit dem Rahmen, was trag ich in die Articel Class ein? Einfach "boxed"?

Ja

Ja, die Klassen sind nur für Bloglayout. Was willst du genau erreichen?

Zitat von techniker

Funktioniert leider nicht Dort steht auch im Info Feld, dass es nur für Blogansichten und Hauptbeiträge gilt.

Ich hab die Seite jetzt mal online gestellt.

https://neu.gaststaette-dix.de

Zum Beispiel dieser Code in deiner user.css einfügen:

.com-content-article.item-page {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
}

Zitat von techniker

Ein kleines Problem hab ich noch mit dem zentrieren des Menüs. Das Hamburger Menü ist in der mobilen Ansicht jetzt auch mittig. Kann man das wieder nach links schieben?

Dann brauchst du eine media query in deinem CSS, damit das Zentrieren nur für größeren Displays wirkt

Man könnte auf den Seiten den Text in eine Tabellenzelle setzen und der Zelle einen Rahmen geben um eine Begrenzungen zu haben. Das ganze kann man dann auch noch Zentriert setzen, wenn es unbedingt so in Richtung der alten Seite gehen soll.

Ich würde mich vom Design der alten Seite lösen. Hat so ein bisschen was von 1990 Jahre Charme. Und der dicke schwarze Rand erinnert mich an einen Trauerrand. Aber Geschmäcker sind natürlich unterschiedlich.

Zitat von Oldidi

Man könnte auf den Seiten den Text in eine Tabellenzelle setzen und der Zelle einen Rahmen geben um eine Begrenzungen zu haben. Das ganze kann man dann auch noch Zentriert setzen, wenn es unbedingt so in Richtung der alten Seite gehen soll.

Tabellen sind für tabellarische Inhalte und nicht fürs Layout da.

Hinweis:

Du hast momentan eine "}" zu viel in deiner user.css, weil du die eine css-Anweisung falsch als Kommentar gesetzt hast.

Keine Ahnung, ob sich das auswirkt. Dennoch sollte man es korrigieren.

Zitat von JoomlaWunder

Hinweis:

Du hast momentan eine "}" zu viel in deiner user.css, weil du die eine css-Anweisung falsch als Kommentar gesetzt hast.

Keine Ahnung, ob sich das auswirkt. Dennoch sollte man es korrigieren.

ja, hat auf die nachfolgenden Segmente Auswirkungen, also dieser greift nicht:

.footer {
  background-color: darkslategray;
  background-image: none;
}

Liebe Grüße, Christine