Ich schaffe es nicht, das Bild (“Yeti”) aus der Top Bar gegen mein Logo und einen Claim auszutauschen.
Sollte das doch klappen, wie bekomme ich dann die Menüpunkte nach unten gesetzt?
Letztlich sollte mein Menübereich so aussehen, oder wie würdet ihr das lösen?
danke,
Jan
Mit welchem Theme arbeitest du denn…?
Hast du einen Link zum veröffentlichten Projekt (soweit das schon online erreichbar ist)?
Zu deinem Fragen muss ich etwas weiter ausholen (ich gehe mal davon aus, dass du mit Stacks arbeitest):
Die Bereiche, in denen die Inhalte einer Website eingesetzt werden, werden durch bestimmte Container definiert. Diese Container sind in vielen Webseiten in einem bestimmten Raster angeordnet und haben Randabstände zueinander (sogenannte Margins), die du definieren kannst. Wenn du einen Container anders positionieren willst, musst du ihn a) im Raster anders positionieren und b) die Randabstände beeinflussen.
Die Randabstände kannst du in den Stackseinstellungen über die Layouteinstellungen verändern und z.B. ein Bild oder einen Text durch Veränderung von Top-Margin nach unten schieben.
Mit dem Stacks-Plugin geht das recht einfach und ist auch gut kontrollierbar, bei anderen Seiten geht das aber auch:
Dazu nutzt du Custom-CSS, das du im Page Inspektor unter HTML-Code oder in den Projekteinstellungen unter Code einfügst. Du musst über die Element-Informationen (im Vorschaumodus Kontext-Klick auf das jeweilige Element) herausbekommen, über welche CSS-Deklaration das jeweilige Element (also das Bild oder der Text) formatiert wird. Diese CSS-Deklaration wird durch das Theme oder den Stack vorgegeben, du kannst sie aber an besagten Stellen über eigenes CSS überschreiben. Beim Überschreiben solltest du dich auf die Werte und Eigenschaften beschränken, der Selektor bleibt gleich.
Das klingt erst einmal kompliziert, ist es auch.
Deshalb hatte ich oben nach dem Theme oder dem Link gefragt. Dann können wir uns deine Seite nämlich anschauen und dir sagen, mit welchem Custom-CSS du eine Möglichkeit hast, die vorgebenen Positionen zu verändern.
Da Du den “Yeti” erwähnst, vermute ich mal, dass Du mit dem Foundation Framework arbeitest. Ok, den Yeti bekommst Du im RapidWeaver Edit-Modus ohnehin immer angezeigt; den bekommst Du da also auch nicht “weg”. Der soll nur aufzeigen, wo das Logo dann erscheinen würde. Das Logo selbst ziehst Du in den entsprechenden Bereich bei “Settings” → “General”. Dann wird es auch im RapidWeaver Vorschau-Modus angezeigt. Die Darstellungsgröße kannst bzw. musst Du dann in den Settings des Logo-Stacks definieren. Alternativ kannst Du für das Logo auch den Graphic-Stack verwenden, wenn Du es als SVG einbinden möchtest.
Ich würde also einfach oben den Stack für das Logo platzieren und diesem Stack die gewünschte Hintergrundfarbe geben (Stacks Settings rechts oben “Background”). Dann würde ich das Logo als weiße Grafik mit transparentem Hintergrund links ausgerichtet einbauen. Darunter würde ich den Top Bar Stack platzieren und nach Belieben konfigurieren (Schriftgröße und -farbe, Ausrichtung, Hintergrundfarbe in den Stacks Settings für die Top Nav).
Falls Du das ganze nicht komplett seitenbreit haben möchtest, musst Du diese beiden Stacks dann noch in einen 1 Column Stack packen. Die Breite der Site stellst Du in den Site Styles ein.
In meinem Blog gibt es einen Beitrag, wie man ein SVG in die Top-Bar integrieren kann: https://jochenabitz.de/blog/post/rapidweaver-site-logo-with-svg
Vielleicht ist es ja irgendwann einmal interessant.
Hallo Matthias,
danke für deine Erklärungen. Fast so habe ich es inzwischen auch aufgebaut, doktere aber noch an der Position der Navigationsleiste. Am liebsten hätte ich das ganze Gebilde fest am oberen Rand des Browserfensters verankert, so wie man es im Top Bar Stack mit fixed einstellen kann. Ich finde allerdings nicht heraus, wie das mit dem 1-column-stack funktioniert. Beim Scrollen verschwindet dann immer das Logo und nur die Nav-Leiste (Top Bar) bleibt stehen. Wahrscheinlich gibt es hier aber irgendwo wieder ein entsprechendes Stack, oder? 
Moin Jochen, das ist schon mal sehr cool. Ich hab’s gleich ausprobiert und es funktioniert, wie ich es mir vorgestellt hatte. Mal sehen, wie ich es dann mit den anderen Vorstellungen vereinen kann …
gruß,
Jan
Klar gibt’s da was. Zum Beispiel der “Pin” Stack von BigWhiteDuck: https://www.bigwhiteduck.com/stacks/pin/
Die Stacks, die Du dort findest, sind alle gratis (oder besser: Donationware) und sind wirklich vom Allerfeinsten (und zudem größtenteils speziell für Foundation).
Also, ich habe mal etwas herumprobiert und so langsam groove ich mich ein. Zumindest klappt es schon mal mit einem responsiven Menü mit wechselnden Logo- und Claimgrößen als SVG-Dateien. Als nächstes nehme ich mir dann mal den FontPro Stack vor, damit ich gleich schon das Schriftenproblem gelöst habe!
Mal sehen, wann die nächsten Fragen auftreten.
cheers
Jan
