Montag, 15. September 2014

Wer kennt sich mit CSS aus?

Ein wenig habe ich an meinem neuen Blog-Layout schon verändert, aber es will mir nicht gelingen, herauszufinden, wie ich das Grau des Layouts in Weiß verwandeln kann. Wenn ich diesen kleinen praktischen Color Picker über das Layout laufen lassen und im grauen Bereich verweile, zeigt er mir den Farbcode #C7D1D1 an. Doch im gesamten html finde ich diesen Code nicht. Nun besitze ich zwar einige html-Kenntnisse und kann auch manches selbständig und direkt im html-Code verändern, doch in Sachen CSS (Cascading Style Sheets) kann ich noch vieles lernen!

Ich machte mich also auf die Suche und entdeckte diesen Blog. Zwar in englischer Sprache, doch wird dort sehr gut der Aufbau eines Blog-Codes beschrieben. Und doch ... fehlt mir hier das Wissen ... welcher Teil genau den grauen  Bereich beschreibt.

Vielleicht kann mir irgendjemand dabei weiterhelfen?

Gemeint ist der gesamte graue Bereich, auf den der rote Pfeil im folgenden Screenshot zeigt:


Unter Vorlage => Anpassen => Erweitert finde ich auch nichts, wo ich dieses Grau entfernen oder verändern könnte.
Im Allgemeinen arbeite ich auch lieber direkt im Quelltext, also im html-Code. Die Modernisierung in der Handhabung im so genannten Vorlagendesigner unter "Vorlage => Anpassen" nutze ich nur sehr selten!

Es ist mir schon klar, daß 'Padding' den Raum zwischen dem Inhalt und der Grenze definiert und 'Margin' der Raum zwischen der Grenze und dem äußeren Element darstellt. Der Grafik im o,a. Blog zufolge müßte mein grauer Bereich mit dem grauen Bereich in der Grafik identisch sein. Doch hat es bei meinem Versuch im eigens dazu neu angelegten Testblog nicht geklappt!

Vielleicht weiß jemand von Euch oder den zufällig Vorbeisurfenden mehr und kann mir kurz weiterhelfen? Ich brauche lediglich die Bezeichnung, die den Bereich des Layouts angibt bzw. wo ich diese im html-Quelltext finde. 

Nachtrag:
Auch diese Tipps bezüglich des Gradienten (Hintergrund-Bildes) können mir evt. noch weiterhelfen.
Wozu dient CSS?

Außerdem habe ich das LinkWithin-Widget noch angepasst, denn es zeigte nur 3 Bilder. Nun sind es 4, eigentlich sollten jedoch 5 erscheinen. Zudem habe ich die Überschrift des Link-Withins geändert und dazu hat Mira/copy paste love einen sehr schönen Post geschrieben.




Kommentare:

  1. Vorlage => Anpassen => Erweitert
    Soweit ganz gut... ;-)
    Dann hast du links weiter mehrere Menuepunkte
    Da gehst du auf Hintergrund und kannst unter verschiedenen Farbschenata auswählen. Nicht vergessen zu speichern... ;-)
    Es sind auch noch ein paar andere Einstellungen möglich im Vorlagendesigner !

    AntwortenLöschen
    Antworten
    1. Leider nicht bei diesem Layout, Gucky!
      Die unterschiedlichen Layouts haben unterschiedliche Vorgaben und bei diesem Layout, das ich wählte, kann ich da nichts anpassen, jedenfalls nicht das, was ich oben beschrieben habe.
      Das muß ich im html machen. Nur kenne ich mich mit CSS nicht gut genug aus.

      Viele Grüße
      Sara

      Löschen
    2. "Das Hintergrundbild kannst du im Vorlagendesigner über "Hintergrund" austauschen. Erst das bisherige entfernen und dann auf den Pfeil daneben klicken, um ein neues hochzuladen oder eines aus der Auswahl zu wählen. "
      Das hatte ich dir in etwa gerade erklärt !

      Löschen
    3. Das Hintergrundbild schon, Gucky, nicht jedoch das Grau! Denn darum geht es mir, das ist NICHT das Hintergrundbild. Der Hintergrund ist von mir Grün eingestellt worden, das war möglich. Doch wo finde ich das Grau im Template?

      Löschen
  2. Oh, ein neues Design. Jetzt hast du auch eine Blogger-Vorlage gewählt. Ich habe bei mir auch lange gebraucht, um alle Einstellungen herauszufinden. Bei dir scheint das Grau nicht zum Hintergrund, sondern zum Post zu gehören. Wichtig ist, den Namen von diesem Bereich rauszufinden. Dann kann man dort alles ändern. Farbe und Schriftstil. Ich kenne nur deine Vorlage nicht.
    LG Sigrun

    AntwortenLöschen
    Antworten
    1. Liebe Sigrun,
      ich habe die Vorlage "Bildfenster" und die ist so aufgebaut, daß sie aus mehreren "Schichten" besteht, wie ich das mal nenne mangels Fach-Vokabular. Das Grau ist ja auch in der Sidebar oder ist das bei Dir so nicht zu sehen?

      Ich werde mich demnächst nochmal dransetzen. Heute ist es schon zu spät. Sollte wohl endlich mal CSS richtig lernen, damit ich nicht immer wieder ähnliche Probleme habe. Denn an sich kann ich sonst mit html ganz gut umgehen. Nur mit CSS habe ich mich nie so intensiv beschäftigt, nur Codes "irgendwo" eingefügt und wenn es gepasst hat, hat es gepasst, wenn nicht, hab' ich sie wieder gelöscht. Aber das ist noch kein Wissen. ;-)
      Danke und liebe Grüße
      Sara

      Löschen
    2. Hallo Sara, ich habe gerade noch mal bei mir probiert. Das muss auch ohne CSS Kenntnisse gehen. Es gibt unter Vorlagen-Erweitert die äußeren Hintergründe. Das ist bei dir die alte grüne Farbe. Dann gibt es noch unter Post einmal die Hintergrundfarbe und als zweites die Rahmenfarbe. Das müsste dein grau sein. Manchmal ist auch 'transparent' möglich. Da muss man einfach alles ausprobieren. LG Sigrun

      Löschen
  3. Den Code #C7D1D1 findet man im Quelltext bei deinem Beitrag hier und beim Dawanda Widget...

    AntwortenLöschen
    Antworten
    1. Ja klar, aber nur, weil ich ihn hier selbst reingeschrieben habe! Im Post oben! Im Quelltext (html des Blogs/Bloggerüsts) habe ich ihn vergeblich gesucht! Und das Widget habe ich erst einmal angepasst, damit es sich nicht grün vom Grau abhebt. ;-)

      Löschen
  4. Liebe Sara,
    Leider kann ich dir nicht helfen...
    Ganz liebe Grüsse,
    Mariette

    AntwortenLöschen
    Antworten
    1. Danke trotzdem, liebe Mariette!
      Liebe Grüße
      Sara

      Löschen
  5. Hallo Sara,
    helfen kann ich Dir leider nicht, da ich selber wie ein Blinder herumstochere, mir nicht zutraue mal was Neues zu machen und frph bin, wenn alles funktioniert.
    Aber sagen möchte ich Dir, daß es mir so gut gefällt wie Du es jetzt hast.

    Liebe Grüße
    Brigitte

    AntwortenLöschen
    Antworten
    1. Danke, liebe Brigitte.
      Mir gefällt nur das Grau zum Grün und Weiß nicht. Und wenn, dann sollte es viel heller sein.
      Aber mal schauen ...

      Liebe Grüße
      Sara

      Löschen
  6. Liebe Sara,

    dein "Grau" ist in Wirklichkeit eine transparente Schicht, die sich über das Grün gelegt hat - quasi ein zusätzlicher Hintergrund. Dadurch wirkt die Farbe gräulich.
    Ich hab das in meinem Testblog mal ausprobiert. Man bekommt diese Schattierung nur weg, wenn man in der Vorlage unter Anpassen --> "Hintergründe" den Hintergrund entfernt und unter "Erweitert" alle Hintergründe weiß macht. Selbst dann bleibt noch ein leichter Rand. Dann hättest du aber keinen farbigen Hintergrund mehr, Selbst wenn du ein Hintergrundbild aus dem Sortiment auswählst oder ein Bild aus dem eigenen Bestand hochlädtst, entsteht diese transparente Schattierung. Den CSS-Code kenne ich leider nicht.

    LG Sabine

    (die sich sehr über deinen Besuch gefreut hat ♥)

    AntwortenLöschen
    Antworten
    1. Liebe Sabine,
      ich freue mich auch sehr über Deinen Besuch! :-)
      Und das habe ich beinahe vermutet, denn in meinem Garten-Testblog hatte ich das ausprobiert und der Hintergrund dort ist nun komplett Grün, was mir auch nicht behagt.

      http://gartentestblog.blogspot.de/

      Dazu hat sich auch noch die Schriftfarbe, die in der Sidebar Grau erscheint, zu Schwarz hin verändert.
      Nun belasse ich es erst einmal hierbei. Ändern kann man später immer noch etwas. Vorläufig fehlt mir dann wieder die Zeit. Dann blogge ich lieber oder besuche den einen oder anderen Blog.

      Danke für die Info, darüber freue ich mich sehr! Und liebe Grüße
      Sara

      Löschen
    2. Ja das kenne ich. Vor lauter Blogbastelei kommt man gar nicht dazu, die anderen Blogger zu besuchen. Ich bin froh, dass mein Blog momentan meiner Zufriedenheit entspricht - bis zum Nächsten "Bastelanfall".
      LG

      Löschen
  7. Huhu,

    such mal in Deiner CSS-Datei nach folgender Stelle:

    {background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1}

    Da Deine CSS-Datei komprimiert wird, kann ich hier keine Zeilennummer erkennen.

    Dort wird der Hintergrund auf #ccc (grau) gesetzt und mit einer Transparenz versehen, daher scheint das Grün da durch.

    Probiere mal die Angaben zur Transparenz dort zu löschen und dann den Wert #ccc auf Deine gewünschte Farbe zu ändern (#fff für weiß), dann sollte es so sein, wie Du es gerne haben möchtest. Vorher aber besser ein Backup der CSS-Datei machen.

    LG Thomas

    AntwortenLöschen
    Antworten
    1. Hallo Thomas,
      herzlichen Dank! Nur leider kann ich diese Stelle nicht finden. Ich bin nach folgender Anleitung vorgegangen

      http://www.copypastelove.de/2013/06/suchen-finden-mit-dem-neuem-html-editor.html

      Da es ja mit dem Editor nicht ganz so einfach ist ... es sind viele Stellen nicht ausgeklappt, lediglich kleine Dreiecke vorhanden, die man alle manuell mühselig aufklappen müßte (meintest Du das mit komprimiert?) Aber lt. Miras Anleitung (Link oben) sieht es so aus, als würde das gesamte html durchsucht, auch das zugeklappte?

      In welchem Bereich wäre diese Zeile denn angesiedelt? Im Bereich .main-outer?


      Herzliche Grüße
      Sara

      Löschen
  8. Du suchst an der falschen Stelle bzw. in den falschen Dateien. Ich kenne mich bei Blogger nicht aus. Daher weiß ich nicht, wie Du an die Dateien heran kommt. Aber irgendwo muss es eine Datei mit dem Namen widget_css_2_bundle.css geben. In dieser CSS-Datei musst Du die Stelle suchen und ändern.

    Die CSS-Datei enthält die eigentliche Formatierung der Seite und wird von der php bzw. der html Datei beim Seitenaufbau mit geladen.

    LG Thomas

    AntwortenLöschen
    Antworten
    1. Hallo Thomas,
      das ist wirklich sehr lieb! Danke! Aber eine Datei dieses Namens gibt es im Blogger-Blog nicht! Auf externe Dateien haben wir Blogger leider keinerlei Zugriff. Ich werde demnächst einmal ein Screenshot anfertigen, wie es da ausschaut. Man hat ein Aufklappmenü, welches die Widgets anzeigt. Mehr aber auch nicht.
      Von früheren Webseiten, die ich betrieb, kenne ich auch noch eine externe CSS-Datei. Doch das geht nur, wenn man bspw. einen Wordpress-Blog selbst hostet. Das habe ich ja - eigentlich - auch vor. Sobald die Zeit dafür vorhanden ist.

      Liebe Grüße
      Sara

      Löschen


*¨¨* ♥♥~♥ Vielen ♥♥lichen Dank für Deinen Kommentar! Jeder Deiner Sätze ist Inspiration und Erbauung für mich. Ich freue mich sehr über jede Zeile, es ist mir aus Zeitgründen jedoch nicht möglich, hier jederzeit auf einzelne Kommentare zu reagieren. Fragen beantworte ich immer und zeitnah. Blogbesuche erfolgen leidenschaftlich gern und bei Gelegenheit. Herzlichst 【ツ】 *¨¨* ♥♥~♥