Bulletproof Theme ändern

Webster206 · Post by **Webster206** » Mon Sep 10, 2007 9:11 pm

Hallo,

ich möchte das Bullettproof Theme etwas anpassen. Ich bin auch schon recht weit gekommen. Allerdings will es mir einfach nicht gelingen, den Header Bereich zu erweitern. Ich hätte gerne einen schwarzen Hintergrund für den Header, der über die ganze Bildschirmbreite geht. Ebenso die Navigationsleiste. Allerdings soll der Rest, also der Content nicht die ganze Breite beanspruchen. (Ob das verständlich war?) In etwa so wie bei Software Guide. http://sw-guide.de/

Kann mir jemand sagen, wie ich das umsetzen muss?

Big-Tux · Post by **Big-Tux** » Mon Sep 10, 2007 10:58 pm

URL zu deinem Blog? Könnte helfen...

Normal änderst du das über die serendipity_banner aber bei bulletproof ist das so'n Problem, da gibts mehrere .css

Post by **yellowled** » Tue Sep 11, 2007 8:36 am

Big-Tux wrote:URL zu deinem Blog? Könnte helfen...

Ich gehe davon aus, dass es sich um das Blog handelt, welches über den WWW-Button seines Posts zu erreichen ist ..? Erm, nein, kann nicht sein. Das basiert nicht auf BP ...

Big-Tux wrote:Normal änderst du das über die serendipity_banner aber bei bulletproof ist das so'n Problem, da gibts mehrere .css

Was ist daran ein Problem?

Bulletproof verwendet folgende Stylesheets:
- base.css (absolutes Basisstyling, editieren auf eigene Gefahr)
- style.css (gemeinsame Styles aller Farbsets)
- ie6.css bzw. ie7.css (Extrawürste für die Herren Explorer)
- purple_style.css, blue_style.css, green_style.css (die individuellen Stylesheets eines Farbsets; üblicherweise wären diese der geeignete Ort für eigene Anpassungen)

In der kommenden Version von BP wird es zudem möglich sein, zusätzliche Userstylesheets automagisch einbinden zu lassen, aber das wird noch ein paar Tage dauern

YL

Post by **yellowled** » Tue Sep 11, 2007 8:49 am

Webster206 wrote:Ich hätte gerne einen schwarzen Hintergrund für den Header, der über die ganze Bildschirmbreite geht. Ebenso die Navigationsleiste. Allerdings soll der Rest, also der Content nicht die ganze Breite beanspruchen.

Der Punkt ist: Bei sw-guide.de ist das eine Illusion. Weder der Container für den Header, noch der für das Menü gehen über die gesamte Bildschirmbreite, das wird über ein Hintergrundbild für den body erzeugt. Da Bulletproof ebenso wie sw-guide mit einem wrapper-div arbeitet, sollte das also analog reproduzierbar sein ... hm. Hmhmhm.

Tjoah, einfach so wie bei sw-guide nachbauen. Man nehme ein geeignetes Hintergrundbild (1x87 Pixel - oder halt mehr, wenn Du mehr brauchst; ich würde empfehlen, es etwas breiter zu machen; irgendwo habe ich mal gelesen, das sei im IE besser darzustellen) und lege es in /templates/bulletproof/img/ ab, also z.B. als blackbodytop.png. Gehen wir mal davon aus, dass Du als Hintergrundfarbe für body weiß benutzen möchtest, dann sollte

Code: Select all

body {
    background: #fff url('img/blackbodytop.png') repeat-x;
    [ggf. weitere Formatierungen für body]
}

schon reichen.

Wo Du das hinpackst, hängt davon ab, wie Du BP erweiterst. Wenn Du eines der Colorset-Stylesheets umschreibst, pack es da rein. Wenn Du ein eigenes Stylesheet eingebunden hast, pack es da rein.

YL

Webster206 · Post by **Webster206** » Tue Sep 11, 2007 6:20 pm

Hallo,

ja mein Blog ist eigentlich der in meinem WWW-Button. Allerdings bastle ich am Bullettproof Design lokal und nicht online. Aber Yellowled, du hast das genau richtig erkannt, wie ich mir das vorstelle. Dass es sich um eine Illusion bei SW-Guide handelt, hatte ich mir beinahe gedacht, nur eben nicht gewusst, wie ich das nachbauen kann. Mit dem Wrapper div habe ich jetzt so lange rumgespielt und kam nicht dahinter.

Vielen Dank also erstmal für den Tipp mit der Hintergrundgrafik. Ich werde das diese Tage gleich mal probieren und das Ergebnis natürlich posten.

Ich gehe mal davon aus, dass man mit diesem Kniff auch die Navileiste verlängern kann.

Ich habe tatsächlich das Blue-Stylesheet als Grundlage genommen meine Veränderungen eingearbeitet. Seh ich das eigentlich richtig, dass ich in diesem Stylesheet arbeiten kann, ohne das "kugelsicher" zu gefährden?

Danke auf jeden Fall für die (wie immer) tolle Hilfe. Ich halte euch auf dem laufenden, wie es klappt.

Webster206 · Post by **Webster206** » Tue Sep 11, 2007 9:28 pm

Ach, da hätte ich noch eine Frage. Wie wende ich denselben Trick beim Footer an, so dass auch er über die ganze Bildschirmbreite geht? Wenn ich die Grafiken im Body eingebunden habe, geht das unten nicht mehr. Bei SW-Guide scheint der Footer ja getrennt vom Wrapper zu sein, oder? Geht sowas auch mit Bulletproof?

Post by **yellowled** » Tue Sep 11, 2007 10:26 pm

Webster206 wrote:Vielen Dank also erstmal für den Tipp mit der Hintergrundgrafik. Ich werde das diese Tage gleich mal probieren und das Ergebnis natürlich posten.

Gern geschehen.

Webster206 wrote:Ich gehe mal davon aus, dass man mit diesem Kniff auch die Navileiste verlängern kann.

Kann man nicht nur, tut man schon, zumindest wenn man es so macht wie bei sw-guide.de. Das Hintergrundbild dort deckt Header und Navigation ab.

Webster206 wrote:Seh ich das eigentlich richtig, dass ich in diesem Stylesheet arbeiten kann, ohne das "kugelsicher" zu gefährden?

Sofern wir vom Entwicklungsteam nicht oberdämlich gepfuscht haben: Ja. Der Haken wäre höchstens, dass bei einem Update von BP die Datei blue_style.css und damit Deine Änderungen überschrieben werden, also: Sichern. In der kommenden Version (Nein, ich kann noch nicht sagen, wann die veröffentlich wird

) kann man dann sehr simpel eigene Stylesheets integrieren. (Ja, es wäre schön gewesen, wenn das schon in dieser Version möglich gewesen wäre. Was will man machen?

)

YL

Post by **yellowled** » Tue Sep 11, 2007 10:36 pm

Webster206 wrote:Wie wende ich denselben Trick beim Footer an, so dass auch er über die ganze Bildschirmbreite geht? Wenn ich die Grafiken im Body eingebunden habe, geht das unten nicht mehr. Bei SW-Guide scheint der Footer ja getrennt vom Wrapper zu sein, oder? Geht sowas auch mit Bulletproof?

Hm. Hmhmhmhm. Schwierig. Du könntest natürlich in der index.tpl herumhacken, aber das ist suboptimal (wird bei BP-Updates überschrieben). Möglich wäre eventuell (lies: ungetestet), dem Footer eine extrem breite, aber nicht sehr hohe Grafik als Hintergrundbild zuzuweisen (so er noch kein Hintergrundbild hat). Also (um im Beispiel zu bleiben) eine 2000 Pixel breite, 10 Pixel hohe Grafik in schwarz namens blackfooter.png, die dann so eingebunden würde:

Code: Select all

#footer {
    background: #000 url('img/blackfooter.png') left top repeat-y;
    [...]
}

Müsste mit etwas Finetuning gehen, ist aber, wie gesagt, ungetestet und klappt nur, wenn #footer noch kein Hintergrundbild hat.

YL

Webster206 · Post by **Webster206** » Sun Sep 23, 2007 6:08 pm

Zum Glück war ich noch nicht fertig, denn mit Bulletproof 1.1 ist alles noch schöner und einfacher geworden. Prima. So muss ich auch die Kommentaranzeigen nicht mehr mühsam ändern.

Die Tipps für den oberen Bereich haben wunderbar funktioniert. Der Header und die Navileiste scheinen jetzt ein Band zu sein, das den ganzen Bildschirm füllt. Danke für die Hilfe.

Im Footer klappte das natürlich nicht so leicht, da er ja durch die wrapper Angaben begrenzt ist. Schade. Ich habe auch durch langes Probieren keine andere Möglichkeit gefunden. Jetzt passt der Footer designtechnisch natürlich nicht zum restlichen Aufbau. Falls noch jemand eine Idee hat.... Danke schon mal.

Post by **yellowled** » Mon Sep 24, 2007 8:42 am

Webster206 wrote:Im Footer klappte das natürlich nicht so leicht, da er ja durch die wrapper Angaben begrenzt ist.

Auch nicht mit meinem letzten Tipp? Kann ich mir das Ganze irgendwo ansehen (URL?), um evtl. weiterhelfen zu können?

YL

Webster206 · Post by **Webster206** » Mon Sep 24, 2007 8:45 am

Nein, der letzte Tipp half leider nichts. Der Footer bleibt in der festen Größe. Schade.

Angucken ist etwas schwer, da ich alles lokal auf meinem Rechner mache und das Theme noch nicht online installiert habe. Ich könnte dir höchstens nen Screenshot oder die Stylesheets schicken.

Post by **yellowled** » Mon Sep 24, 2007 9:35 am

Webster206 wrote:Nein, der letzte Tipp half leider nichts. Der Footer bleibt in der festen Größe. Schade.

Hmja, dann nützt das alles nichts. Eine Alternative wäre, wie bereits erwähnt, die index.tpl dahingehend zu modifizieren, dass #footer aus dem #wrapper genommen wird, wobei das wahrscheinlich die Kugelsicherheit des Ganzen ruiniert und zudem nicht updatefest ist.

YL

Webster206 · Post by **Webster206** » Mon Sep 24, 2007 9:41 am

Nun, dann werd ich wohl damit leben müssen. Die Kugelsicherheit möchte ich nämlich nicht gefährden und auch ungern in Code eingreifen, von dem ich nicht allzuviel Ahnung habe. Vielleicht ist ja in zukünftigen Versionen von Bulletproof etwas möglich.

Webster206 · Post by **Webster206** » Thu Sep 27, 2007 4:50 pm

Ich habe das Design jetzt fertig angepasst. Bis auf den besagten Footer. Ihr könnt es euch hier gerne mal anschauen, vielleicht fällt ja doch noch jemandem etwas ein: www.allesroger.net

Post by **yellowled** » Fri Sep 28, 2007 10:52 am

Webster206 wrote:Ich habe das Design jetzt fertig angepasst. Bis auf den besagten Footer. Ihr könnt es euch hier gerne mal anschauen, vielleicht fällt ja doch noch jemandem etwas ein: www.allesroger.net

Gefällt mir sehr, sehr gut. Ich würde allerdings in diesem Design den Footer ebenfalls schwarz auf hellbeige (oder was das ist) gestalten, das sieht meines Erachtens stimmiger aus. Ansonsten: Mir fällt nix auf. Immer wieder schön, zu sehen, was andere Leute aus BP machen

Ach ja: Ich find grün scheiße. (Sorry, das musste jetzt sein

)

YL

Bulletproof Theme ändern

Bulletproof Theme ändern

Re: Bulletproof Theme ändern