{"id":3324,"date":"2011-02-09T02:40:57","date_gmt":"2011-02-09T01:40:57","guid":{"rendered":"http:\/\/www.kohlhof.de\/kohlhof\/?p=3324"},"modified":"2023-06-07T19:52:00","modified_gmt":"2023-06-07T17:52:00","slug":"gekritzel","status":"publish","type":"post","link":"https:\/\/www.kohlhof.de\/kohlhof\/2011\/02\/09\/gekritzel\/","title":{"rendered":"Gekritzel"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:302,&quot;href&quot;:&quot;http:\\\/\\\/www.csszengarden.com\\\/030&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250328152228\\\/https:\\\/\\\/csszengarden.com\\\/030\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-02-11 07:05:14&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-04 22:47:59&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-26 01:24:29&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-26 01:24:29&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:303,&quot;href&quot;:&quot;http:\\\/\\\/www.csszengarden.com&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20260208051233\\\/https:\\\/\\\/csszengarden.com\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-02-11 07:05:16&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-04 22:47:57&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-03-04 22:47:57&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:304,&quot;href&quot;:&quot;http:\\\/\\\/www.csszengarden.com\\\/?cssfile=106\\\/106.css&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20200210191032\\\/http:\\\/\\\/www.csszengarden.com:80\\\/?cssfile=106\\\/106.css&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-02-11 07:05:18&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-04 22:47:56&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-03-04 22:47:56&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:305,&quot;href&quot;:&quot;http:\\\/\\\/www.csszengarden.com\\\/?cssfile=121\\\/121.css&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20241209105322\\\/https:\\\/\\\/csszengarden.com\\\/?cssfile=121\\\/121.css&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-02-11 07:05:21&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-04 22:47:56&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-03-04 22:47:56&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>Sie kennen das vielleicht: Irgendwann kann man die Tapeten im Wohnzimmer nicht mehr sehen. Man macht sich dann Gedanken und plant ein Wochenende f\u00fcr Malerarbeiten ein &#8211; damit man sp\u00e4ter wieder mit Wohlbehagen auf der Couch sitzen kann um den Wandbehang anzustarren. Manchmal ist eben ein Tapetenwechsel notwendig &#8211; auch in meinem digitalen Wohnzimmer. Mein Blog sieht seit heute anders aus. Das bisherige Erscheinungsbild mochte ich einfach nicht mehr sehen. Ich habe deshalb tagelang digital herumgekritzelt &#8211; und hoffe, dass die neue Optik weiterhin Lust aufs Lesen macht (und mir<\/p>\n<figure style=\"width: 180px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" title=\"Zickzacklinie\" src=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/themes\/kritzel\/images\/kritzel_flatline01.jpg\" alt=\"Echte  kohlhof.de-Kritzelei\" width=\"180\" height=\"118\" \/><figcaption class=\"wp-caption-text\">Eine echte kohlhof.de-Kritzelei<\/figcaption><\/figure>\n<p>wieder mehr Ansporn gibt, neue Texte zu schreiben).<\/p>\n<p>Dieses Layout gibt es tats\u00e4chlich nur hier &#8211; ich bitte die Leserschaft schon jetzt um Hinweise und Meinungen, wie das neue Template gef\u00e4llt &#8211; und ob es irgendwo noch fehlerhafte Darstellungen gibt. Vielen Dank!<!--more--><\/p>\n<p>Das neue kohlhof.de-Theme hei\u00dft &#8220;kritzel&#8221; &#8211; und sieht ja auch an einigen Stellen bekritzelt aus. Die Idee habe ich aus meinem Arbeitsleben \u00fcbernommen. Selbstverst\u00e4ndlich verfolge ich Besprechungen und Konferenzen stets mit einem ebenso angemesssenen wie notwendigen Ma\u00df an Aufmerksamkeit. Aber fast schon automatisch fange ich an, auf meinen Notizzetteln herumzuklieren. So entstehen Muster aus Kringeln, Kurven und Linien &#8211; und manchmal auch kleine Bildchen (meine Omi war \u00fcbrigens auch eine ganz eifrige Kringel-beim-Telefonieren-Malerin).<\/p>\n<p>Also habe ich mal angefangen, mit dem Grafik-Tablett zu kritzeln. Drei Dinge sind an diesem Theme besonders:<\/p>\n<ul>\n<li>Da w\u00e4ren zun\u00e4chst die blauen grafischen Elemente, insbesondere die kleinen Pictogramme, die neben einigen Postings angezeigt werden. Sie werden abh\u00e4ngig von den verwendeten Schlagw\u00f6rtern angezeigt und sollen f\u00fcr unendliche Neugier bei Ihnen, gesch\u00e4tzte Damen, werte Herren sorgen, weil sie sich stundenlang durchs Blog klicken, um neue exklusive Zeichnungen aus der Hand des Blogbetreibers zu finden.<\/li>\n<li>Die Meta-Daten jedes Beitrags wie das Ver\u00f6ffentlichungs-Datum, die Anzahl der User-Kommentare und die Schlagw\u00f6rter stehen nun rechts neben jedem Text. Ich hatte es zuvor lange als st\u00f6rend empfunden, dass Schlagw\u00f6rter und dergleichen immer \u00fcber und\/oder unter dem Text zu finden waren. Meinem Eindruck nach hindert das den Lesefluss. Sicherlich sind Meta-Angaben notwendig &#8211; aber rechts am Rand lenken Sie hoffentlich nicht mehr so stark vom Wesentlichen ab.<\/li>\n<li>Dieser Blog ist mein digitales Wohnzimmer, und ich habe einen Untermieter: katharineum94.de. Hier gibt es Infos f\u00fcr meine ehemaligen Mitsch\u00fcler. Auch wenn Sie nicht zu den Katharineern geh\u00f6ren, klicken Sie doch gleich mal oben auf den Link, sie werden dann schon merken, was die dritte neue Besonderheit ist.<\/li>\n<\/ul>\n<p>Ich habe hier schon \u00f6fter \u00fcber das Layout von Internetseiten geschrieben. Die Tatsache, dass kohlhof.de nun also so bekritzelt aussieht, dass die Meta-Daten verr\u00fcckt sind, dass Fotos nun einen Rahmen haben &#8211; all das l\u00e4sst sich mit Hilfe von CSS-Angaben<\/p>\n<figure id=\"attachment_3329\" aria-describedby=\"caption-attachment-3329\" style=\"width: 287px\" class=\"wp-caption alignleft\"><a title=\"Link auf das Template &quot;Entomology&quot; im CSS-Zen-Garden\" rel=\"https:\/\/www.kohlhof.de\" href=\"http:\/\/www.csszengarden.com\/030\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3329\" data-permalink=\"https:\/\/www.kohlhof.de\/kohlhof\/2011\/02\/09\/gekritzel\/csszengarden030\/\" data-orig-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden030.jpg\" data-orig-size=\"696,727\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"CSS-Zen-Garden, Template Entomology\" data-image-description=\"&lt;p&gt;Eine von vielen CSS-Zengarden-Varianten: Das Template &amp;#8220;Entomology&amp;#8221; erinnert an die Schmetterlings-Sammlung im Naturhistorischen Museum.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Eine von vielen CSS-Zengarden-Varianten: Das Template &amp;#8220;Entomology&amp;#8221; erinnert an die Schmetterlings-Sammlung im Naturhistorischen Museum.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden030.jpg\" class=\"size-medium wp-image-3329   \" title=\"CSS-Zen-Garden, Template Entomology\" src=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden030-287x300.jpg\" alt=\"Screenshot CSS-Zen-Garden, Template Entomology: Layout mit Schmetterlingen\" width=\"287\" height=\"300\" srcset=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden030-287x300.jpg 287w, https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden030.jpg 696w\" sizes=\"auto, (max-width: 287px) 85vw, 287px\" \/><\/a><figcaption id=\"caption-attachment-3329\" class=\"wp-caption-text\">Eine von vielen CSS-Zengarden-Varianten: Das Template &quot;Entomology&quot; erinnert an die Schmetterlings-Sammlung im Naturhistorischen Museum.<\/figcaption><\/figure>\n<p>einstellen. Cascading-Style-Sheets dienen zur Definition jedes einzelnen Layout-Elements einer Internetseite: Schriftart, -gr\u00f6\u00dfe, -farbe und hunderte andere Werte. Ich kenne mich damit ein wenig aus. Aber tats\u00e4chlich nur ein wenig. Trotzdem macht es mir erschreckend viel Spa\u00df, stundenlang Bl\u00f6cke, Klassen und Abs\u00e4tze zu definieren.<\/p>\n<p>Inspiration kommt dabei unter anderem von der wundervollen Internetseite <a title=\"Link zum CSS-Zen-Garden\" href=\"http:\/\/www.csszengarden.com\/\">csszengarden.com<\/a>.<\/p>\n<figure id=\"attachment_3331\" aria-describedby=\"caption-attachment-3331\" style=\"width: 269px\" class=\"wp-caption alignright\"><a title=\"Link auf das Template &quot;Mediterranean&quot; im CSS-Zen-Garden\" href=\"http:\/\/www.csszengarden.com\/?cssfile=106\/106.css\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3331\" data-permalink=\"https:\/\/www.kohlhof.de\/kohlhof\/2011\/02\/09\/gekritzel\/csszengarden106\/\" data-orig-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden106.jpg\" data-orig-size=\"713,794\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"CSS-Zengarden Template &amp;#8220;Mediterranean&amp;#8221;\" data-image-description=\"&lt;p&gt;Das Template &amp;#8220;Mediterranean&amp;#8221; macht aus der Standard-HTML-Datei eine Internetseite mit Meerblick. Da waren Profis am Werk.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Das Template &amp;#8220;Mediterranean&amp;#8221; macht aus der Standard-HTML-Datei eine Internetseite mit Meerblick. Da waren Profis am Werk.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden106.jpg\" class=\"size-medium wp-image-3331   \" title=\"CSS-Zengarden Template &quot;Mediterranean&quot;\" src=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden106-269x300.jpg\" alt=\"Screenshot von CSS-Zengarden Template &quot;Mediterranean&quot;\" width=\"269\" height=\"300\" srcset=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden106-269x300.jpg 269w, https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden106.jpg 713w\" sizes=\"auto, (max-width: 269px) 85vw, 269px\" \/><\/a><figcaption id=\"caption-attachment-3331\" class=\"wp-caption-text\">Das Template &quot;Mediterranean&quot; macht aus der Standard-HTML-Datei eine Internetseite mit Meerblick. Da waren Profis am Werk.<\/figcaption><\/figure>\n<p>Dort zeigen Designer, die wahrscheinlich sogar in CSS tr\u00e4umen, was mit diesen Layout-Definitionen wirklich m\u00f6glich ist. Das Konzept des CSS-Zen-Gardens ist, dass Designer eine unver\u00e4nderliche, vorgegebene HTML-Seite, also eine Internetseite, neu gestalten, und zwar allein<\/p>\n<figure id=\"attachment_3333\" aria-describedby=\"caption-attachment-3333\" style=\"width: 300px\" class=\"wp-caption alignleft\"><a title=\"Link auf das Template &quot;60's Lifestyle&quot; im CSS-Zen-Garden\" href=\"http:\/\/www.csszengarden.com\/?cssfile=121\/121.css\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3333\" data-permalink=\"https:\/\/www.kohlhof.de\/kohlhof\/2011\/02\/09\/gekritzel\/csszengarden121\/\" data-orig-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden121.jpg\" data-orig-size=\"782,782\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"CSS-Zen-Garden, Template &amp;#8220;60&amp;#8217;s Lifestyle&amp;#8221;\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Der Kreativit\u00e4t sind keine Grenzen gesetzt. Was versierte Designer mit Grafikprogrammen, CSS und vor allem den richtigen Ideen alles schaffen, zeigt der CSS-Zen-Garden in hunderten Beispielen.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden121.jpg\" class=\"size-medium wp-image-3333   \" title=\"CSS-Zen-Garden, Template &quot;60's Lifestyle&quot;\" src=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden121-300x300.jpg\" alt=\"Screenshot vom CSS-Zen-Garden, Template &quot;60's Lifestyle&quot;. Optik mit altem Benz.\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden121-300x300.jpg 300w, https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden121-150x150.jpg 150w, https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/csszengarden121.jpg 782w\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-3333\" class=\"wp-caption-text\">Der Kreativit\u00e4t sind keine Grenzen gesetzt. Dieses Template hei\u00dft &quot;60&#39;s Lifestyle&quot;. Was versierte Designer mit Grafikprogrammen, CSS und vor allem den richtigen Ideen alles schaffen, zeigt der CSS-Zen-Garden in hunderten Beispielen.<\/figcaption><\/figure>\n<p>mit CSS-Angaben (und mithilfe grafischer Elemente, die \u00fcber CSS eingebunden werden). Das Durchbl\u00e4ttern dieser Designs kann tats\u00e4chlich einen gewissen meditativen Einfluss haben.<\/p>\n<p>Wie lief der Erneuerungsprozess von kohlhof.de?<\/p>\n<p>Grunds\u00e4tzlich: Wenn es keine Style-Sheets g\u00e4be, dann s\u00e4hen Internetseiten 1. alle sehr \u00e4hnlich und zudem langweilig aus. G\u00e4be es kein Style-Sheet, s\u00e4he diese Seite so aus:<\/p>\n<figure id=\"attachment_3325\" aria-describedby=\"caption-attachment-3325\" style=\"width: 1023px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot02.jpg\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3325\" data-permalink=\"https:\/\/www.kohlhof.de\/kohlhof\/2011\/02\/09\/gekritzel\/kohlhofdescreenshot02\/\" data-orig-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot02.jpg\" data-orig-size=\"1023,774\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"kohlhof.de ohne Style-Sheet\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Alles untereinander: Ohne spezielle Layoutangaben stellen Browser Internetseiten nach einem standardisierten Schema dar: Blaue Links, und alles im Times.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot02.jpg\" class=\"size-full wp-image-3325\" title=\"kohlhof.de ohne Style-Sheet\" src=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot02.jpg\" alt=\"Screenshot von kohlhof.de ohne Style-Sheet\" width=\"1023\" height=\"774\" srcset=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot02.jpg 1023w, https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot02-300x226.jpg 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><figcaption id=\"caption-attachment-3325\" class=\"wp-caption-text\">Alles untereinander: Ohne spezielle Layoutangaben stellen Browser Internetseiten nach einem standardisierten Schema dar: Blaue Links, und alles im Times.<\/figcaption><\/figure>\n<p>Wir sind uns sicherlich alle einig: So kann es nicht bleiben. Um f\u00fcr WordPress-Blogs, wie dieses eines ist, ein neues Layout zu entwickeln, l\u00e4dt man sich am besten eines der tausenden bereits vorhandenen Templates, um dieses dann an eigene Bed\u00fcrfnisse anzupassen. Dabei sollte man darauf achten, dass die Vorlage, die man modifizieren m\u00f6chte, nicht zu \u00fcberladen ist (Das vorherige kohlhof.de-Layout basierte auf dem Template-System &#8220;k2&#8221; &#8211; einem sehr m\u00e4chtigen System, das nicht nur jede Menge zus\u00e4tzliche, praktische Layout-Features beinhaltete, sondern auch zus\u00e4tzliche Funktionen &#8211; das alles ist aber f\u00fcr Laien, Anf\u00e4nger und einigerma\u00dfen Fortgeschrittene schwer zu durchschauen und leider auch nicht besonders gut dokumentiert &#8211; was man von einem kostenlosen und ehrenamtlichen Projekt ja auch nicht grundlegend erwarten muss).<\/p>\n<p>Eine vergleichsweise einfache, schlanke Layout-Vorlage ist zum Beispiel das Theme &#8220;toolbox&#8221;. Es ist auf dem aktuellen technischen Stand &#8211; und der Code ist auch schon recht \u00fcbersichtlich. Mit Toolbox in seier urspr\u00fcnglichen Form sieht dieser Blog dann so aus:<\/p>\n<p style=\"text-align: center;\">\n<figure id=\"attachment_3327\" aria-describedby=\"caption-attachment-3327\" style=\"width: 1022px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot03.jpg\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3327\" data-permalink=\"https:\/\/www.kohlhof.de\/kohlhof\/2011\/02\/09\/gekritzel\/kohlhofdescreenshot03\/\" data-orig-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot03.jpg\" data-orig-size=\"1022,812\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"kohlhof.de mit dem Theme &amp;#8220;Toolbox&amp;#8221;\" data-image-description=\"&lt;p&gt;Das grunds\u00e4tzliche Layout mit dem WordPress-Template &amp;#8220;Toolbox&amp;#8221;. Jetzt kanns losgehen mit dem Anpassen.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Grunds\u00e4tzliches Layout: &amp;#8220;Toolbox&amp;#8221; schafft schon mal Ordnung: Es gibt einen Seitenkopf, eine Men\u00fczeile, einen Hauptteil und eine Seitenspalte.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot03.jpg\" class=\"size-full wp-image-3327 \" title=\"kohlhof.de mit dem Theme &quot;Toolbox&quot;\" src=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot03.jpg\" alt=\"Screenshot von kohlhof.de mit dem Theme &quot;Toolbox&quot;\" width=\"1022\" height=\"812\" srcset=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot03.jpg 1022w, https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot03-300x238.jpg 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><figcaption id=\"caption-attachment-3327\" class=\"wp-caption-text\">Grunds\u00e4tzliches Layout: &quot;Toolbox&quot; schafft schon mal Ordnung: Es gibt einen Seitenkopf, eine Men\u00fczeile, einen Hauptteil und eine Seitenspalte. Aber die Schriftformatierung ist noch sehr... nun ja: unangenehm.<\/figcaption><\/figure>\n<p>Was dann folgt, ist stundenlanges Layouten, Eintippen von Abst\u00e4nden und Laufweiten, Farbcodes, dazu das Zeichnen mit dem Grafiktablett sowie das \u00dcberpr\u00fcfen im Browser. F\u00fcr gew\u00f6hnlich ist in dieser Periode keine Zeit f\u00fcr Dinge wie Rasieren, frische Luft schnappen oder Mal-Rechtzeitig-Ins-Bett-Gehen. Keine Woche sp\u00e4ter sieht kohlhof.de nun also so aus.<\/p>\n<figure id=\"attachment_3328\" aria-describedby=\"caption-attachment-3328\" style=\"width: 1015px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot04.jpg\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3328\" data-permalink=\"https:\/\/www.kohlhof.de\/kohlhof\/2011\/02\/09\/gekritzel\/kohlhofdescreenshot04\/\" data-orig-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot04.jpg\" data-orig-size=\"1015,809\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"kohlhof.de mit dem neuen Theme &amp;#8220;kritzel&amp;#8221;\" data-image-description=\"&lt;p&gt;Ein Layout mit Strichzeichnungen. Das ist die grundlegende Idee f\u00fcr das kohlhof.de-Template &amp;#8220;kritzel&amp;#8221;.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Mit Stil bekritzelt: kohlhof.de im neuen Design. Was halten Sie davon?&lt;\/p&gt;\n\" data-large-file=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot04.jpg\" class=\"size-full wp-image-3328\" title=\"kohlhof.de mit dem neuen Theme &quot;kritzel&quot;\" src=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot04.jpg\" alt=\"Screenshot von kohlhof.de mit dem neuen Theme &quot;kritzel&quot;\" width=\"1015\" height=\"809\" srcset=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot04.jpg 1015w, https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2011\/02\/kohlhofdescreenshot04-300x239.jpg 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><figcaption id=\"caption-attachment-3328\" class=\"wp-caption-text\">Mit Stil bekritzelt: kohlhof.de im neuen Design. Was halten Sie davon?<\/figcaption><\/figure>\n<p>Das alles ist nur m\u00f6glich, wenn man wei\u00df, wo man nachschlagen kann, falls etwas nicht auf Anhieb funktioniert (und das kommt h\u00e4ufig vor, speziell wenn man tief in verschachtelten Element-Klassen rumfuhrwerkt). Literatur \u00fcber das Arbeiten mit CSS-Konfigurationen war und ist unter anderem:<\/p>\n<ul>\n<li>Meyer, Eric A.: Cascading Style Sheets Das umfassende Handbuch; O&#8217;Reilly, K\u00f6ln (2005)<\/li>\n<li>Shea, Dave, Holzschlag, Molly E.: Zen und die Kunst des CSS-Designs; Addison-Wesley, M\u00fcnchen (2008)<\/li>\n<li>Hoffmann, Manuela: Modernes Webdesign Gestaltungsprinzipien Webstandards Praxis; Galileo Press, Bonn (2008)<\/li>\n<li>Dazu dann noch das immer noch sensationelle Internet-Handbuch selfhtml, das auch \u00fcber CSS-Angaben aufkl\u00e4rt.<\/li>\n<\/ul>\n<p>J\u00fcngste Neuerungen f\u00fcr die neuen CSS-Versionen 3 und HTML 5 sind in obigen Nachschlagewerke aber kaum ber\u00fccksichtigt.<\/p>\n<p>Entscheidend ist aber auch zu wissen: Jeder Browser stellt Webseiten leicht anders dar. Das liegt auch an den Schriftarten, die auf dem Rechner installiert sind, von dem aus Seiten aufgerufen werden. Wer also Webseiten gestaltet, muss wissen, dass sie nicht auf allen Monitoren identisch angezeigt werden. Das Ziel ist also, die Darstellung in allen m\u00f6glichen Programmen ann\u00e4hernd identisch zu bewerkstelligen. Auch in diesem Zusammenhang bitte ich um sachdienliche Hinweise per Mail oder in den Kommentaren.<\/p>\n<p>Viel Spa\u00df mit kohlhof.de!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>kohlhof.de hat ein neues Layout: &#8220;kritzel&#8221; ist das Ergebnis n\u00e4chtelanger Tipperei. Dazu gibts dann einen grunds\u00e4tzlichen Exkurs, wie das neue CSS-Design entstanden ist. Unter anderem geht es um Inspirationen im CSSZenGarden.<\/p>\n","protected":false},"author":55,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"h5ap_radio_sources":[],"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[2],"tags":[618,524,784,49,636],"class_list":["post-3324","post","type-post","status-publish","format-standard","hentry","category-politik-und-verwaltung","tag-blog","tag-css","tag-design","tag-layout","tag-tagebuch"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paimI-RC","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/posts\/3324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/comments?post=3324"}],"version-history":[{"count":1,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/posts\/3324\/revisions"}],"predecessor-version":[{"id":7303,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/posts\/3324\/revisions\/7303"}],"wp:attachment":[{"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/media?parent=3324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/categories?post=3324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/tags?post=3324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}