Kubrick: Kann relevanten CSS-Eintrag nicht finden

  • Avatar von Unbekannt
    autopoiet · Mitglied ·

    Hallo!

    Vorweg: Ich habe gar keine Ahnung von CSS. Dennoch habe ich es irgendwie geschafft, dass Kubrick-theme für meine Bedürfnisse hinreichend zu modifizieren. Bis auf eine letzte Ausnahme: Um die Sidebar herum befindet sich ein grauer Schatten, vgl. hier http://autopoiet.wordpress.com/ (ich sehe diesen nur auf dem dunklen Monitor meines Desktop-PCs, auf dem Macbook ist er fast unsichtbar).

    Wie kann ich diesen Rahmen weiss definieren bzw. welchen Zusatz muss ich dafür im CSS-Editor posten?

    Danke schon jetzt, autopoiet

  • Avatar von Unbekannt
    iqatrophie · Moderator ·

    Soweit ich das sehen kann, ist das eigentlich kein Rahmen, sondern das Ergebnis des sich wiederholenden Hintergrundbildes, dass <div id="page"> zugewiesen wurde.

    Genauer handelt es sich um https://s-ssl.wordpress.com/wp-content/themes/default/images/kubrickbg.gif

    Die Lösung wäre also, ein eigenes Hintergrundbild auf Basis des Originalbildes zu entwerfen, und den grauen Bereich weiß einzufärben. Anschließend änderst du den CSS Code bzw. änderst die URL so, dass sie auf dein hochgeladenes Hintergrundbild in der Medienbibliothek verweist.

    #page {
  background:transparent url(https://s-ssl.wordpress.com/wp-content/themes/default/images/kubrickbg.gif) repeat-y scroll center top;
  border:medium none;
}

    Du solltest übrigens auch nochmal Hand an dein Headerimage legen, da dein eigenes die abgerundeten Ecken vermissen lässt. ;)
    Als Vorlage würde ich mit dem Kubrick-eigenen Headerbild beginnen.

  • Avatar von Unbekannt
    autopoiet · Mitglied ·

    Yeah, that did it!

    Deine Kollegen im englischen Forum tricksen immer noch ;-)
    Wie lässt sich das Header-Problem denn lösen? Ich bin schon von der Original-Hintergrundgrafik ausgegangen – muss ich die noch mit ’nem Befehl runterschieben? Oder wie muss die Grafik beschnitten werden, damit sie die Kontur nicht überlagert?

    Vielen Dank auf jeden Fall schon mal von mir. Du bist super.

  • Avatar von Unbekannt
    zodiac1978 · Mitglied ·

    Wegen der abgerundeten Ecken, versuche mal folgende Änderung:
    Statt:
    #headerimg { background: url(http://autopoiet.files.wordpress.com/2008/08/spiegel.jpg) no-repeat top;}

    Dieses:
    #headerimg { background: url(http://autopoiet.files.wordpress.com/2008/08/spiegel.jpg) no-repeat -9px 4px;}

    Dann sieht man auch die abgerundeten Ecken wieder …

    Gruß, Torsten

  • Avatar von Unbekannt
    iqatrophie · Moderator ·

    Wie lässt sich das Header-Problem denn lösen?

    Für den Anfang würde ich das oben erwähnte Kubrick Header Bild nehmen, und in den blauen Bereich dein neues Bild draufklatschen.

    Anschließend abspeichern, hochladen und unter 

    #headerimg {
  background:transparent url(http://autopoiet.files.wordpress.com/2008/08/spiegel1.jpg) no-repeat scroll center top;
}

    wie schon vorher die URL ändern. Anschließend müsste man weiter sehen, da du anscheinend schon einige Änderungen am originalen CSS Code vorgenommen hast, die sich gegenseitig ins Gehege kommen.

    Die Spiegelung in deinem jetztigen Bild sieht übrigens nicht optimal aus. Erstens würde ich die Spiegelung etwas weiter unten ansetzen und dann würde ich die zum Ende hin viel stärken Ausblenden lassen.
    Außerdem sieht die Zeile „Beobachtungen 2.Ordung“ im Spiegelbild ganz anders aus als im Original. Andere Formatierung? Die Spiegelung wirkt ausserdem gestaucht.

    Da würde ich nochmal ein entsprechendes Tutorial deiner Grafiksoftware hinsichtlich Spiegelungen durcharbeiten. ;)
    z.B. http://graphic-identity-tutorial.blogspot.com/2007/07/creating-object-reflection-on-surface.html

    Nachtrag
    Das Bild hier würde ich auch noch aus dem CSS Code schmeißen 

    #header {
  background:transparent url(http://autopoiet.files.wordpress.com/2008/08/blank_white.jpg) no-repeat scroll center bottom;
  ...

    Sieht sowieso so aus, als hättest du das händisch da reineditiert, um den grauen Balken des Hintergrundbildes zu verdecken.

    Mit Zodiacs Änderung sollte es dann funktionieren. Die sauberste Lösung ware aber, die Bearbeitung des Originalkubrick Bildes wie oben beschrieben.

  • Avatar von Unbekannt
    autopoiet · Mitglied ·

    Selbst wenn ich statt 4px 10 einsetze (und den Header also noch weiter runtersetze) bleibt der äussere Rahmen überlagert… Hm.

    (Und wo du schon einmal hier unterwegs bist: Mit welchem Parameter kann ich die Schrift des Headers, also des Titels „U4…“ verkleinern?)

  • Avatar von Unbekannt
    iqatrophie · Moderator ·

    Hast du meinen Nachtrag gesehen?

    An deiner Stelle würde ich nochmal sauber von vorne anfangen mit dem Headerbild und nicht versuchen das Problem über die Positionierung zu lösen.

    Mit welchem Parameter kann ich die Schrift des Headers, also des Titels „U4…“ verkleinern?

    Zum Beispiel durch hinzufügen einer Passage 

    #header h1 a {
  font-size: 0.7em;
}
  • Avatar von Unbekannt
    autopoiet · Mitglied ·

    Danke schön, Torsten! Ich werde jetzt mal deinem Rat folgen und ein wenig basteln. So oder so melde ich mich hier… ;-)

  • Avatar von Unbekannt
    autopoiet · Mitglied ·

    Achso: das „blank_white“-jpg habe ich eingebaut, damit beim Aufbau der Seite (bis der richtige Header geladen ist) nicht die blaue Standard-Version gezeigt wird, sondern halt ein weisses Blank… Vielleicht überdeckt DAS den Rahmen und gar nicht der Header selbst?

  • Avatar von Unbekannt
    iqatrophie · Moderator ·

    Sofern du übrigens mit mir sprichst, mein Vorname ist Martin, nicht Torsten. ;)

    zodiac1978 = Torsten
    iqatrophie = Martin

    Da ich selbst kein CSS Upgrade erworben habe, kann ich in Detailfragen nicht mitreden, aber soweit ich weiß, hat man mit der CSS Option zwei Möglichkeiten. Entweder die eigenen Angaben werden dem Theme-spezifischen CSS Stylesheet hinzugefügt, oder sie ersetzen das bestehende Theme CSS.

    Wäre das nicht die sauberere Lösung anstatt den Kubrick Header mit einem weißen Bild zu maskieren? Das hätte den Vorteil, dass der Kubrick Header überhaupt nicht geladen wird.

    Meine Vorgehensweise in deinem Fall wäre also, das Originalstylesheet zu kopieren, alle Änderungen dort zu machen und es abschließend anstatt des Originalthemes laden zu lassen.

    Vielleicht überdeckt DAS den Rahmen und gar nicht der Header selbst?

    Kann ich bestätigen. Ist aber nur ein Teil des Problems. Es sieht so als, als hättest du die Rundungen in deinem Spiegelheader nicht richtig herausgearbeitet.

  • Avatar von Unbekannt
    autopoiet · Mitglied ·

    Alles klar: Martin. Habe vorhin im Eifer des Gefechts den Nick-Unterschied nicht bemerkt… Sorry. Ich habe mir jetzt (wie du sehen kannst) ein wenig mehr Mühe mit dem gespiegelten Header gegeben und den „blank“-Eintrag gelöscht. Jetzt taucht natürlich das blaue Original beim ersten Laden wieder auf.

    Sicher wäre es besser, die Seite von Anfang an neu aufzusetzen. Aber dafür fehlt es mir ehrlich gesagt gerade an Nerven. Gibt es nicht einen Insider-Befehl, der das Standardlayer passend überdecken kann? Oder kann es durchsichtig gemacht werden?

  • Avatar von Unbekannt
    iqatrophie · Moderator ·

    Jetzt taucht natürlich das blaue Original beim ersten Laden wieder auf.

    Logisch, da deine Änderungen am CSS Code dem Kubrick Stylesheet lediglich hinzugefügt werden. Das Kubrick Stylesheet wird also auf alle Fälle immer geladen, und damit auch das Kubrick Headerimage.

    Das kannst du nur verhindern, in dem du wie bereits geschildert die zweite CSS Option in Anspruch nimmst, und das Kubrick Stylesheet durch dein eigenes ersetzen lässt.

    Gibt es nicht einen Insider-Befehl, der das Standardlayer passend überdecken kann? Oder kann es durchsichtig gemacht werden?

    Das setzt in allen von dir geschilderten Herangehensweisen voraus, das man direkt Änderungen am Kubrick Stylesheet durchführen kann. Das ist aber wahrscheinlich nicht möglich.

    Ich sag mal so. Selbst wenn du das Kubrick Headerimage mit einer weiteren Grafik überdeckst, ändert das nichts daran, dass das Standard Stylesheet (und damit auch das störende Headerimage) weiterhin geladen wird. Das du mit deinem früheren, weißen Hintergrundbild den blauen Header nicht mehr gesehen hast, kann an der Abarbeitung der CSS Dateien gelegen haben. Eventuell war der Eintrag in einer der CSS Dateien die gleich zu Beginn geladen wurden.

    Wenn dich das wirklich so stört, wird dir nichts andere übrig bleiben, als das Kubrick Stylesheet herzunehmen, deine bisherigen Änderungen einzubringen, und das fertige Ergebnis anstelle des bestehenden Kubrick Stylesheets laden zu lassen.

  • Avatar von Unbekannt
    autopoiet · Mitglied ·

    Hmm… tja. Sieht so aus. Da denke ich morgen mal ‚drüber nach. Auf jeden Fall herzlichen Dank für deine Hilfe!

  • Avatar von Unbekannt
    autopoiet · Mitglied ·

    So. Das Problem hat sich quasi von selbst gelöst, lässt sich in zwei Sätzen schildern; falls andere User mal ein ähnliches Problem haben sollten:

    Das Kubrick-Theme bietet „von Haus aus“ Möglichkeiten zur Modifizierung des Headers (unter „Darstellung“ auf dem Dashboard): Zum einen „individueller Seitenkopf“, zum anderen „Farbe der Titelzeile“. Wenn man nun die Farbe ZUERST bestimmt (in meinem Fall weiss) und erst DANACH den Header hochlädt, wird das auch in dieser Reihenfolge ins Stylesheet geschrieben; das heisst, beim Ladevorgang des Header wird ein weisser Seitenkopf angezeigt – für den Betrachter also gar nichts. So einfach kann’s gehen…

  • Avatar von Unbekannt
    zodiac1978 · Mitglied ·

    Vielen Dank für das Posten der Lösung!

    Wer vorgefertigte blanke Header-Grafiken sucht, der wird übrigens hier fündig:

    Which themes can I add a header image to?

  • Avatar von Unbekannt
    autopoiet · Mitglied ·

    Vielen Dank für das Posten der Lösung!

    Sonst machen diese Foren ja so wenig Sinn…

  • Avatar von Unbekannt
    zodiac1978 · Mitglied ·

    Möge diese Einstellung doch weiter verbreitet sein ;-)

  • Das Thema ‘Kubrick: Kann relevanten CSS-Eintrag nicht finden’ ist für neue Antworten geschlossen.