Make-Header, Navigation und Fußzeile volle Breite in Blogger - XOmisse

Bitte beachten Sie, dass dies nur der Bereich breiter zu machen, so können Sie CSS auf den ganzen Bildschirm gelten. Wenn Sie ein Header-Bild verwenden und das Bild sind nur 900 Pixel in der Breite, wird dieses Tutorial, das nicht ändern. Es ermöglicht Ihnen, eine Hintergrundfarbe mit CSS hinzufügen hinter Ihrem Bild über die volle Breite des Bildschirms zu überspannen.







vor + nach Beispiel

Frage: Was sind diese Werte mit dem $ vorher in meiner Vorlage?

Jeder Code in Ihrer Vorlage, die auf $ ähnlich aussieht (Beispiel); durch die Variablen an der Spitze Ihrer CSS und wird von dem Template Designer (Template> Bearbeiten> Anpassen) ist im Grunde Code, der gesteuert wird. Sie können den Standardvariable Code bearbeiten oder den Haupt-CSS-Bereich bearbeiten (von Variablenwerten zu ändern, um „echte“ Werte wie eine Farbe oder Zahl), aber wenn Sie den Variable Code entfernen Sie dann die entsprechenden Optionen in Template Designern Änderung wird nicht so funktionieren kümmern, wenn dies zu tun. Mehr dazu in einem späteren Tutorial.

Wie Sie Ihre Header, Navigation + Fußzeile volle Breite machen

1. Zunächst müssen wir auf Ihren Haupt-CSS-Bereich gehen. Zum Vorlage> HTML bearbeiten, und klicken Sie auf den schwarzen Pfeil links neben dem folgenden Code

2. Dazwischen und Suche nach Körper. es ist eines des ersten Codes. Sie werden sehen, Code ähnlich

Dies ist der Code, den wir vorhin gesprochen haben. Der $ (content.padding) auf 10px vorbelegt und $ (content.padding.horizontal) in dem variablen Abschnitt nach 40px. Wir wollen dieses 40px padding entfernen, die auf beiden Seiten des Inhalts ist so, dass der Header keine Leerzeichen haben. Ändern Sie es aussehen

oder wenn Sie es vorziehen

4. Sehen Sie sich jetzt für den Abschnitt der Vorlage unten das sieht aus wie

5. Dazwischen und Suche nach .content-Außen. Inhalt-fauxcolumn-outer. regions inneren und finden etwas ähnliches

dies wird unsere Blog Breite ändert sich die Größe des Browser zu sein.

finden 7. Wieder und fügen Sie im Anschluss an die darüber

8. Speichern Sie die Vorlage und Sie sollten in der Lage sein, einen vollständigen Header, um zu sehen, Navigation und Fußbereich jetzt mit Ihrem Hauptinhalt wie vor die gleiche Breite zu bleiben. Ich habe dies in allen Standard-Blogger Templates getestet und es funktioniert, ein paar Vorlagen mehr / weniger bearbeitet werden müssen, die andere.

Center Header-Bild?

Da Sie diese Bereiche volle Breite machen, werden sie wahrscheinlich zu erscheinen auf der linken Seite standardmäßig, wenn Sie bereits sie sonst codiert haben. Wenn Sie die Header-Bild zu zentrieren müssen, lesen Sie in diesem Tutorial.

Mache alles genau wie Sie gesagt hat, expt inhalt innere Sache. Ich habe es nur „padding: 0;“. Also nichts wie folgt aus: „padding: $ (content.padding) $ (content.padding.horizontal);“. Was kann ich tun? Und weiter, wenn ich es nur stellen: „.content-Innen < padding: 0px; >“Es macht mein ganzes Blog Hintergrund weiß ...







Hallo. Was ist Ihre URL, damit ich die Vorlage überprüfen können Sie verwenden, und Ihr Code? Sie sollten den variablen Abschnitt überspringen und dort nichts ändern, wenn .content-Innen bereits Polsterung festgelegt ist: 0px; dann lassen Sie es wie es ist.

Ich ging auch zurück und jede Änderung angesehen, bevor ich zurückkehrt beendet, aber nichts schien einen Unterschied in dem Verlassen der Hintergrund durchscheinen auf den Seiten des Hauptinhalt zu machen. Ich habe auch nur eine Inhaltsspalte und keine Seitenleiste, ich weiß nicht, ob das einen Unterschied macht.

Ich landete jetzt zu meinen gespeicherten Vorlage zurückkehrt.

Danke für Ihre Hilfe!

Hallo! Stellen Sie sicher, dass Sie Schritt 6 in genau der richtigen Stelle sind abgeschlossen, bevor]]> . Ich kann nicht viel mehr helfen, ohne den Code in Ihrer Vorlage, um zu sehen, alles zu überprüfen, richtig konfigurierte und nicht mit anderem Code in Konflikt. Haben Ihre Blogs Code überprüft und es sollte auf jeden Fall funktionieren.

Ich habe dieses Problem und meine Navigationsleiste ist gepolstert, aber ich kann es nicht zentriert lernen. Brauchen sie Hilfe und anschließend alle Anweisungen zu einem T-Stück, aber nichts funktioniert, 1. Timer auf all dies. Viel jeder und jede Hilfe in dieser geschätzt!
[** PROBLEM: NavBar nicht zentriert ist, sondern nach links ausgerichtet]
[** WAS ICH WILL: NavBar zu zentrieren, nachdem ich die Blogger volle Breite haben]

Hallo. Finden #cssnav und fügen text-align: center; zwischen den Klammern # 128578;

Vielen Dank! Dass es gelöst!
Lassen Sie mich fragen, ist es möglich, Tropfen Cap in der Beschreibung Header Blogger zu setzen?
Wenn dies der Fall tun können Sie ein Tutorial über das, oder mir einfach den Link versenden.
Nochmals vielen Dank und kümmern uns!

Hey, wäre es zu diesem Tutorial ähnlich, aber mit dem Header Titel oder der Beschreibung Klasse anstelle der Wähler (h3.post-Titel) gezeigt.

Danke, du hast mir sehr geholfen.

Aber jetzt, wie kann ich die Fußzeile Inhalt zentriert bleiben? Der Hauptinhaltsbereich ist ganz gut zentriert, aber die Widgets der Fußzeile aufwendet noch zu 100% Breite. Was mache ich?

Nochmals vielen Dank für Ihre Hilfe! Dies war die beste / einfachste Tutorial ich online gefunden haben!

Ehrfürchtig Tutorial!
Das einzige Problem, das ich habe ist, dass ich nicht mein Blog Header Zentrieren kann. Kannst du mir helfen?
Vielen Dank!

Hallo Danke dir! Versuchen Sie die Schritte in diesem Tutorial und lassen Sie mich wissen, ob sie für Sie arbeiten.

Wie kann ich meinen Kopf die volle Breite, ohne meine Fußzeile oder Navigationsleiste über die gesamte Breite zu machen?
Ich frage mich auch, wenn Sie mir sagen, wie ein Bild haben, wie ein Band als Hintergrund für meine Navigationsleiste?
Vielen Dank,
Eilidh xo

Sie finden dieses Tutorial zu tun haben, die maximale Breite zu entfernen, die 6 auf Ihrem Blog, dann in Schritt gesetzt wird, um die Wähler aller Elemente fügen Sie den Header ausschließen. Dieser Schritt wird ihr maximale Breite wieder geben, während der Kopf volle Breite zu halten. Ist das sinnvoll? In background-image: url ( 'direkte URL'); auf die Navigationsleiste in Ihrem CSS, ersetzt mit dem Link zu der Bilddatei direkte URL an.

Es hat immer noch eine kleine Bar auf der rechten Seite, dass die Dinge nicht wirklich zentriert machen. Kannst du helfen? Vielen Dank!

Und würde Ich mag meine Seite Tabs haben align links mit meinem „Post Abschnitt“, konnte ich es tun? Danke noch einmal.

Ja Dankeschön! Ich meine den Hauptinhaltsbereich. Ich möchte mehr weißen Raum um den Hauptinhaltsbereich. Wenn ich in Customize Template gehe> Breiten einstellen, gibt es nur eine Option, die rechte Seite Bar und den gesamten Blog einzustellen. Wenn ich die rechte Seite bar einstellen, macht es genau die richtige Seitenleiste größer und scoots den Hauptinhaltsbereich über. Ich mag die Seitenleiste der Größe ist. Gibt es eine weitere Option, die Sie kennen? Oder Tutorial Sie anbieten?

HALLO!
Ich konnte nicht finden ... in meinem HTML. Können Sie mir führen, wo und welche die Tutorials oben folgen? Deine Hilfe ist sehr Willkommen. # 128521;







In Verbindung stehende Artikel