tag:blogger.com,1999:blog-15899051340391271832024-02-21T09:30:56.130+01:00Be KreaTiefAnonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.comBlogger89125tag:blogger.com,1999:blog-1589905134039127183.post-56327591635841378622015-06-16T23:06:00.000+02:002015-06-16T23:08:58.407+02:00On MovingHallo zusammen<br />
Es ist etwas still geworden hier. Der Grund dafür ist, dass ich es endlich gewagt habe. Ich habe schon vor bald einem Jahr beschlossen, dass ich mit Blogger nicht mehr das anstellen kann, was ich machen wollte. Und im März, konnte ich mich dann endlich für einen neuen Namen entscheiden.<br />
Heute ist es nun endgültig soweit.<br />
Ich habe den Sprung in die grosse Weite Welt gewagt. Ab jetzt gibt es neuen Elan und Content auf einer jekyllpage. Aber keine Sorge, Blogger Tutorials, wird es weiterhin geben.<br />
<br />
Bitte alle mal Link anklicken!<br />
<br />
<i>Hello there<br />
It has been pretty quiet around here. The reason is, that I finally took the step. I have decided almost a year ago, that I am not able to create the page that I want with blogger. And in March I finally decided on a new name.<br />
Today is the day.<br />
I took the first step into the world wide web. From now on you will find new motivation and content on a jekyll powered website. But do not fear, Blogger tutorials are still part of the menu.<br />
So I hope some of you will follow me!<br />
</i><br />
<br />
<h1><a href="http://halfapx.com">halfapx.com</a></h1>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-58764738924132825812015-04-07T22:31:00.000+02:002015-10-26T15:13:31.260+01:00Schrumpfender Header bei Scroll ✤✤✤(✤)<p>Ich bin momentan am Designen einer Website, bei der wir einen spannenden Post-Header machen wollen. Herausgekommen ist beim Spielen folgendes und ich finde es ziemlich cool, weswegen ich dacht, dass ich gleich mal drüber schreiben könnte.</p>
<p data-height="472" data-theme-id="7132" data-slug-hash="NPVXdZ" data-default-tab="result" data-user="mynimi" class="codepen">See the Pen <a href="http://codepen.io/mynimi/pen/NPVXdZ/">Shrinking Sticky Header</a> by Myri (<a href="http://codepen.io/mynimi">@mynimi</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script>
<a name='more'></a>
<p>Wie ihr sehen könnt, machen wir hier einen Header, der beim Scrollen schrumpft und dann als <em>klassische</em> Navbar endet. Gemacht ist das Ganze relativ einfach.</p>
<h2 id="markup">Markup</h2>
<p>Das Markup ist ganz simpel. Wir haben Header und Wrapper. Im Wrapper platzieren wir all unseren Inhalt und im Header unsere Navigation, in der wir unsere Links einfügen.</p>
<p>Für den Effekt mit der Farbe fügen wir noch einen div-Container ein, dieser ist bloss für die Farbe zuständig. Schöner wäre es, wenn wir das mit der Farbe in einem pseudoelement machen könnten (so würde ich es bei einem hover tun), doch da die Pseudoelemente nicht Teil des DOM sind, können wir sie mit javascript nicht bearbeiten und müssen diesen Container einfügen.</p>
<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt"><header</span> <span class="na">class=</span><span class="s">"header"</span><span class="nt">></span>
<span class="nt"><nav></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Item 1<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Item 2<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Item 3<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Item 4<span class="nt"></a></span>
<span class="nt"></nav></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bg"</span><span class="nt">></div></span>
<span class="nt"></header></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"wrapper"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>
<span class="c"><!-- Inhalt --></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre>
</div>
<h2 id="styles">Styles</h2>
<p>Die Styles sind sehr simpel</p>
<div class="highlighter-rouge"><pre class="highlight"><code><span class="c">/* setze Hintergrungbild und fixiere oben */</span>
<span class="nc">.header</span> <span class="p">{</span>
<span class="nl">background-image</span><span class="p">:</span> <span class="sx">url("http://goo.gl/jZh3X5")</span><span class="p">;</span>
<span class="nl">background-size</span><span class="p">:</span> <span class="n">cover</span><span class="p">;</span>
<span class="nl">background-position</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">fixed</span><span class="p">;</span>
<span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Platziere oberhalb des Menüs und gebe line-height in der Höhe der Nav, sodass der Text vertikal zentriert wird */</span>
<span class="nc">.header</span> <span class="nt">nav</span> <span class="p">{</span>
<span class="nl">z-index</span><span class="p">:</span> <span class="m">10</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Link style */</span>
<span class="nc">.header</span> <span class="nt">nav</span> <span class="nt">a</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">10px</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">-webkit-transition</span><span class="p">:</span> <span class="m">.3s</span> <span class="n">all</span> <span class="n">ease</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="m">.3s</span> <span class="n">all</span> <span class="n">ease</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.header</span> <span class="nt">nav</span> <span class="nt">a</span><span class="nd">:first-of-type</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.header</span> <span class="nt">nav</span> <span class="nt">a</span><span class="nd">:last-of-type</span> <span class="p">{</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.header</span> <span class="nt">nav</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">.7</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Vergebe Hintergrundfarbe und lege über den ganzen Header drüber */</span>
<span class="nc">.header</span> <span class="nc">.bg</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="m">#2A2A1E</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
</div>
<h2 id="jquery">jQuery</h2>
<p>Und zum Schluss noch jQuery, hiermit machen wir alles, was den Effekt ausmacht.</p>
<div class="highlighter-rouge"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="s1">'use strict'</span><span class="p">;</span>
<span class="c1">// Variabeln</span>
<span class="kd">var</span> <span class="nx">windowHeight</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">height</span><span class="p">(),</span>
<span class="c1">// Einstellungen</span>
<span class="nx">colorBg</span> <span class="o">=</span> <span class="s1">'bg'</span><span class="p">,</span>
<span class="nx">headerClass</span> <span class="o">=</span> <span class="s1">'header'</span><span class="p">,</span>
<span class="nx">headerHeight</span> <span class="o">=</span> <span class="nx">windowHeight</span> <span class="o">*</span> <span class="mf">0.6</span><span class="p">,</span> <span class="c1">// = 60vh</span>
<span class="nx">navHeight</span> <span class="o">=</span> <span class="mi">40</span><span class="p">,</span> <span class="c1">// no px here</span>
<span class="c1">// Zeitsparer</span>
<span class="nx">body</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">),</span>
<span class="nx">background</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.'</span><span class="o">+</span><span class="nx">headerClass</span> <span class="o">+</span> <span class="s1">' '</span> <span class="o">+</span> <span class="s1">'.'</span><span class="o">+</span><span class="nx">colorBg</span><span class="p">),</span>
<span class="nx">header</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">headerClass</span><span class="p">);</span>
<span class="c1">// setze body höhe, damit man scrollen kann </span>
<span class="nx">body</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span>
<span class="s1">'min-height'</span><span class="p">:</span> <span class="nx">windowHeight</span> <span class="o">*</span> <span class="mi">3</span>
<span class="p">});</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">resize</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">// Vergebe Header Höhe und minimale Höhe, in Form von Navigations-Höhe</span>
<span class="nx">header</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span>
<span class="s1">'height'</span><span class="p">:</span> <span class="nx">headerHeight</span><span class="p">,</span>
<span class="s1">'min-height'</span><span class="p">:</span> <span class="nx">navHeight</span>
<span class="p">});</span>
<span class="c1">// Füge Header Höhe als Margin des Bodys ein, sodass der Header nicht überm Content hängt</span>
<span class="nx">body</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span>
<span class="s1">'margin-top'</span><span class="p">:</span> <span class="nx">headerHeight</span>
<span class="p">});</span>
<span class="c1">// Farbcontainer transparent machen</span>
<span class="nx">background</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span> <span class="s1">'opacity'</span><span class="p">:</span> <span class="mi">0</span> <span class="p">});</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scroll</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">scrollTop</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">(),</span>
<span class="c1">// limit, an dieser Position soll der Farbcontainer eine Deckkraft von 100% haben</span>
<span class="nx">limit</span> <span class="o">=</span> <span class="nx">headerHeight</span> <span class="o">-</span> <span class="nx">navHeight</span><span class="p">;</span>
<span class="c1">// entferne für jeden gescrollten Pixel einen Pixel der Header-Höhe, da min-height vorhanden ist, hält die Bewegung bei der Höher der Navigation an.</span>
<span class="nx">header</span><span class="p">.</span><span class="nx">height</span><span class="p">(</span><span class="nx">headerHeight</span> <span class="o">-</span> <span class="nx">scrollTop</span><span class="p">);</span>
<span class="c1">// erhöhe die Deckkraft des Farbcontainers, bis die Navbar deckend farbig ist</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">scrollTop</span> <span class="o"><=</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">background</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span> <span class="s1">'opacity'</span> <span class="p">:</span> <span class="p">(</span><span class="nx">scrollTop</span><span class="o">/</span><span class="nx">limit</span><span class="p">)</span> <span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}).</span><span class="nx">resize</span><span class="p">();</span>
<span class="p">});</span>
</code></pre>
</div>
<h2 id="verwendung">Verwendung</h2>
<p>Falls ihr verwenden wollt, habe ich ganz viele Variablen erstellt, falls ihr Klassen ändern wollt und versucht den Code zu kommentieren.</p><br/>
Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-35057057908195313812015-03-24T22:40:00.001+01:002015-10-26T15:13:31.252+01:00Postübersicht mit Bildern (automatisch) ✤✤✤ <p>Postübersichten sind etwas, worüber sich viele Blogger immer wieder Gedanken machen. Ich denke der Hauptgrund dafür ist, dass man durch sie eine einfache Übersicht darüber geben kann, was man schon getan hat, was auf dem Blog an Inhalt überhaupt vorhanden ist, ohne dass der User sich durch die ganzen Posts durchscrollen muss.</p><p>Postet man zum Beispiel Rezepte, ist eine Rezeptübersicht wirklich wahnsinnig schnell gemacht.</p><p>Viele Leute die ich kenne, machen diese Postübersichten manuell. Ich selbst habe bis vor Kurzen meine Tutorialübersicht auch manuell gemacht, darum war die Liste komplett unvollständig und ein paar Tote Links hatten sich darin auch noch versteckt. Doch dann kam <a href="http://www.5202.de/2014/08/postlisten-mit-ajax-erzeugen.html">Oliver’s Post hier</a> und ich beschloss das mit der automatisierten Liste umzusetzen. Und seitdem habe ich es an keinem Tag bereut</p><p>Eine Frage im <a href="https://plus.google.com/u/0/communities/110908772045475990831">Blogger-Hilfeforum</a> (übrigens solltet ihr alle dort dabei sein, wenn ihr euch mit Blogger beschäftigt, wir helfen gerne bei jedem Problem :D (Frage <a href="https://plus.google.com/u/0/+BEAUTYK%C3%9CMA/posts/dpYrWTxRo3A">hier</a>)) hat mich dann heute angeregt, dieses Tutorial zu schreiben.</p><p><strong>Notiz</strong> Das hier ist bloss ein Praxis-Beispiel, Credit für die Ajax-Liste gilt <a href="https://plus.google.com/u/0/+BEAUTYK%C3%9CMA/posts/dpYrWTxRo3A">Herrn Doetsch</a>.</p><a name='more'></a> <p>Ich gehe davon aus, dass ihr Oliver’s Post gelesen habt. Es muss nichts auf eurer Seite laufen, einfach mal durchlesen, damit ihr eine Idee davon habt, wie es funktioniert.</p><h2 id="vorbereitung">Vorbereitung</h2><p>Als erstes solltet ihr eine Seite vorbereiten und natürlich Labels vergeben. Bei den Labels spielt Gross- und Klein-Schreibung eine Rolle, also am besten klein schreiben.</p><p>Wenn ihr euer Label habt, erstellt ihr eine neue Seite. Für den Ihalt, erstellen wir einen Container, den wir dann mit den Posts füllen werden.</p><p>Für den Container vergebt ihr eine ID.</p><p>Also die HTML-Ansicht des Posts öffnen und einfach den container mit ID rein. Diese ID solltet ihr euch merken.</p><p>Seid am besten spezifisch mit der ID, falls ihr mehrere Übersichtsseiten oder mehrere Container auf einer Seite haben wollt, wenn ihr zum Beispiel all eure Rezepte noch nach Vorspeise, Hauptspeise und Nachspeise sortieren wollt.</p><p>Für die CSS, geb ich immer gerne eine Klasse, falls ihr den Container an mehrern Orten verwenden wollt, und nicht jedes Mal die ID wiederholen wollt. Macht eine Klasse, damit ihr alle auf’s Mal stylen könnt.</p><div class="highlighter-rouge"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">id=</span><span class="s">"wrapper-ID"</span> <span class="na">class=</span><span class="s">"bu-wrapper"</span><span class="nt">></div></span>
</code></pre></div><h2 id="element-vorbereitung">Element Vorbereitung</h2><p>Im Ajax-Befehl geben wir das Element an, welches wir reinladen wollen. Auf einer einfachen Postliste, wäre das der Titel, da ich in diesem Beispiel aber eine <em>fancy</em> ÜBersicht mit Bild machen möchte, müssen wir dieses Element erstellen. Und zwar für jeden Post.</p><p>Das machen wir als erstes.</p><p><em>Ich mache dieses Beispiel in der Simple Vorlage, aber es sollte theoretisch in jeder Blogger-Vorlage funktionieren</em></p><h3 id="code">Code</h3><p>Okay, grundsätzlich möchte ich, dass meine Post-Übersichten wie folgt aussehen:</p><p>Ich will zuerst das erste Bild des Posts und dann drunter den Titel. Beides soll auf den Post linken.</p><p>Wenn der Post kein Bild hat, wird in diesem Fall einfach kein Bild angezeigt. Ihr könnt auch ein Fallback definieren, falls ihr das wollt, einfach Bescheid geben und ich füge das noch ein. Aber ich gehe davon aus, dass man grundsätzlich Bilder verwendet, wenn man eine Bilderübersicht haben will.</p><p>Am Ende soll es in etwa so aussehen:</p><p data-height="510" data-theme-id="7132" data-slug-hash="yyZXpO" data-default-tab="result" data-user="mynimi" class="codepen">See the Pen <a href="http://codepen.io/mynimi/pen/yyZXpO/">yyZXpO</a> by Myri (<a href="http://codepen.io/mynimi">@mynimi</a>) on <a href="http://codepen.io">CodePen</a>.</p><script async="" src="//assets.codepen.io/assets/embed/ei.js"></script> <p>Das hier ist natürlich nicht wirklich gestyled, einfach der Grundaufbau ist gemacht.</p><p>Codemässig wollen wir also vom Aufbau her Folgendes (um die CSS kümmern wir uns später)</p><div class="highlighter-rouge"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"entry"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"POSTLINK"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"FIRSTIMG"</span><span class="nt">/></span>
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>POSTTITLE<span class="nt"></h4></span>
<span class="nt"></a></span>
<span class="nt"></div></span>
</code></pre></div><p>Das müssen wir nun in den Post einbauen.</p><h3 id="einbau">Einbau</h3><p>Öffnet den Code des Blogs und sucht nach:</p><div class="highlighter-rouge"><pre class="highlight"><code><span class="nt"><b:includable</span> <span class="na">id=</span><span class="s">'post'</span> <span class="na">var=</span><span class="s">'post'</span><span class="nt">></span>
<span class="c"><!-- jede Menge Code für das include --></span>
<span class="c"><!-- hier kommt der Code rein --></span>
<span class="nt"></b:includable></span>
<span class="nt"><b:includable</span> <span class="na">id=</span><span class="s">'postQuickEdit'</span> <span class="na">var=</span><span class="s">'post'</span><span class="nt">></span>
</code></pre></div><p>Also ihr sucht nach dem post includable und platziert es ganz am Ende davon, dort bevor das includeable endet.</p><p>Der Code, den ihr dann einfügt ist folgender:</p><div class="highlighter-rouge"><pre class="highlight"><code><span class="c"><!-- Blogübersicht Entry --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">'entry'</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">expr:href=</span><span class="s">'data:post.url'</span><span class="nt">></span>
<span class="nt"><b:if</span> <span class="na">cond=</span><span class="s">'data:post.firstImageUrl'</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">expr:src=</span><span class="s">'data:post.firstImageUrl'</span><span class="nt">/></span>
<span class="nt"></b:if></span>
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">'title'</span><span class="nt">><data:post.title/></h4></span>
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="c"><!-- Blogübersicht Entry Ende --></span>
</code></pre></div><p>Wenn ihr das habt, könnt ihr die CSS einfügen.</p><h2 id="css">CSS</h2><p>Hier müssen wir als erstes, das Entry ausblenden, wenn wir es nicht im container laden.<br />
Also machen wir ein allgemeines <code class="highlighter-rouge">display: none</code> für den entry und im container drin, dann <code class="highlighter-rouge">display: block</code>.</p><p>für die CSS sucht ihr nach: <code class="highlighter-rouge">]]></b:skin></code> und fügt folgende CSS direkt oben <em>drüber</em> ein.</p><p>Natürlich könnt ihr hier stylen, wie ihr wollt, aber wenn ihr euch für die Ansicht entscheidet, die ich im Codepen verlinkt habe, generiert ihr euch am besten eure persönliche CSS.</p><p>Wie viele Posts pro Zeile angezeigt werden sollen, sowie die Margin könnt ihr in den Variabeln definieren. Die Media queries müsst ihr wahrscheinlich auch anpassen.</p><p>Und dann klickt ihr oben im Codepen neben CSS auf das Aug-Symbol und kopiert die CSS.</p><p>Aber davor noch die Ausblende-Einblende-CSS.</p><div class="highlighter-rouge"><pre class="highlight"><code><span class="c">/* Entry allgemein ausblenden */</span>
<span class="nc">.entry</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Entry innerhalb des Blogübersicht Containers wieder einblenden */</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Mit dem CodePen generiert */</span>
<span class="nc">.bu-wrapper</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">-webkit-box</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">-webkit-flex</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">-ms-flexbox</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">-webkit-box-orient</span><span class="p">:</span> <span class="n">horizontal</span><span class="p">;</span>
<span class="nl">-webkit-box-direction</span><span class="p">:</span> <span class="nb">normal</span><span class="p">;</span>
<span class="nl">-webkit-flex-direction</span><span class="p">:</span> <span class="n">row</span><span class="p">;</span>
<span class="nl">-ms-flex-direction</span><span class="p">:</span> <span class="n">row</span><span class="p">;</span>
<span class="nl">flex-direction</span><span class="p">:</span> <span class="n">row</span><span class="p">;</span>
<span class="nl">-webkit-flex-wrap</span><span class="p">:</span> <span class="n">wrap</span><span class="p">;</span>
<span class="nl">-ms-flex-wrap</span><span class="p">:</span> <span class="n">wrap</span><span class="p">;</span>
<span class="nl">flex-wrap</span><span class="p">:</span> <span class="n">wrap</span><span class="p">;</span>
<span class="nl">-webkit-box-pack</span><span class="p">:</span> <span class="n">start</span><span class="p">;</span>
<span class="nl">-webkit-justify-content</span><span class="p">:</span> <span class="n">flex-start</span><span class="p">;</span>
<span class="nl">-ms-flex-pack</span><span class="p">:</span> <span class="n">start</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="n">flex-start</span><span class="p">;</span>
<span class="nl">-webkit-box-align</span><span class="p">:</span> <span class="n">stretch</span><span class="p">;</span>
<span class="nl">-webkit-align-items</span><span class="p">:</span> <span class="n">stretch</span><span class="p">;</span>
<span class="nl">-ms-flex-align</span><span class="p">:</span> <span class="n">stretch</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="n">stretch</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="n">calc</span><span class="p">((</span><span class="m">100%</span> <span class="n">-</span> <span class="p">(</span><span class="m">5</span> <span class="n">-</span> <span class="m">1</span><span class="p">)</span> <span class="err">*</span> <span class="m">10px</span><span class="p">)</span> <span class="p">/</span> <span class="m">5</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span><span class="nd">:nth-of-type</span><span class="o">(</span><span class="nt">n</span><span class="o">)</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span><span class="nd">:nth-of-type</span><span class="o">(</span><span class="nt">5n</span><span class="o">)</span> <span class="p">{</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span> <span class="nt">img</span> <span class="p">{</span>
<span class="nl">max-width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Wollt ihr's nicht responsive, dann entfernt alle media queries */</span>
<span class="k">@media</span> <span class="n">screen</span> <span class="n">and</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">1450px</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="n">calc</span><span class="p">((</span><span class="m">100%</span> <span class="n">-</span> <span class="p">(</span><span class="m">4</span> <span class="n">-</span> <span class="m">1</span><span class="p">)</span> <span class="err">*</span> <span class="m">10px</span><span class="p">)</span> <span class="p">/</span> <span class="m">4</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span><span class="nd">:nth-of-type</span><span class="o">(</span><span class="nt">n</span><span class="o">)</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span><span class="nd">:nth-of-type</span><span class="o">(</span><span class="nt">4n</span><span class="o">)</span> <span class="p">{</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@media</span> <span class="n">screen</span> <span class="n">and</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">1030px</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="n">calc</span><span class="p">((</span><span class="m">100%</span> <span class="n">-</span> <span class="p">(</span><span class="m">3</span> <span class="n">-</span> <span class="m">1</span><span class="p">)</span> <span class="err">*</span> <span class="m">10px</span><span class="p">)</span> <span class="p">/</span> <span class="m">3</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span><span class="nd">:nth-of-type</span><span class="o">(</span><span class="nt">n</span><span class="o">)</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span><span class="nd">:nth-of-type</span><span class="o">(</span><span class="nt">3n</span><span class="o">)</span> <span class="p">{</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@media</span> <span class="n">screen</span> <span class="n">and</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">720px</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="n">calc</span><span class="p">((</span><span class="m">100%</span> <span class="n">-</span> <span class="p">(</span><span class="m">2</span> <span class="n">-</span> <span class="m">1</span><span class="p">)</span> <span class="err">*</span> <span class="m">10px</span><span class="p">)</span> <span class="p">/</span> <span class="m">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span><span class="nd">:nth-of-type</span><span class="o">(</span><span class="nt">n</span><span class="o">)</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span><span class="nd">:nth-of-type</span><span class="o">(</span><span class="nt">2n</span><span class="o">)</span> <span class="p">{</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@media</span> <span class="n">screen</span> <span class="n">and</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">520px</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.bu-wrapper</span> <span class="nc">.entry</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div><p>Und dann seit ihr ready für Ajax.</p><h2 id="ajax-code">Ajax Code</h2><p>Hier ist grundsätzlich das was Oliver schon erklärt hat.</p><p>Wenn ihr jQuery schon einmal integriert hat, dann müsst ihr’s nicht noch einmal tun, aber ich verlinke es hier der Vollständigkeit halber.</p><p>Ihr braucht hier eure Wrapper-ID und euer Label, sowie die URL der Page. Beachtet, dass ihr hier die Blog-Adresse mit .com eingebt, und nicht die längerspezifische URL. Sonst funktioniert es in anderen Ländern nicht.</p><p>Und dann sucht ihr im Code <code class="highlighter-rouge"></body></code></p><p>Und <em>darüber</em> fügt ihr folgendes ein.</p><div class="highlighter-rouge"><pre class="highlight"><code><span class="c"><!-- jQuery --></span>
<span class="nt"><script</span> <span class="na">src=</span><span class="s">'//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'</span><span class="nt">/></span>
<span class="c"><!-- Blogübersicht Script --></span>
<span class="nt"><b:if</span> <span class="na">cond=</span><span class="s">'data:blog.url == &quot;PAGEURL&quot;'</span><span class="nt">></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">'text/javascript'</span><span class="nt">></span>
//<span class="cp"><![CDATA[
$(document).ready(function() {
$("#wrapper-id").load("/search/label/LABELNAME?max-results=100 .entry");
return !1;
});
//]]></span>
<span class="nt"></script></span>
<span class="nt"></b:if></span>
<span class="c"><!-- Blogübersicht Script Ende --></span>
</code></pre></div><p>UNd dann speichert ihr und eure Blogübersicht sollte nun auf der Page sichtbar sein.</p><p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MXUV3VrYzj2hxZnKGulSGlyWpC99TKGwXaPZqL1vGdNgP6QG8jGIPaBXFYPKtZWQsTLQyAzoyATzWKxx9w7oV8T2Dieup4cmBsaYEPfnjlfOwIxDRx3ORUoFbY8hM7f79uWrWkaA_e__/s1600/view.png" alt="view" /></p>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-21284096172264556312015-01-17T22:17:00.000+01:002015-10-26T15:13:44.423+01:00Blogger Template Prototyping (1/2): HTML Workflow ✤✤✤✤(✤)Als ich mit dem Schreiben von Blogger Templates angefangen habe, habe ich das alles hauptsächlich im Blogger Editor selbst gemacht. Das einzige wofür ich HTML und meinen Editor auf dem Computer benutzte, waren meine "Skizzen", die im Grunde eigentlich Box-Modelle waren.<br />
Seit diesen Anfängen habe ich nun schon so viele Templates geschrieben, dass ich ziemlich schnell feststellte, wie ungünstig das war. Ich begann damit Prototypen in HTML und CSS zu schreiben, die schon etwas mehr Style hatten.<br />
Mittlerweile bin ich so weit, dass ich nicht einmal mehr die schlussendliche Funktionalität im Blogger Editor schreibe, sondern nur noch teste, ob das auch wirklich so ausschaut, wie ich mir das vorstelle.<br />
In diesem Tutorial soll es darum gehen, wie man am besten einen Prototypen für ein responsives Blogger Template schreibt. Diese Vorgehensweise kann genauso gut auf andere Seiten angewendet werden. So mache ich es, wenn ich WordPress Themes schreibe, genauso.<br />
<br />
<b>Dies ist der erste Teil meiner Prototypen-Serie. Diese Methode verwende ich für einfache Templates, bei komplexeren, verwende ich Methode zwei, die so bald wie möglich folgt.</b><br />
<br />
<i>When I first started writing blogger templates I wrote most of it in the Blogger Editor itself. The only time I took out my editor and wrote pure HTML was when I wrote my "Sketches" which were basically models of my overall look.<br />
Since those beginnings I wrote a lot of templates and found out pretty fast how flawed this whole workflow was. I started writing prototypes that had most of the basic styling already in it.<br />
Now I am at a point where I write everything in my editor. A prototype that basically already looks like the end result and the blogger template with all the functionality, that only lands in the Blogger Editor to be tested if everything works out.<br />
In this tutorial I want to go over writing a prototype which which our stylesheet and markup will be done. This workflow can also be used for other CMS' as well. That's how I do it if I write a WordPress Theme as well.<br />
<br />
<b>This is the first part of my prototyping series. I use this method for simple templates, when working on more complex templates, I will be using method two, which will follow as soon as possible.</b></i><br />
<br />
<a name='more'></a><br />
<input type="radio" name="lang" id="english"><label for="english" class="buttonbg">English <i class="fa fa-angle-down"></i></label><input type="radio" name="lang" id="german" checked><label for="german" class="buttonbg">Deutsch <i class="fa fa-angle-down"></i></label><br />
<br />
<div class="german"><h2>Endprodukt</h2>Ich werde nicht gross auf den Code eingehen, aber ich habe diesess Tutorial geschrieben, während ich am aktuellen KreaTief Template arbeitete. Tangible hat einen Prototypen erhalten, den ihr euch <a href="http://bekreatief.github.io/blogger_prototype/" target_blank="">hier</a> ansehen könnt. Und ihr könnt euch auch den <a href="https://github.com/bekreatief/blogger_prototype/tree/tutorial" target="_blank">Code</a> und die einzelnen <a href="https://github.com/bekreatief/blogger_prototype/commits/tutorial" target="_blank">Schritte</a> ansehen.<br />
<br />
<h2>Arbeitsumgebung</h2>Als erstes brauchen wir eine Arbeitsumgebung. Ihr erstellt also am besten einen Ordner und erstellt darin eure Files.<br />
<br />
<h3>Programme</h3>Was Programme angeht kommt ihr sicher um einen Editor nicht herum. Wer schon mal Posts von mir gelesen hat wird wissen, dass ich <a href="http://brackets.io/" target="_blank">Brackets</a> benutze. Kostenlos und absolut grandios!<br />
Ich werde im fertigen Template meine Scripte und das Stylesheet auf GitHub hosten und diese hätte ich dann gerne möglichst klein. Ausserdem schreibe ich die Styles in Sass, also werde ich auch noch einen Compiler verwenden. Hier fällt meine Wahl auf <a href="https://prepros.io/" target="_blank">Prepros</a>, weil es mir das Terminal erspart und super schnell geht. Mittlerweile ist das Programm nicht mehr kostenlos (unlimitierte Zeit zu testen, allerdings). Ich bin ehrlich, ich mag es nicht wenn ich für Dinge zahlen muss, die ich auch kostenlos haben könnte, aber Prepros ist neben MS Office wahrscheinlich meine beste Programm-Investition. Ich benutze es tagtäglich und mag es jeden Tag mehr. [Und Werbung Ende]<br />
Und dann braucht ihr natürlich noch einen Browser, aber das sollte klar sein, am besten mehrere und mindestens ein Smartphone und/oder Tablet. (Prepros ist auch da sehr hilfreich mit dem Testen).<br />
<br />
<b>Tipp:</b> Vor einer Weile hat Oliver mich auf <a href="http://emmet.io/" target="_blank">Emmet</a> aufmerksam gemacht und seither schreibe ich fast nur noch mit Emmet. Für Brackets und viele andere Editoren gibt es schön eine Möglichkeit es zu installieren, seht es euch an! <br />
<br />
<h3>Ordnerstruktur</h3>Okay, kommen wir zu den Dateien die ihr braucht.<br />
Falls ihr ein eher simples Template habt, das auf statischen sowie Postseiten nicht gross anders aussieht als auf der Homepage, braucht ihr nur eine einzige HTML-Datei, wollt ihr das Ganze etwas "ausgefallener" haben, dann macht ihr am besten drei. Für diesen Fall würde ich dann allerdings womöglich schon Jekyll in Betracht ziehen. Dazu aber später mehr.<br />
Neben den HTML-Dateien braucht ihr alles an externem Zeug was ihr brauchen wollt. Für mich heisst das meist jQuery und FontAwesome.<br />
Und dann natürlich mein absoluter Favorit, der Sass Order. Meine Struktur ist sehr simpel. Grundsätzlich habe ich hier mein Toolkit, das ich von einem Projekt ins nächste mitnehme und dann baue ich basierend auf dem Projekt den Rest auf. Und wenn ihr in eurem Blog Bilder verwendet, solltet ihr auch einen Ordner dafür anlegen, schliesslich wollen wir mit richtigen Bildern und Text prototypisieren.<br />
Die Dateien die ich also für gewöhnlich anlege, sind wie folgt: (Ordner in KAPITÄLCHEN, Dateien nicht).</div><div class="english"><h2>What we will be talking about</h2>I won't really talk about the code, but I was writing this post while working on the prototype for my current KreaTief template. Tangible got a prototype which you can see <a href="http://bekreatief.github.io/blogger_prototype/" target="_blank">here</a>. And you can also check out the <a href="https://github.com/bekreatief/blogger_prototype/tree/tutorial" target="_blank">Code</a> and the <a href="https://github.com/bekreatief/blogger_prototype/commits/tutorial" target="_blank">steps</a> it took to get there.<br />
<br />
<h2>Working environment</h2>First you need a place to work at. So create a new folder and create your structure in there.<br />
<br />
<h3>Programs</h3>When it comes to programs of course you will need an editor. If you have read a few of my posts, you'll most probably know that I religiously use <a href="http://brackets.io/" target="_blank">Brackets</a>. It's free and absolutely fantastic!<br />
I am going to be hosting the finished stylesheet and scripts on github, so I would like to have those files as small as possible. Also I do like to write my styles in Sass. So I will use a preprocessor as well. Here my choice falls on <a href="https://prepros.io/" target="_blank">Prepros</a>, because it saves me from using the terminal and is super fast. For a while it is no longer free (there is an unlimitied trial, though). I'm honest, I do not like paying stuff where there are free programs that <i>almost</i> do an equally good job, but Prepros is next to MS Office probably my best Program-investment. I use if daily and like it more every day. [And comercial end]<br />
And then you'll need a browser of course, or multiples, if you can. And a smartphone or tablet to test it on mobile. Prepros comes also with this awesome functionality that lets you test local sites on mobile, as soon as you are within the same network.<br />
<br />
<b>Tipp:</b> A while ago Oliver introduced me to <a href="http://emmet.io/" target="_blank">Emmet</a> and since then I write almost all my html with it. For Brackets and a few other editors there's an extension to use. Check it out!<br />
<br />
<h3>File Structure</h3>Okay, let's talk about files.<br />
If you are working on a simple template, you won't need multiple html-files to create each and every look of the site. (if you have a more complex site, wait for part 2). Other than that take all of the external resources you need and my absolute favourite, the sass file. My structure is very simple. Basically I travel with a toolkit, and then I just go from there. And if you are using images, have those ready as well.<br />
Okay, to start tangible my folder looked like this (directories in CAPS, files not).</div><br />
<pre><code class="language-markup">
|root
|--SASS/
|--|--ASSETS/
|--|--|--_prism.scss
|--|--|--_font-awesome.scss
|--|--|--[ + all font-awesome partial files ]
|--|--MODULES/
|--|--|--_all.sass
|--|--|--_colors.sass
|--|--|--_functions.sass
|--|--|--_mixins.sass
|--|--|--_typography.scss
|
|--|--PARTIALS/
|--|--|--COMPONENTS
|--|--|--LAYOUT
|--|--|--_base.sass
|--|--|--_general.scss
|
|--|--_reset.scss
|--|--_temporary.scss
|--|--main.sass
|
|--IMG/
|--|--1.jpg
|--|--2.jpg
|--|--3.jpg
|--|--4.jpg
|--|--5.jpg
|
|--JS/
|--|--jquery-2.1.1.min.js
|--|--prism.js
|--|--scripts.js
|
|--FONTS/
|--|--[ + font-awesome Fonts ]
|--|--[ + Roboto Fonts ]
|
|--index.html
</code></pre><br />
<div class="german">Wie ihr sehen könnt schreibe ich meine Hauptstyles in der "neuen" Syntax von Sass, die eingerückte Syntax verwende ich allerdings weiterhin für files die vorwiegend Variabellisten sind, aus imports bestehen oder Mixins und Funktionen sind. Aus dem einfachen Grund, dass sie viel schneller geschrieben sind. Bei grösseren komplexen Files kann man schnell den Überblick verlieren, aber bei so kurzen Zeilen bin ich ganz eindeutig ein Fan der Ursprungssyntax. Aber ihr macht da natürlich was ihr wollt.<br />
Etwas mehr über Sass habe ich schon in meinem Tutorial mit meinem neuen Template Workflow erklärt, ich gehe jetzt einfach mal davon aus, dass ihr Sass schreiben könnt.<br />
Dann noch die ganzen anderen Sachen, von denen ich vorhin schon gesprochen habe.<br />
<br />
<h2>Markup</h2>Kommen wir zum Markup.<br />
Wie immer basiert mein Template auf five. Oliver hat grundsätzlich kein grosses Markup vorgegeben, es ist ein Header drin und die Artikel sind im HTML-Element article.<br />
Ihr könnt euch schon daran orientieren, oder ihr schreibt den Prototypen einfach so wie ihr ihn haben wollt und kümmert euch nachher darum, dass das alles richtig ausschaut.<br />
So mach ich das für gewöhnlich.<br />
Was sich aber definitv lohnt sind Klassen zu übernehmen, die von Blogger vorgegeben sind. So sind die index-seiten mit einer body-Klasse <code class="language-css">.index</code> versehen. Die Post-seiten haben die Klasse <code class="language-css">.item</code> und statische Seiten die Klasse <code class="language-css">.static_page</code>. Und dann schreibt ihr einfach drauflos. Ob ihr für jeden Seitentyp einen Prototypen schreiben wollt, bleibt nachtürlich euch überlassen. Bei komplexen Templates, die unterschiedlich aussehen auf den Subseiten, tu ich das für gewöhnlich, aber bei Tangible, habe ich das nicht gemacht, sondern einfach nur einen index-prototypen.<br />
Ich versuche möglichst nach jedem grösseren Schritt einen commit zu machen, sodass der ganze Prozess über Git einfach nachvollziehbar ist, darum gehe ich jetzt nicht allzu sehr ins Detail. Aber ihr könnt die ganzen rein prototypen-Schritte <a href="https://github.com/bekreatief/blogger_prototype/commits/tutorial" target="_blank">hier</a> nachvollziehen.<br />
Ich habe mein Markup geschrieben, wie ich es mir vorstelle und mir dann mit Prepros die Live-Preview angesehen.<br />
Dann habe ich damit begonnen Sass zu schreiben.<br />
<br />
<h2>Styling</h2>Der Prozess des Stylens macht mit Prepros sehr viel Spass. Die Livepreview wird nahezu zeitgleich mit dem Speichern der Sass-dateien aktualisiert. Wenn ihr mit zwei Monitoren arbeitet oder die beiden Fenster nebeneinader habt, könnt ihr also eure Änderungen praktisch umgehend sehen.<br />
Noch dazu regelt Prepros die Prefixe für euch, ihr müsst nur Autoprefixer aktivieren, also macht CSS schreiben einfach nur total viel Spass und geht sehr schnell. Sass wird euch seeeeehr viel Zeit sparen.<br />
Für alle, die meine Prepros-Einstellunge interessieren, habe ich das Prepros-File integriert. Wenn ihr euch den Prototypen runterladed, könnt ihr die Einstellungen sehen.<br />
<br />
<h2>Scripts</h2>Was scripte angeht, habe ich jQuery integriert, prism (was ich für syntax-hightlighting brauche, also grundsätzlich nicht teil des Prototypen) und skrollr. Skrollr habe ich schon einmal vorgestellt (<a href="http://bekreatief.blogspot.ch/2014/07/simple-parallax-effect.html">hier</a>), ich habe es hier für den Header Effekt verwendet. Und dann habe ich mein ganzes anderes Scripting in ein züsatzliches file gesteckt. Am Ende lass ich Prepros alles in ein File stecken, minifizieren und lade dass dann im Template.<br />
<br />
<h2>Vorgehen</h2>Okay, zum Vorgehen, bei einem erfolgreichen Prototypen. Das Ziel ist es grundsätzlich alles nur noch übertragen zu müssen. Wie ihr sehen könnt, war das bei mir nicht der Fall, weil der Header in Blogger streiken wollte, obwohl er im Prototypen genau so funktioniert, wie ich ihn haben will, aber ansonsten habe ich versucht schon an Dinge zu denken. Ein Beispiel ist das Preview-Bild für jeden Post.<br />
Ich habe dort daran gedacht, dass ich das Bild nicht als Hintergrundbild setzen kann und mich darum schon um das Script gekümmert, dass das für mich übernimmt. Denkt an Details und wenn ihr alten Code in eurem Template drin habt, den ihr unbedingt braucht, dann vergesst nicht, den zu übernehmen.<br />
Und dann steht dem Prototypen eigentlich nichts mehr im Weg.<br />
<br />
<h2>Das war Workflow 1, was erwartet und bei 2?</h2>Das ist die Methode, die ich für ganz simple Prototypen verwende, aber wenn ich komplexere Prototypen schreibe, die zwar Gemeinsamkeiten haben, wie zum Beispiel ein Header aber andere Inhalte, dann verwende ich jekll um die Seite zu schreiben und lasse Grunt anstelle Prepros arbeiten. Grunt und Jekyll sind etwas anspruchsvoller und erfordern die Benutzung eines Terminals, aber am Ende ist es doch extrem zeitsparend. Trotzdem war es bei Tangible keine Option, weil ich nur eine Seite geschrieben habe.</div><div class="english">As you can see I do write SCSS for the most part of my stylesheets. I do this use the indented syntax for the files that are mostly variables or imports, mixins or functions. The simple reason behind is that I need less typing for those, but SCSS is a little bit easier to overview. BUt you do what you want.<br />
I have talked a little more about Sass in previous tutorials, so this time I just assume you know how to write it.<br />
<br />
<h2>Markup</h2>Okay, let's talk markup.<br />
As always my template is based on five. So I am loosely orienting myself on that but there is not a lot of markup there. So I just care to take the class-names etc.<br />
For tangible, and every other prototype I will start by writing my markup, then open the live preview in one of my screens, the code in the other screen (sooo good, if you have two of them!) and then I just start writing up my Sass.<br />
<br />
<h2>Styling</h2>The process of writing Sass is a lot of fun with Prepros because livepreview almost instantly refreshes.<br />
I do also use Autoprefixer, so I don't bother about browser stuff and just have the fun.<br />
For all of you that care about my prepros settings, I did include the file in the git repo.<br />
<br />
<h2>Scripts</h2>For scripts I used jQuery, prism for my syntax highlighting ( so basically not part of the prototype) and skrollr. I have already talked about skrollr before (<a href="http://bekreatief.blogspot.ch/2014/07/simple-parallax-effect.html">here</a>), and did use it on the Header. then I did all of my scripting in a seperate file and concateneted all of these files into one, minified file that I can put into the site.<br />
<br />
<h2>Process</h2>What makes a successful prototype? Basically the aim is to not have to change a lot after you copied the markup and added the scripts and stylesheet. As you can see this did unluckily not completely work with tangible, because the Header refused to work as planned in Blogger, but otherwise try to think about things that might be harder to achieve in Blogger. For example the preview image. In blogger there is no possibility to set the first image URL as a background image, so I wrote a script for it, which I tested in the prototype already.<br />
Think about Details and if you have some important things (CSS, Links etc in your old template) make sure to take them with you.<br />
<br />
<h2>That was Workflow 1, what's to come in part 2?</h2>That's the method I use for simple prototypes. But for more complex sites I will use jekyll and Grunt to generate my site, handle Sass and liveprevies. Grunt and jekyll are a little bit harder to set up and do need some work within the terminal but nothing too bad and in the end it will save you quite a lot of time. Still it was no option for tangible, because I only needed this one look.</div>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-43352868581137207792015-01-07T10:52:00.000+01:002015-10-26T15:13:50.622+01:00Responsive 1-Level Menu ✤✤(✤)Ein super einfaches responives 1-level Menu, mit Flexbox und gaaanz wenig JS.<br />
<br />
<i>A super simple 1-level menu with flexbox and just a teeny tiny bit of JS.</i><br />
<br />
<p data-height="266" data-theme-id="7132" data-slug-hash="dPNyMz" data-default-tab="result" data-user="bekreatief" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/dPNyMz/'>responsive 1-Level Menu</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script><br />
<br />
<a name='more'></a><br />
<input type="radio" name="lang" id="english"><label for="english" class="buttonbg">English <i class="fa fa-angle-down"></i></label><input type="radio" name="lang" id="german" checked><label for="german" class="buttonbg">Deutsch <i class="fa fa-angle-down"></i></label><br />
<br />
<div class="german">Um die responsive Version zu sehen, schiebt euer Browserfenster zusammen oder verändert die Variable <code class="language-scss">$menu_collapse</code> in einem Wert der grösser ist als eure Browserbreite.</div><div class="english">To see the responsive version, just resize your browser window or change the variable <code class="language-scss">1menu_collapse</code> into something bigger than your screen resolution.</div><h2>Markup</h2><div class="german">Das markup ist simpel. Einfach eine Navigation der Links platziert werden. Für den responsiven Teil brauchen wir noch Triggerliks zum schliessen und öffnen der Navigation. Wir platzieren zwei davon. Einen innerhalb des Menüs und einen ausserhalb. Diese versehen wir dann mit icons. Ich verwende dafür Font Awesome.</div><div class="english">The markup is simple. Just a nav in which we place some links. Also we need some triggering for the responsive part, so I did add two toggles. One within the nav and one outsiet of it. And then I just used some icons for it. I used Font Awesome for that.</div><br />
<br />
<pre><code class="language-markup">
<a href='#menu' class="toggle_link">
<i class="fa fa-navicon"></i> Menu
</a>
<nav class="main_menu" id="menu">
<a href='#menu' class="toggle_link">
<i class="fa fa-close"></i>
</a>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
</nav>
</code></pre><br />
<h2>JS</h2><div class="german">Was Javascript angeht schreiben wir etwas jquery, das unserem menu die Klasse active gibt, wenn wir den toggle-link klicken. Stellt aber sicher, dass ihr jQuery in eurer Seite integriert habt.</div><div class="english">For the javascript we just write a little jQuery to give our menu the class active once the toggle link is clicked. Make sure to integrate jQuery for this.</div><br />
<pre><code class="language-javascript">
$(document).ready(function () {
$(".toggle_link").click(function () {
$("#menu").toggleClass("active");
});
});
</code></pre><br />
<br />
<h2>Sass</h2><div class="german">Für die Styles verwenden wir flexbox. So müssen wir bloss die eine zeile ändern und unsere Menupunkte sind untereinander. Das Menu verstecken wir mit einer transform. Wenn das dann active ist, transformieren wir das Menu erneut, indem wir es in den content "reinschlittern" lassen.</div><div class="english">For the styles we use flexbox, so we only have to change one line and the menu items are underneath each other. in responsive mode we hide the menu with a transform. And once the active class is triggered, it will slide back in.</div><br />
<br />
<pre><code class="language-scss">
$menu_collapse: 500px;
.main_menu{
display: flex;
flex-wrap: wrap;
align-items: center;
@media screen and (min-width: $menu_collapse){
flex-direction: row;
justify-content: space-between;
max-width: 800px;
.toggle_link{
display: none;
}
}
@media screen and (max-width: $menu_collapse){
flex-direction: column;
justify-content: flex-start;
background: darken(white, 10%);
z-index: 100;
width: 320px;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
transition: .3s all linear;
box-sizing: border-box;
padding: 10px;
transform: translateX(-320px);
&.active{
transform: translateX(0px);
}
.toggle_link{
align-self: flex-end;
}
}
}
.toggle_link{
@media screen and (min-width: $menu_collapse){
display: none;
}
}
</code></pre><br />
<br />
<h2>CSS</h2><div class="german">Die entstandene CSS sieht dann wie folgt aus:</div><div class="english">The compiled CSS will look as follows:</div><br />
<br />
<pre><code class="language-css">
.main_menu {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 500px) {
.main_menu {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 800px;
}
.main_menu .toggle_link {
display: none;
}
}
@media screen and (max-width: 500px) {
.main_menu {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
background: #e6e6e6;
z-index: 100;
width: 320px;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
-webkit-transition: .3s all linear;
transition: .3s all linear;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
-webkit-transform: translateX(-320px);
-ms-transform: translateX(-320px);
transform: translateX(-320px);
}
.main_menu.active {
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.main_menu .toggle_link {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.toggle_link {
display: none;
}
}
</code></pre>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-57157279677203679472014-12-18T00:01:00.001+01:002015-10-26T15:13:57.620+01:00[CSS] Hidden Header ✤✤Damit es hier auch mal wieder was zu lesen gibt, ausser das Versprechen, dass es denn bald wieder losgeht, schreibe ich jetzt mal wieder ein kleines Tutorial. Die ganzen Deadlines und der Weihnachtsstress haben mich nun doch etwas sehr eingeholt, aber als ich heute Morgen gefragt wurde, wie man denn einen Header macht, der sozusagen hinter dem Content liegt, wollte ich unbedingt eine Anleitung dazu für euch schreiben. Und hier kommt sie nun.<br />
<br />
<i>First of all so sorry for being a little lazy with my English in the posts, but the neglecting will hopefully end really soon. There are just a couple of deadlines and the necessary Christmas Stress right now that have been keeping me a little too busy. But when I was asked today how you'd create a header that lies behind the content, I wanted to write it for you.</i><br />
<a name='more'></a><br />
<input type="radio" name="lang" id="english"><label for="english" class="buttonbg">English <i class="fa fa-angle-down"></i></label><input type="radio" name="lang" id="german" checked><label for="german" class="buttonbg">Deutsch <i class="fa fa-angle-down"></i></label><br />
<br />
<div class="german">Okay, ein Header der hinter dem Content liegt. Aussehen wird das ganze am Schluss so:</div><div class="english">Okay, A header that lies behind the content. This will end up looking like this:</div><br />
<p data-height="551" data-theme-id="7132" data-slug-hash="dPXOXR" data-default-tab="result" data-user="bekreatief" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/dPXOXR/'>dPXOXR</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script><br />
<br />
<div class="german">Wir beginnen mit einem ganz einfachen Markup. Fixierte Navigation, dann der header und eine section für den content.</div><div class="english">We'll start off with just some very simple markup. A fixed nav, header and a section for the content.</div><br />
<pre><code class="language-markup"><nav>
<a href="#">item 1</a>
<a href="#">item 2</a>
<a href="#">item 3</a>
</nav>
<header>
<h1>Heading</h1>
</header>
<section>
<p>Content</p>
</section></code></pre><br />
<div class="german">Die CSS dazu ist ganz simpel. Was wir tun ist die Navigation oben zu fixieren. Wir geben ihr dann einen z-index von 2. Das heisst, dass sie über dem Header und dem Content liegen wird. <br />
Dem Header verpassen wir das Bild als Hintergrundbild. Ich habe mit einer fixen Höhe gearbeitet, aber wenn ihr da ein bestimmtes Format haben wollt, das variabel ist, seht euch meinen Post zum <a href="http://bekreatief.blogspot.ch/2014/09/padding-hack-sass-faux-color-overlay.html">padding hack</a> an. Das Hintergrundbild fixieren wir.<br />
Den Text platzieren wir dann oben drüber. Und dann geben wir dem Header einen z-index von -1.<br />
Damit das nachher verdeckt werden kann, muss der Content einfach eine Hintergrundfarbe haben.</div><div class="english">The CSS is very simple. What we do is fix the navigation to the top with a z-index: 2. This will put it above everything.<br />
For the header we'll define a background image, which is attached fixed as well. I gave mine a height in px, but if you want your header in a specific aspect ratio, check out my post about the <a href="http://bekreatief.blogspot.ch/2014/09/padding-hack-sass-faux-color-overlay.html">padding hack</a>.<br />
The text will be placed on the header. And then we'll give the whole header a z-index of -1.<br />
In order for the header to be covered on scroll, all we need to do after is give the section a background color.</div><br />
<pre><code class="language-scss">// Sass
nav{
width: 100%;
background: darken($teal, 5%);
position: fixed;
z-index: 2;
}
header{
background: {
image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTnJSCfXmtwKIn_6X8zMvoxc8iVmpVg_GDM9WBkL1g9qttPRNzKM21WdFePxHRq0V_zhRh-urjTrVVMyNc2w-sQ6Ji8mHqVFnkrOmU2c2VezTynqFGNfvvGT_kiJ7CEP3mh0s_dTT9QPC/s1600/color2.png);
attachment: fixed;
}
height: 450px;
position: relative;
z-index: -1;
@media screen and (max-width: 631px){
height: 300px;
}
h1{
font-size: 100px;
position: fixed;
top: 150px;
width: 100%;
height: auto;
z-index: -1;
@media screen and (max-width: 631px){
font-size: 50px;
}
}
}
section{
position: relative;
z-index: 1;
background: white;
}</code></pre><br />
<div class="german">Und das ist im Grunde das, was den ganzen Trick ausmacht. Ganz simpel. Dann einfach nach Belieben gestalten. Meine generierte CSS sieht dann am Ende so aus:</div><div class="english">And that's basically everything you need to do. Very simple. And then just go on designing however you want it. My compiled CSS ends up looking like this:</div><br />
<pre><code class="language-css">nav {
width: 100%;
background: #00808d;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0px 15%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 2;
}
nav a {
padding: 15px 0px;
color: white;
}
nav a:hover {
color: #ff1744;
}
header {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTnJSCfXmtwKIn_6X8zMvoxc8iVmpVg_GDM9WBkL1g9qttPRNzKM21WdFePxHRq0V_zhRh-urjTrVVMyNc2w-sQ6Ji8mHqVFnkrOmU2c2VezTynqFGNfvvGT_kiJ7CEP3mh0s_dTT9QPC/s1600/color2.png);
background-attachment: fixed;
height: 450px;
position: relative;
z-index: -1;
}
header h1 {
color: white;
font-size: 100px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
text-shadow: 0px 0px 1px black;
position: fixed;
top: 150px;
width: 100%;
height: auto;
z-index: -1;
}
@media screen and (max-width: 631px) {
header {
height: 300px;
}
header h1 {
font-size: 50px;
}
}
section {
min-height: 300vh;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 1;
background: white;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 15%;
}</code></pre>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com1tag:blogger.com,1999:blog-1589905134039127183.post-84342340204914609302014-10-27T20:55:00.001+01:002015-10-26T15:14:18.029+01:00A Smart Button MixinVor einer Weile habe ich beschlossen, für meine Buttons ein Sass Mixin zu schreiben, nur ist mir dabei aufgefallen, dass ich mehrere Farben brauche, die sich nicht ganz so einfach generieren liessen, wie anfangs gedacht. Und dann gab es noch das Problem der Schriftfarbe, welche entweder weiss oder schwarz sein sollte, je nach dem, was sich halt besser lesen liess. Man hätte mit mehreren Variabeln lösen können, aber ich hab beschlossen, mit Funktionen zu spielen und das Problem auf diese weise zu lösen.<br />
<a name='more'></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQj9fcunDzx_OkOa1KUrPps7WD6d3Po4UlOgQRYhPA19oAcjA64WPvY9ck98q-4cVChw1E8FbEGiZOrU7wIV0j9Gb8OygKr24NSxTGT54Hci4-UoYSFu7pf4G2jzytGYNJGAVQJhaZa-GS/s1600/buttons.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQj9fcunDzx_OkOa1KUrPps7WD6d3Po4UlOgQRYhPA19oAcjA64WPvY9ck98q-4cVChw1E8FbEGiZOrU7wIV0j9Gb8OygKr24NSxTGT54Hci4-UoYSFu7pf4G2jzytGYNJGAVQJhaZa-GS/s1600/buttons.jpg" /></a><br />
<br />
<h3>Lightness</h3>Das erste Problem, das mit der Schriftfarbe hatte ich relativ schnell gelöst. Sass besitzt eine Funktion, die einem den Helligkeitswert einer Farbe ausgiebt. Diese habe ich mir ausrechnen lassen und dann durch eine Funktion definiert, dass helle Farben die Schriftfarbe weiss und dunkle Farben die Schriftfarbe schwarz bekommen. Damit ich wusste, wie der Helligkeitswert ausschaut, habe ich diesen Wert in einem pseudoelement platziert und mir anzeigen lassen.<br />
<br />
<p data-height="266" data-theme-id="7132" data-slug-hash="AwKEx" data-default-tab="result" data-user="bekreatief" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/AwKEx/'>AwKEx</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
Das zweite Problem war der Schatten, des Buttons.<br />
Startet man mit einer hellen Farbe, muss man diese um einen geringeren Wert verdunkeln, als mit einer dunkeln Farbe, um einen schönen Effekt zu erzielen. Also habe ich drei Stufen von Helligkeiten definiert und dort den verdunklungsgrad angepasst.<br />
<br />
<p data-height="473" data-theme-id="7132" data-slug-hash="GownI" data-default-tab="result" data-user="bekreatief" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/GownI/'>GownI</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
Und damit konnte ich nun ein Button-Mixin schreiben, welches für jede Farbe geeignet ist.<br />
<br />
<p data-height="266" data-theme-id="7132" data-slug-hash="ivsel" data-default-tab="result" data-user="bekreatief" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/ivsel/'>flat buttons</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-31101428189357444112014-10-20T00:03:00.000+02:002014-10-20T00:03:19.997+02:00Sticky Navigation (oder Header) ohne Jump ✤✤(✤)Ich wurde letztens gefragt, wie ich denn meine Navigation sticky gemacht habe und habe versprochen, dass ich dazu einen Post schreibe.<br />
Eigentlich wollte ich euch das Script präsentieren, das ich für mein Menu geschrieben habe. Da ich dieses in letzter Zeit für mehrer Projekte verwendet habe, ist mir aber aufgefallen, dass es ein bisschen Probleme macht. Das ist nicht das Problem meines sticky scripts, es ist das Problem von vielen Scripten. Nach Recherche und viel Trial und Error, habe ich nun ein Script zusammengestellt, dass das Problem nicht aufweist.<br />
<a name='more'></a><br />
<br />
Das Problem vieler dieser Scripte ist, dass es einen Sprung gibt, sobald man runterscrollt und die Navigation oben fixiert bleibt. Das äussert sich ausserdem darin, dass der Content, der unterhalb der Navigation platziert ist durch das Ändern der Positionierung plötzlich von der Navigation verdeckt wird. Hat man nur eine dünne Navigation, fällt das kaum auf, doch wenn ihr bei folgendem Beispiel ganz langsam scrollt, werdet ihr sehen, dass sobald das Menu die Oberkante erreicht, der Titel darunter verdeckt wird. Das ist der Sprung von dem ich gesprochen habe und das ist das, was wir vermeiden wollen.<br />
<br />
<p data-height="487" data-theme-id="7132" data-slug-hash="HvtgD" data-default-tab="result" data-user="bekreatief" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/HvtgD/'>HvtgD</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
Bei einem klassischen Script, braucht ihr nur einen Container, hier brauchen wir etwas mehr Markup.<br />
Die Idee ist, einen Platzhalter hinter dem Menu zu platzieren, mit der gleichen Höhe, Dieser Platzhalter wird nicht aus dem Kontext geworfen, sondern scrollt einfach weiter. Das heisst kein Sprung, weil das Element, das wir entfernen, über einem anderen Element liegt, das wir nicht entfernen.<br />
Dieser Container braucht die gleiche Höhe wie unser Menu. Da man meist keine Höhe definiert, lassen wir das jQuery machen.<br />
<br />
Nehmen wir ein Beispiel.<br />
<br />
Unser Markup sieht wie folgt aus:<br />
<br />
<pre><code class="language-markup"><div class="fix_wrap">
<div class="fix_hold"></div>
<nav class="fix_nav">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</nav>
</div></code></pre><br />
Unser Style dazu ist ganz simpel:<br />
<br />
<pre><code class="language-css">.fix_wrap {
position: relative;
left: 0;
top: 0;
}
.fix_wrap .fix_nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
background: #8c4698;
padding: 10px 0px;
}</code></pre><br />
Jetzt müssen wir nur noch etwas jQuery schreiben, dass die Höhe der Navigation liest und diese Höhe dem Platzhalter zuweist. Und dann ändern wir die Position des Menus von absolute zu fixed, sobald das Menu die Oberkante des Fensters erreicht hat.<br />
<br />
<pre><code class="language-javascript">$(function(){
var gluetube = $('.fix_wrap');
var glue = $('.fix_nav');
var grease = $('.fix_hold');
var h = (glue).height();
var offset = glue.offset();
var glueTop = offset.top;
var windowTop = $(window).scrollTop();
function sticky(){
grease.css({'height':h});
windowTop = $(window).scrollTop();
return glue.css({position: windowTop>glueTop ? "fixed": "absolute" });
}
$(window).on("load resize scroll",function(e){
sticky();
});
});</code></pre><br />
Das ganze würden wir dann in einem Gadget oder direkt im Code des Menus platzieren. Vergesst dabei nicht jQuery zu integrieren, am beste direkt vor dem schliessenden body-tag und drunter dieses Script.<br />
Wollt ihr es in ein Gadget kopieren, würde das so aussehen:<br />
<br />
<pre><code class="language-markup"><div class="fix_wrap">
<div class="fix_hold"></div>
<nav class="fix_nav">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</nav>
</div>
<style>
.fix_wrap {
position: relative;
left: 0;
top: 0;
}
.fix_wrap .fix_nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
background: #8c4698;
padding: 10px 0px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
var gluetube = $('.fix_wrap');
var glue = $('.fix_nav');
var grease = $('.fix_hold');
var h = (glue).height();
var offset = glue.offset();
var glueTop = offset.top;
var windowTop = $(window).scrollTop();
function sticky(){
grease.css({'height':h});
windowTop = $(window).scrollTop();
return glue.css({position: windowTop>glueTop ? "fixed": "absolute" });
}
$(window).on("load resize scroll",function(e){
sticky();
});
});
</script></code></pre><br />
Zum Vergleich habe ich euch das gleiche Demo wie vorhin noch mit dem neuen Script geschrieben, damit ihr sehen könnt, wie <em>smooth</em> der sticky Effekt verläuft.<br />
<br />
<br />
<p data-height="487" data-theme-id="7132" data-slug-hash="gHomL" data-default-tab="result" data-user="bekreatief" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/gHomL/'>gHomL</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com2tag:blogger.com,1999:blog-1589905134039127183.post-53779755253610349802014-10-10T00:38:00.000+02:002014-10-10T00:38:14.110+02:00Responsive Dropdown Menu ✤✤✤✤(✤)Ich habe schon ein paar Tutorials dazu geschrieben, wie ihr responsive Menus schreibt. Bei den komplizierteren, habe ich mich dabei bisher aber auf Frameworks oder andrer Leute Anleitungen verlassen. Mein letztes Menututorial ist aber auch schon eine Weile her. in der Zeit habe ich einiges gelernt und deswegen gibt es jetzt mein erstes "komplexes" Menu für euch. Und das alles nur, damit es für euch ganz einfach wird, das Menu zu verwenden.<br />
<br />
<i>I have written a few tutorials on here how to create a responsive menu. For the more complex ones I usually relied on framework or other people's explanations. But my last menu tutorial was written a while ago. In the meantime I learned a lot and that's why I am ready now to present a more complex menu today. And that's only because I wanted it to be super easy to use.</i><br />
<a name='more'></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv8wNZSy1jv3fh7HFpqKsL8PucKYky_h7SCl6RHVVOYJavB6eZmL3rLzqd8DG_kgUulZL12y_Bk1JaLRxoYbmbwj6Pw-Kc5IahkXxOgRAlZz9ZDf3TxEmVuKDasegPpgmzJ1q-Cm7uroFg/s1600/responsivedropdown.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv8wNZSy1jv3fh7HFpqKsL8PucKYky_h7SCl6RHVVOYJavB6eZmL3rLzqd8DG_kgUulZL12y_Bk1JaLRxoYbmbwj6Pw-Kc5IahkXxOgRAlZz9ZDf3TxEmVuKDasegPpgmzJ1q-Cm7uroFg/s1600/responsivedropdown.jpg" /></a><br />
<br />
<input type="radio" name="lang" id="english"><label for="english" class="buttonbg">English <i class="fa fa-angle-down"></i></label><input type="radio" name="lang" id="german" checked><label for="german" class="buttonbg">Deutsch <i class="fa fa-angle-down"></i></label><br />
<br />
<h2>Intro</h2><div class="german">Angefangen hat es bei der Arbeit. Ich schrieb unseren kompletten Theme Style in Sass neu und erkannte dabei, dass das bisherige responsive Menu unbrauchbar war. Nach kurzer Besprechung war der Plan, ein Menu zu haben, dass sobald es keinen Platz mehr hat, off-canvas geht. Da wir zwei Menus im oberen Bereich unterzubringen hatten, wäre nach unten aufklappen einfach weniger schön.<br />
Es hat eine Weile gedauert, aber am Ende sass ich mit etwas da, was man brauchen konnte und dank PHP waren die ganzen Dinge, die mir jetzt heute Kopfzerbrechen beschert haben, ganz schnell gelöst.<br />
In Blogger gibt es aber kein PHP (und mein Gott, bin ich froh darum!) und deswegen habe ich kurzerhand beschlossen, dass ich das auch nur mit Sass kann. Und so kam es, dass ich zum ersten Mal Sass-Funktionen schrieb und zum Ziel kam. Ein Ziel, dass ihr euch auf der Demopage ansehen könnt und sehr gerne nun bei der Entstehung begleiten dürft.</div><div class="english">It all started at work. I was rewriting our complete theme style in sass and realized while doing it that the current responsive menu was unusable. After a short discussion the plan was to have a menu that turns into an off-canvas navigation as soon as it collapses. Since we have two menus fairly close together, it would have been a little ugly to open them inside the content.<br />
It took a while but in the end I had something that I could use and thanks to PHP all the things that took me ages to figure out today were done in no time.<br />
In Blogger there is no PHP (don't get me wrong, I am <i>so</i> glad there isn't!) and that's why I decided I was able to do it in Sass only. And that's how I wrote Sass functions for the first time and reached my goal of the day. The result can be seen in my demopage and you are very welcome to keep on reading how this goal was achieved.</div><br />
<a href="http://bekreatief.github.io/demo/responsive_dropdown/" target="_blank" class="buttonbg">Demo</a><br />
<br />
<div class="german"><h2>Vorbereitung</h2>Geschrieben wird in Sass, also muss das auf dem Computer installiert sein. Ich verwende zum compilieren Prepros, weil es ein schönes grafisches Interface hat und mich vor dem Terminal bewahrt. Ausserdem kommt es direkt mit Autoprefixer und einer Livepreview an, die ich immer sehr gerne benutze. Ganz besonders Autoprefixer, weil ich dann keine Prefixe schreiben muss.<br />
Ansonsten braucht es nur noch einen Editor (wer meine Posts liest, weiss dass mein Favorit Brackets ist) und ein bisschen Zeit.</div><div class="english"><h2>Prep Time!</h2>We write in Sass, you you need to have it installed on your computer. I use Prepros to compile because it has a nice GUI and saves me from the evil terminal. Also it comes with autoprefixer and livepreview which both make my life easier. Espescially Autoprefixer, I have writing prefixes.<br />
Other than that you just need an Editor (if you know my blog you'll know my favourite is Brackets) and a bit of time.</div><br />
<h2>Markup</h2><div class="german">Das Markup ist simepl, einfach das klassische Markup eines Menus. Ich habe es noch in eine Section gepackt, weil das Menu nur so breit sein soll, wie der Content, die Leiste aber die volle Breite füllen soll. Ausserdem habe ich den Elementen, die "droppen" sollen, noch eine Klasse gegeben. Ich gehe davon aus, dass ihr das mit zwei Menus macht, denn das ist das, was Sasstechnisch Probleme bereitet hat. Ein einzelnes Menu ist um einiges einfacher.<br />
Für den responsiven Teil brauchen wir einen Link, der als Schalter fungiert. Ich habe auch einen dieser Links innerhalb des Menus platziert, falls der erste von der Navigation verdeckt wird. Und irgendwie soll man das ja auch wieder schliessen können.<br />
Die Schalter bekommen noch ein eigenes Menu.</div><div class="english">The markup is simple, just the classic nav markup, really. I just added in a section because I wanted the menu to have a max-width but the menu-background not. Also I added a class to each parent. And I will assume you do two navigations, because that's waht caused the trouble for me, just one menu is a lot easier.<br />
For the responsive part, we need a link, which will act as a toggle. I also added one inside the menu. The second on closes the navbar, in case of the toggle link being covered up.<br />
The toggles also get their own navbar.</div><br />
<pre><code class="language-markup"><nav class="toggle_nav">
<a href='#menu' class="toggle_link">
<i class="fa fa-navicon"></i>
</a>
<a href='#menu2' class="toggle_link2">
<i class="fa fa-navicon"></i>
</a>
</nav>
<section class="top_menu">
<nav id='menu2'>
<a href="#" class="toggle_link2"><i class="fa fa-close fa-lg"></i></a>
<ul>
<li class="parent"><a>KT Demos</a>
<ul>
<li><a href='http://bekreatief.github.io/demo/triangle_mania_sass'>Previous</a></li>
<li class="disabled"><!--<a href='#'>-->Next<!--</a>--></li>
</ul>
</li>
<li><a href='#'>Back to Article</a></li>
<li><a href='https://github.com/bekreatief/bekreatief.github.io/tree/master/demo/responsive_dropdown'>See Source</a></li>
</ul>
</nav>
</section>
<header></header>
<section class="main_menu">
<nav id='menu'>
<a href="#" class="toggle_link"><i class="fa fa-close fa-lg"></i></a>
<ul>
<li class="parent"><a>Other Versions</a>
<ul>
<li><a href='/demo/responsive_dropdown/two'>Off-Canvas Only</a></li>
<li><a href='/demo/responsive_dropdown/three'>Different Collapses</a></li>
<li><a href="/demo/responsive_dropdown/four">off-canvas + bar</a></li>
</ul>
</li>
<li><a href='#'>And some</a></li>
<li><a href='#'>empty links</a></li>
<li><a href="#">to fill up</a></li>
<li><a href="#">the space</a></li>
</ul>
</nav>
</section></code></pre><br />
<h2>jQuery</h2><div class="german">Damit wir das off-canvas öffnen können, brauchen wir ein bisschen jQuery. Wir fügen beim Klicken auf den Link die Klasse active hinzu.</div><div class="english">To be able to open up the off-canvas we add a bit of jQuery. We add a class to the menu as soon as the toggle link is clicked.</div><br />
<pre><code class="language-javascript">$(document).ready(function () {
$(".toggle_link").click(function () {
$("#menu").toggleClass("active");
});
$(".toggle_link2").click(function () {
$("#menu2").toggleClass("active");
});
});</code></pre><br />
<h2>Sass</h2><div class="german">Und dann schreiben wir Sass. Ich habe ein kleines Demo geschrieben in dem ich ein einzelnes Menu demonstriert habe, dann könnt ihr euch den Code ansehen und damit spielen.</div><div class="english">And then we write Sass. I wrote a Demo for just one menu, then you can see the code and play around.</div><br />
<p data-height="266" data-theme-id="7132" data-slug-hash="cvsJr" data-default-tab="result" data-user="bekreatief" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/cvsJr/'>cvsJr</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
<h2>Variations -> Functions!</h2><div class="german">Ihr seht, wenn ihr den Wert von der collapse Variable auf etwas setzt, was höher ist, als euer Bildschirm, dann könnt ihr das Menu nur off-canvas haben. Das fand ich eigentlich ganz cool, wenn man durch die Collapse-Werte definieren kann, wie die Navbar aussieht. Ausserdem hatten beide Menus den gleichen Punkt, an dem das responsive Menu einsetzt. Zum Teil gibt es da aber Grössenmässig sehr grosse Unterschiede. Ich wollte das aber möglich machen. Dafür brauchen wir Funktionen. Funktionen sind nicht sschwer, im Grunde ist auch das was wir machen ganz einfach. Es hat trotzdem etwa 3 Stunden gedauert, bis alles so funktioniert hat, wie ich es haben wollte, weil man ja noch die Idee haben muss. Und heute stand ich leicht auf dem Schlauch. Aber es ist eine Lösung zusammengekommen.</div><div class="english">You see, by changing the collapse variable to a value higher than your screen resolution, you can have the menu off-canvas only. I liked that and wanted to keep that. Also I would really like to have different collapse points for each menu, because sometimes they differ so greatly in lenght. To achieve this we need functions. They are pretty simple, but it took me ages to figure out, I had a very slow day... However, it ended up working out.</div><br />
<h3>Togglenav Collapse</h3><div class="german">Die erste Aufgabe war es, unterschiedliche Collapses zu haben. Der erste Schritt war die gemeinsame Variable für die beiden Menus aufzuteilen. dann aber, brauchte ich einen collapse wert für mein Schaltermenu.<br />
Damit das Menu immer da ist, muss das Schaltermenu angezeigt werden, sobald das erste Menu verschwunden ist. Der Wert, der also gebraucht wird, ist der grössere der beiden.<br />
Natürlich hätte ich einfach nachsehen können, aber das ist nicht der Zweck der Sache. Ziel ist es, die Werte anpassen zu können und dann nichts anderes mehr machen zu müssen. Wir müssen also entwerder die eine oder die andere Variable in unser Media Query einfügen.<br />
Die Funktion macht genau das. Sie checkt ob der collapse-Wert des einen Menus grösser oder gleich des collapse-Werts des anderen Menus ist und gibt dann die Variable aus, die wir brauchen.<br />
In Sass sieht das so aus:</div><div class="english">The first task was having different breakpoints. The first step was to create two variables out of the one I had used before. One collapse for each navigation. But then cam the togglenav, which needed a collapse point too.<br />
For the menu to be accessible at any times the togglenav has to apear, as soon as the first navigation breaks.<br />
So we need to use the bigger of the two collpase points for the togglenav.<br />
We will do this with a function that checks which one of the collaps points has the higher value and then returns the variable we need.<br />
In Sass this looks like that:</div><br />
<pre><code class="language-scss">@function toggle_collapse($tc, $mc){
@if $mc <= $tc{
@return $tc;
} @else{
@return $mc;
}
}
$toggle_collapse: toggle_collapse($topnav_collapse, $mainnav_collapse);
.toggle_nav{
// style
@media screen and (max-width: $toggle_collapse){
// more style
}
}</code></pre><br />
<div class="german">Das hat super funktioniert, nur leider wurde mir dann mein zweiter Schalter auch schon angezeigt, obwohl ich den gar nicht haben wollte.</div><div class="english">This works like a charm, but unforunately the secund button will be displayed too, even if we do not want it yet.</div><br />
<h3>Buttonvisibility</h3><div class="german">Aus diesem Grund habe ich eine zweite Funktion geschrieben. Die sollte den Wert unseres Schalter Collapses mit dem entsprechenden Menu Collapse vergleichen und dann einen display-wert ausspucken.</div><div class="english">For that reason I wrote another function that compared the toggle collapse with the menu collapse and then spit out a value for display respectively.</div><br />
<pre><code class="language-scss">@function toggle_visible($tc, $nc){
@if $tc == $nc{
@return inline-block;
}
@if $tc != $nc{
@return none;
}
}
.toggle_link{
display: toggle_visible($toggle_collapse, $mainnav_collapse);
}
.toggle_link2{
display: toggle_visible($toggle_collapse, $topnav_collapse);
}
</code></pre><br />
<h3>Min- & Max-Width</h3><div class="german">Das hat dann zu gut funktioniert, denn der ausgeblendete Schalter ist natürlich komplett weg gewesen. Also habe ich beschlossen, dass ich einfach ein media query schreibe, welches die Zeit zwischen den beiden Punkten beschreibt und dort kommt die Info rein. Auch dafür musste eine Funktion her, sogar zwei. Aber danach - danach funktionierte es einfach.</div><div class="english">That worked too good, because the button stayed hiddn forever. So I decided to write a media query which described the point inbetween the two collapses. I needed a function for that, even two, but in the end - in the end it just worked.</div><br />
<pre><code class="language-scss">
@function max-width($tn, $mn){
@if $tn < $mn{
@return $mn;
}
@if $tn > $mn {
@return $tn;
}
@if $tn == $mn{
@return 100%
}
}
@function min-width($tn, $mn){
@if $tn < $mn{
@return $tn;
}
@if $tn > $mn {
@return $mn;
}
@if $tn == $mn{
@return 0
}
}
$maxw: max-width($topnav_collapse, $mainnav_collapse);
$minw: min-width($topnav_collapse, $mainnav_collapse);
.toggle_link{
@media screen and (max-width: $maxw) and (min-width: $minw){
display: toggle_visible($toggle_collapse, $mainnav_collapse);
}
}
.toggle_link2{
@media screen and (max-width: $maxw) and (min-width: $minw){
display: toggle_visible($toggle_collapse, $topnav_collapse);
}
}
</code></pre><br />
<h2>Ready2Use</h2><div class="german">Ich habe einiges gelernt bei der Sache, aber das ist nicht das einzige Resultat. Das ganze ist sozusagen Ready2Use. Laded es euch herunter, schreibt eure Links ins HTML, passt die Variablen an, compiliert und die CSS für euer responsives Dropdown Menu ist geschrieben :D</div><div class="english">I learned a lot by writing this, but that's not the whole result. That thing basically is Ready2Use.<br />
Download it, write your links in the HTML, adjust the variables, compile and the CSS for your responsive DropDown is ready to be put in your source code :D</div><br />
<a href="https://github.com/bekreatief/bekreatief.github.io/tree/master/demo/responsive_dropdown" target="_blank" class="buttonbg"><i class="fa fa-github"></i> Code</a>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-25562631263879188372014-10-01T18:11:00.000+02:002015-10-26T15:14:18.012+01:00Triangle Mania SASSyfied ✤✤✤(✤)Vielleicht erinntert ihr euch noch an meinen <a href="http://bekreatief.blogspot.com/2013/05/css-triangle-mania.html">Triangle Mania Post</a>, den ich vor etwas über einem Jahr geschrieben habe. Dort habe ich euch gezeigt, wie ihr mit CSS Dreieicke zeichnet und was ihr damit schönes machen könnt. Vor einer Weile habe ich auf Codepen etwas mit den Dreieicken gespielt und mir gedacht, dass es eigentlich total cool wäre, wenn ich dafür ein Mixin hätte. Am besten Grösse, Farbe und Richtung eingeben und dann ist das ganze da, weil jedes Mal zu überlegen, wie ich das jetzt genau machen muss, ist mühsam und nimmt enorm viel Zeit in Anspruch.<br />
Gesagt, getan. Und weil mir ein simples Dreiieck nicht genug war, habe ich noch Rechtwinklige Dreiecke gemacht und mich an gleichseitige herangewagt. Und da ich gerade so schön in Fahr war, folgte noch ein Mixin für Fähnchen.<br />
Das alles habe ich dann für euch in einer Demo zusammengestellt, die ich euch hiermit nicht vorenthalten möchte. Viel erklärt ist nicht, wenn ihr Triangle Mania gelesen habt, wisst ihr, wie man Dreiecke zeichnet. Die Mixins veralgemeinern dass dann nur noch.<br />
<br />
<i>Maybe you remember my <a href="http://bekreatief.blogspot.com/2013/05/css-triangle-mania.html">Triangle Mania Post</a>, I wrote a little over a year ago. There I showed you how to create CSS triangles and what you can use them for. A while ago I was playing around with triangles on codepen and though it would be so much cooler to have a mixin for them. Like giving size color and direction and then the whole code is just there.<br />
So I wrote one. And since a simple triangle was not enough I added right angled triangles and finally did some math to create equilateral triangles. And just because I was already on it I also wrote a mixin for flags.<br />
All of that got together in a demo, which I want to show you guys now. I don't need a lot of explanation, if you read Triangle Mania, you will know how a triangle is created, the mixins just make your work a lot faster.</i><br />
<a class="buttonbg" href="http://bekreatief.github.io/demo/triangle_mania_sass/"><i class="fa fa-eye"></i> Triangle Mania Reloaded</a><br />
<a name='more'></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkT81beZxehCYXIaaLbAXirGA7qwcCwVzCTuEFrWKXk7DgUEg-k1vmv_4rZPKkC7IUhsPDwq_P3T4sjK-oEwHRjf4qkDVTe0ZOMUqBw2-vI7ft5CTJPdFEdVcB4m1atHbWEXaiesrU46mC/s1600/triangle.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkT81beZxehCYXIaaLbAXirGA7qwcCwVzCTuEFrWKXk7DgUEg-k1vmv_4rZPKkC7IUhsPDwq_P3T4sjK-oEwHRjf4qkDVTe0ZOMUqBw2-vI7ft5CTJPdFEdVcB4m1atHbWEXaiesrU46mC/s1600/triangle.jpg" /></a>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-23662529934238906762014-09-22T23:41:00.000+02:002015-10-26T15:14:18.006+01:00Write A Responsive Blogger Template fast (with SASS and Git) ✤✤✤✤✤Wie man ein Blogger Template schreibt, habe ich schon ein paar Mal erklärt. Doch vor einiger Zeit habe ich SASS in mein Leben gelassen und seit dem ist es auf meinen CSS Wegen zu meinem ständigen Begleiter geworden, so auch als ich ein bisschen am aktuellen KreaTief Design gearbeitet habe. Dabei habe ich für mich einen Workflow entwickelt, der die Arbeit am Template enorm vereinfacht und bei der Personalisierung von Templates viel mehr Möglichkeiten bietet als der Blogger Vorlagen Designer. Diesen Workflow möchte ich euch heute zeigen.<br />
<br />
<i>How a responsive blogger template is written is nothing I haven't talked about before. But a while ago I let SASS into my life and since then it has not left my side on my css adventures. It did not even leave, when I was working on the current bekreatief template. While I was working on that one, I created this workflow for myself, which I found to be so much easier and faster than how I did it before. Also it is so much easier to personalize my templates now, than using the template designer. How to write a responsive blogger template really fast, that's what this tutorial is about.</i><br />
<a name='more'></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGib_AdrUTLfmfoTONmkr3TSsa3nLGFqoIQVKCLFBL_6L41GMyqMoiZoXzBT4jwrYWp1uk1awzbOnd9Xtg_ab0CcV-SVHBQo7fqKHFVD-96xB5fEzQKs_CqxSCjPD61UkFBoo6U5NeEDg/s1600/menu.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGib_AdrUTLfmfoTONmkr3TSsa3nLGFqoIQVKCLFBL_6L41GMyqMoiZoXzBT4jwrYWp1uk1awzbOnd9Xtg_ab0CcV-SVHBQo7fqKHFVD-96xB5fEzQKs_CqxSCjPD61UkFBoo6U5NeEDg/s1600/menu.jpg"></a><br />
<br />
<input type="radio" name="lang" id="english"><label for="english" class="buttonbg">English <i class="fa fa-angle-down"></i></label><input type="radio" name="lang" id="german" checked><label for="german" class="buttonbg">Deutsch <i class="fa fa-angle-down"></i></label><br />
<br />
<div class="german">Endergebnis dieses Tutorials ist mein Template Photosheet. Das ihr euch gerne ansehen dürft ^^</div><div class="english">The result of this Tutorial is my template photosheet, which you are very welcome to have a look at ^^</div><br />
<a class="buttonbg" href="http://kreatief-photosheettemplate.blogspot.com/" target="_blank"><i class="fa fa-external-link"></i> Photosheet</a><br />
<br />
<div class="german"><h2>Vorbereitungen</h2>Da dies nicht mein erstes Template Tutorial ist, verweise ich einfach noch einmal auf mein <a href="http://bekreatief.blogspot.com/2013/10/how-to-responsive-blogger-template.html">letztes Tutorial</a> zum Thema. Ich empfehle, dass ihr dieses zuerst lest, denn ich gehe davon aus, dass ihr diesen Workflow kennt. In diesem Tutorial geht es darum, den bestehenden Ablauf zu beschleunigen, indem wir Git und SASS verwenden.<br />
Da dies ein SASS und Git Tutorial ist, gehe ich ausserdem davon aus, dass ihr wisst, wie GitHub funktioniert und euch mit Sass vertraut gemacht habt. Checkt dafür am besten die <a href="http://sass-lang.com/" target="_blank">offizielle Website</a> aus und beschäftigt euch mit der Dokumentation. Wenn ihr CSS könnt, braucht ihr maximal einen Tag, bis ihr SASS gelernt habt. Und ihr werdet es lieben!</div><div class="english"><h2>Preparation</h2>Since this is not my first template tutorial, and I am not going to repeat myself again, I'll just leave you a <a href="http://bekreatief.blogspot.com/2013/10/how-to-responsive-blogger-template.html">link</a> to my last tutorial, which is a lot more detailed and introduces you to my old workflow. I recommend reading that first, because this tutorial here is more like an extension to the old one. We will speed the process up, by using Git and SASS.<br />
Since this is a SASS and Git Tutorial, I assume you know how GitHub works and have an idea about SASS. For that check out the <a href="http://sass-lang.com/" target="_blank">official website</a> and read the documentation. If you are able to write CSS, you'll need a day max to learn SASS. And you're gonna love it!</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3l3I2IOfJvvnNX4pTp2awN3qZUOXo_UwmIwj3DyAoFpS33hRef4hUcuW8aPvYtEYLCrQSmMIim5hS8owUuJleA_orbqu0BwULS-9CoeAIYj2H-D9b_N0Qvza94hQ1UMCSZJTNeTmxj7OL/s1600/1.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3l3I2IOfJvvnNX4pTp2awN3qZUOXo_UwmIwj3DyAoFpS33hRef4hUcuW8aPvYtEYLCrQSmMIim5hS8owUuJleA_orbqu0BwULS-9CoeAIYj2H-D9b_N0Qvza94hQ1UMCSZJTNeTmxj7OL/s1600/1.jpg" /></a><br />
<br />
<div class="german">Damit ihr SASS dann aber in CSS verwandeln könnt, müsst ihr es auf eurem Rechner installieren. Ich kenne viele CMD-Lover, selbst arbeite ich aber äusserst ungern mit dem Terminal, wenn es anders mindestens genauso schnell geht (für gewisse Dinge ist das Terminal ganz praktisch, ihr werdet sehen wann, aber dann muss das Tempo schon sehr viel schneller sein). Deswegen verwende ich für SASS eine App namens <a href="http://alphapixels.com/prepros/" target="_blank">Prepros</a>. Die installiert ihr einfach und dann könnt ihr es schon verwenden. Was ich ebenfalls total mag ist die Tatsache, dass autoprefixer mit nur einem Klick dabei ist. Autoprefixer sorgt dafür, dass unsere CSS die ganzen Prefixe bekommt und unser SASS Code bleibt damit frei von unnötigen Zeilen.<br />
<br />
Für Git habe ich die letzten Monate immer Aptana Studio verwendet, in letzter Zeit zickt das Ding aber ständig rum, also habe ich beschlossen der Brackets Git Extension eine Chance zu geben und ich bin begeistert. Git mit meinem liebsten Editor zu verwenden ist absolut super! Die Erweiterung von Git findet ihr im Extension Manager, stellt sicher, dass ihr euch das <a href="https://github.com/zaggino/brackets-git/blob/master/README.md" target="_blank">ReadMe</a> durchlest und Git installiert habt, ansonsten funktioniert das nicht. Oh und der <a href="brackets.io/" target="_blank">Brackets Link</a> für alle, die es insteressiert.</div><div class="english">In order to be able to compile SASS into CSS you will need to install SASS. I know a lot of cmd-lovers, but I personally don't really like the terminal. If it does not take me a lot longer, I will go for the non-terminal solution. There are certain things I do with the terminal, but most of the times I can exclude it from my workflow. That's why I use an App to compile my SASS, which is called <a href="http://alphapixels.com/prepros/" target="_blank">Prepros</a>. Just install it and you can use it. What I also really like about it, is the fact that you can use Autoprefixer with just a single click. What Autoprefixer does is add all of the required vendor prefixes for you, so you do not have to care about them.<br />
<br />
For Git I have been using Aptana Studio for the past few months, but lately my program sucked greatly, so I thought I'd give the Brackets Git Extension a try and I really like having Git with my favourite editor. You can find it in the extension manager of brackets. Make sure you read the <a href="https://github.com/zaggino/brackets-git/blob/master/README.md" target="_blank">ReadMe</a> and install all of the requirements, otherwise it won't work. Oh and for everyone who doesn't know it yet the <a href="brackets.io/" target="_blank">Brackets Link</a>. I really like this Editor, because it is updated frequently and has all of the features I need.</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPtQtmfecynO_ez5dtS9ysUGt0M8y-F8O3L3LwdN9VGcjJUE5myfewkNCSPzHjh6bFWfC4I5CLORAPD7Dnga7Q81SuepSlF5v29ra2e9ArlYme2OY3E7YDy3eT5qe0XQ1AOankcgu6mFp/s1600/2.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPtQtmfecynO_ez5dtS9ysUGt0M8y-F8O3L3LwdN9VGcjJUE5myfewkNCSPzHjh6bFWfC4I5CLORAPD7Dnga7Q81SuepSlF5v29ra2e9ArlYme2OY3E7YDy3eT5qe0XQ1AOankcgu6mFp/s1600/2.jpg" /></a><br />
<br />
<div class="german">Das sind die Apps, die ich verwende. Sie sind kostenlos und funktionieren in PC sowie Mac, selbstverständlich könnt ihr aber auch eure eigenen Programme verwenden.<br />
<br />
<h2>Projektbeginn</h2>Als erstes erstellen wir unser neues Projekt. Dafür erstellt ihr in eurem GitHub Ordner einen neuen Ordner, den ihr nach eurem Projekt benennt. Diesen öffnet ihr dann im Editor und initiiert das Projekt. Sobald ihr das habt, könnt ihr sehen, dass ein Master-Branch erstellt wurde.<br />
Da wir die am Ende entstehende CSS hosten möchten, müssen wir für die Datei einen neuen Branch erstellen, den wir gh-pages nennen. Was dann passiert ist, dass wir unsere Files aufrufen können nach dem Schema <b>http://benutzername.github.io/projektname/datei</b></div><div class="english">Those are the Apps I use. They are free and work on PC and Mac. But of course you can use your own programs. Just use whatever you feel comfortable with.<br />
<br />
<h2>Project Initiation</h2>First we create our project. For that you create a folder in your GitHub folder, which you name after your project. Open this folder in the editor and initiate the project. As soon as you did that, you can see, that the master branch was created.<br />
But since we want to host our CSS in the end, we need to create a new Branch which we name gh-pages. What happens then is we can open up the files using the URL <b>http://username.github.io/projectname/file</b></div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyGFNGHXX3CxzxSsVgaoozxLWHq7hIMuC8zgAhjiXwMfvg_-cHg_M-gN6YS2g9NhPmHnYzGz-hqBcmcoWoJPY3qUcjyw_6G5qYnK0CXn_UHsMMqA8o-1-ig5h5DFwmdKRbd06YMBLa3Yb/s1600/3.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyGFNGHXX3CxzxSsVgaoozxLWHq7hIMuC8zgAhjiXwMfvg_-cHg_M-gN6YS2g9NhPmHnYzGz-hqBcmcoWoJPY3qUcjyw_6G5qYnK0CXn_UHsMMqA8o-1-ig5h5DFwmdKRbd06YMBLa3Yb/s1600/3.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBcwDo8WjNrbPw7Gmi2X0GPFBQ1DHETgR70erhp9baBd9_M8H5k5SApSD0ijfApmZgPFgKmmf822glxkeBfqPnvVzC964DTk-GyHSAZx85gQ7ecSqXCJGXf2f6J11Bo1eVOt1rjTQWup4/s1600/4.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBcwDo8WjNrbPw7Gmi2X0GPFBQ1DHETgR70erhp9baBd9_M8H5k5SApSD0ijfApmZgPFgKmmf822glxkeBfqPnvVzC964DTk-GyHSAZx85gQ7ecSqXCJGXf2f6J11Bo1eVOt1rjTQWup4/s1600/4.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfQRqSh9n3prFIPz3j3p_qJp6B1yIOmBRTe0Ro_PPfBah3EG9Dtz285zP6s18aWdh25OQNj1GCrWERIWBRDRz65ouQ2cJbnuo1e9FL98m39LVYFrxejAv6wFxOv-vSB_ppdf_2aFHCQ9h/s1600/5.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfQRqSh9n3prFIPz3j3p_qJp6B1yIOmBRTe0Ro_PPfBah3EG9Dtz285zP6s18aWdh25OQNj1GCrWERIWBRDRz65ouQ2cJbnuo1e9FL98m39LVYFrxejAv6wFxOv-vSB_ppdf_2aFHCQ9h/s1600/5.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcUz9_vu6wdd7E8F5iKSU8NVww7QtcVRy3Fj2t8X-lxr7R5rh6MkjX8tUNpN2-Gn5hC-z-wcve4S1MjXa_YAcZEeAY0pRXDePMAcU13uH-9FH1FKf4UW1OWZ4ARmxsKplCdlhV24J8sqe3/s1600/6.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcUz9_vu6wdd7E8F5iKSU8NVww7QtcVRy3Fj2t8X-lxr7R5rh6MkjX8tUNpN2-Gn5hC-z-wcve4S1MjXa_YAcZEeAY0pRXDePMAcU13uH-9FH1FKf4UW1OWZ4ARmxsKplCdlhV24J8sqe3/s1600/6.jpg" /></a><br />
<br />
<div class="german">Als nächstes erstellen wir die Files für unseren Sketch. Mittlerweile mache ich keine Box-Skizzen mehr, sondern erstelle mehr oder weniger Prototypen der Seite, die die Grundlook schon enthalten. Eine HTML-Page ist schnell geschrieben und wenn man während dem Stylen plötzlich das Markup verändern will, ist es in einem simplen Dokument viel schneller gemacht als in Blogger.<br />
Wir erstellen für den HTML Prototyp ein einziges SASS-file. Später werden wir die einzelnen Komponenten aufteilen, doch für die Skizze reicht eine Datei.<br />
Den Ordner fügen wir ausserdem Prepros hinzu. Wir wählen für unseren File Auto Compile aus, sodass Prepros jedes Mal die CSS neu kompiliert, sobald wir Änderungen im SASS machen. Ausserdem aktivieren wir Autoprefix und wählen compressed als Stil aus. Die Datei wird dadurch minimiert und sehr leicht.<br />
Sobald die Files erstellt sind, committen wir sie.</div><div class="english">Next we create the files for our Sketch. A while ago I started writing more detailed sketches, almost like prototypes of ma final page, which already contains some styles. A HTML-Page is written very fast and when you are changing markup, it is done much faster in pure HTML than XML.<br />
For the HTML prototype we create one single SASS-file. Later on we will be splitting our SASS, but for the sketch it is totally fine to just have one file.<br />
We add the folder to Prepros, check Auto Compile, so Prepros recompiles the CSS as soon as changes are made. Also add Autoprefix and choose a compressed output. This will minify our file.<br />
As soon as the files are created, we commit them.</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkychroFK6y_D3DvAx_axb-Pcj1jvw5HGdrUIVhW8AgzNO_61s6TyEaBLCJOa1ntwJK7RPInvVz3j86454Gh6DL4XPM4h7URPSUSB4qqytmMZIVBvif7wqN6rHFOriSKBhNJbisNmlPO28/s1600/7.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkychroFK6y_D3DvAx_axb-Pcj1jvw5HGdrUIVhW8AgzNO_61s6TyEaBLCJOa1ntwJK7RPInvVz3j86454Gh6DL4XPM4h7URPSUSB4qqytmMZIVBvif7wqN6rHFOriSKBhNJbisNmlPO28/s1600/7.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-scXo1hxOAp5oKCEvUtjSnSyv-Of_u-TSaM7HbHcOd5ZCC09IieLlXC0vGu8ORV0s_ey8vb4qpWo42gnXL8AvvPgvnORZuDiKDu5dTRzHaeIlwp85DbLndyboa6n8XoY71WR8XJnmCMu5/s1600/8.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-scXo1hxOAp5oKCEvUtjSnSyv-Of_u-TSaM7HbHcOd5ZCC09IieLlXC0vGu8ORV0s_ey8vb4qpWo42gnXL8AvvPgvnORZuDiKDu5dTRzHaeIlwp85DbLndyboa6n8XoY71WR8XJnmCMu5/s1600/8.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVGVSN8yzypbAnsMq5AuPoe8I0iF3XH9AW_aaZTyer_5bOCL8eFp6At13Tk9sbvqozxMHM5zsZmK1Z94NfYtMrcJXGywP7K9i0NBdr-FcxEF8Cjg-eltWd3C3t-WynPLAgfkc4DbDbPmsP/s1600/9.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVGVSN8yzypbAnsMq5AuPoe8I0iF3XH9AW_aaZTyer_5bOCL8eFp6At13Tk9sbvqozxMHM5zsZmK1Z94NfYtMrcJXGywP7K9i0NBdr-FcxEF8Cjg-eltWd3C3t-WynPLAgfkc4DbDbPmsP/s1600/9.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaXk5YpkfOzHMGW5tf47j0axZByKeTlz_u0HTxB5OkZH_-4CYQdUMm8SzhLxJfuDlQ2BxeHm2CwERqX1U2mDqDhR1ISzT1Z0WsK7uDn_p-K5Z8xKHAXs3phqNoq1rfCbelSXLk4fOXcyTu/s1600/10.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaXk5YpkfOzHMGW5tf47j0axZByKeTlz_u0HTxB5OkZH_-4CYQdUMm8SzhLxJfuDlQ2BxeHm2CwERqX1U2mDqDhR1ISzT1Z0WsK7uDn_p-K5Z8xKHAXs3phqNoq1rfCbelSXLk4fOXcyTu/s1600/10.jpg" /></a><br />
<br />
<div class="german">Und spätestens jetzt wird es Zeit in GitHub unser Projekt zu erstellen. Dann kopieren wir den HTTP link und fügen Git das Remote hinzu, damit wir unser lokales Projekt live pushen können.</div><div class="english">And now is the last point to create the project in GitHub. As soon as the repository is started, copy the http link and add the Git Remote, so that we can push our local changes live.</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwjh6OgsF1LVKEplq1OH0YD_6fQYIy4HLo6DgVqPYTGVE9yl24C_Z6h_lgaseE8D_h2v8jJF5SUjbdbDOiy-dr7ab47QqyQb-lOO7ex8iw0LIIhZdJIDLg9m51JWLe_Qzs9W0vy4N1qTbt/s1600/11.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwjh6OgsF1LVKEplq1OH0YD_6fQYIy4HLo6DgVqPYTGVE9yl24C_Z6h_lgaseE8D_h2v8jJF5SUjbdbDOiy-dr7ab47QqyQb-lOO7ex8iw0LIIhZdJIDLg9m51JWLe_Qzs9W0vy4N1qTbt/s1600/11.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju7r1DtKbHFT_DEJ-3luCgpLz0h3YxyAR16u1ISrHUlXrgfNViS7TAPyTmXb044sq9_L04w6S2MHxMUCTUq4LadPmcwBQX7AXl2W951t-wMHd1nmdLKC1TpDgkmMJbJjqxNzfIXcjr0Z64/s1600/12.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju7r1DtKbHFT_DEJ-3luCgpLz0h3YxyAR16u1ISrHUlXrgfNViS7TAPyTmXb044sq9_L04w6S2MHxMUCTUq4LadPmcwBQX7AXl2W951t-wMHd1nmdLKC1TpDgkmMJbJjqxNzfIXcjr0Z64/s1600/12.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQD8qeG9jdJxSsX3F_suQlYh1tW7w9beFZc1xJXNUsh1OejtMaFHgkF_u4i5tG2Slmj1R9_qfsxMEoIMG_DBvgxm0drU3juB2XjSyWNPIRsS8AaHKxO8RF_-PPSQClkM6lprnRvTIfRwaQ/s1600/13.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQD8qeG9jdJxSsX3F_suQlYh1tW7w9beFZc1xJXNUsh1OejtMaFHgkF_u4i5tG2Slmj1R9_qfsxMEoIMG_DBvgxm0drU3juB2XjSyWNPIRsS8AaHKxO8RF_-PPSQClkM6lprnRvTIfRwaQ/s1600/13.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2IlhmEuhTnxXCxdQMBG3wZgO0UcmkpXd6PJWhHQElHBkQAlX6DMPViFI_lONLCEUz0VOqcdefiYecNj30o_CCt1V8v-y3jYe8b13kZpoY_uR1hHx6L4Cte-UeaRkQJeRn4oZTwyoiSsk9/s1600/14.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2IlhmEuhTnxXCxdQMBG3wZgO0UcmkpXd6PJWhHQElHBkQAlX6DMPViFI_lONLCEUz0VOqcdefiYecNj30o_CCt1V8v-y3jYe8b13kZpoY_uR1hHx6L4Cte-UeaRkQJeRn4oZTwyoiSsk9/s1600/14.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvnIIp1nFlaH4x6SxwJYh06UL8php6K1j9yuHwaUzYpx8KIBvWQ8nIskVFZ8ft3VqRVEw43kDTIqvu-ghv9SWYx0kv8Wp7zHfWmQHE5B-ybU5iDcaGRG0dSrVvolIXzzoZA-2O1jU1KgO/s1600/15.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvnIIp1nFlaH4x6SxwJYh06UL8php6K1j9yuHwaUzYpx8KIBvWQ8nIskVFZ8ft3VqRVEw43kDTIqvu-ghv9SWYx0kv8Wp7zHfWmQHE5B-ybU5iDcaGRG0dSrVvolIXzzoZA-2O1jU1KgO/s1600/15.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOaputEerqlmgtxA7flsRLJ14LKjeU3-HxZkjTXvKOWIPpRlxsjpMDheUwq89hij0drpFT-siKNN7vLt2YLZXyBmeqn3w8tLYAtccgvYwTfEQ4fs5kwxJEGJzmb6rYu9Q238P9xtfp6oh7/s1600/16.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOaputEerqlmgtxA7flsRLJ14LKjeU3-HxZkjTXvKOWIPpRlxsjpMDheUwq89hij0drpFT-siKNN7vLt2YLZXyBmeqn3w8tLYAtccgvYwTfEQ4fs5kwxJEGJzmb6rYu9Q238P9xtfp6oh7/s1600/16.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGjnw8ObJm4DKaCrtt5tvT0dnmtWMkOoE-60OG8ql2PycD2pbj8xPV2WHp8mvyKLD-fTMLBsuOaaeOsTg6LjzZWVjJODE6IdVs69JaixCyYIGrehnecXomeaBdagznSr6sYgaRl_RqBWmb/s1600/17.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGjnw8ObJm4DKaCrtt5tvT0dnmtWMkOoE-60OG8ql2PycD2pbj8xPV2WHp8mvyKLD-fTMLBsuOaaeOsTg6LjzZWVjJODE6IdVs69JaixCyYIGrehnecXomeaBdagznSr6sYgaRl_RqBWmb/s1600/17.jpg" /></a><br />
<br />
<div class="german"><h2>Prototyp</h2>Dann schreiben wir unsere Skizze. Wir beginnen mit HTML und schreiben dann unser SASS. Folgend könnt ihr euch mein HTML und SASS ansehen. Und <a href="http://bekreatief.github.io/photosheet/sketch/" target="_blank">live</a> könnt ihr es euch auch ansehen.</div><div class="english"><h2>Prototype</h2>Then we write our sketch. We start with HTML and write then our SASS. Following you find my HTML and SASS. And of course you can see it <a href="http://bekreatief.github.io/photosheet/sketch/" target="_blank">live</a> too.</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzR1mFD2nIUiXZWo5ZkCiIJOwRaVSyvPkDzOvjVVTNcsC2BZQ0l0uGusjjiMbCtwtZ5YMTZgH3UHQGCS3DH0mryOyNVZT3CDCzXxkTZhj5TFxDvOTri8rWgqceceSSTi8OR4lSzFZQy_f/s1600/18.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzR1mFD2nIUiXZWo5ZkCiIJOwRaVSyvPkDzOvjVVTNcsC2BZQ0l0uGusjjiMbCtwtZ5YMTZgH3UHQGCS3DH0mryOyNVZT3CDCzXxkTZhj5TFxDvOTri8rWgqceceSSTi8OR4lSzFZQy_f/s1600/18.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOpSQtYoD7mK3rNmA3pKhJkzHEQ-lejonTABlVOcBYQSW7l3iXugbERjSODOj9xRCv3-HeEtVFDHTe2NO4fm6d_Zf4RHxelh-B4pvdbJUi_pGbtziNgeLlIxSSGeOWKM8q4mU7V2lyjUi0/s1600/19.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOpSQtYoD7mK3rNmA3pKhJkzHEQ-lejonTABlVOcBYQSW7l3iXugbERjSODOj9xRCv3-HeEtVFDHTe2NO4fm6d_Zf4RHxelh-B4pvdbJUi_pGbtziNgeLlIxSSGeOWKM8q4mU7V2lyjUi0/s1600/19.jpg" /></a><br />
<br />
<script src="http://gist-it.appspot.com/github/bekreatief/photosheet/blob/gh-pages/sketch/index.html?footer=minimal"></script><br />
<br />
<script src="http://gist-it.appspot.com/github/bekreatief/photosheet/blob/gh-pages/sketch/style/sketch.scss?footer=minimal"></script><br />
<br />
<h2>Modulation</h2><div class="german">Sobald der Prototyp fertig ist, haben wir ein Bild davon, wie unser Projekt am Ende aussehen wird. Wir haben die meisten Variablen und Mixins und wissen welche Bereiche in den Style gehören. Also machen wir uns einen Plan, wie wir das Projekt aufteilen. CSS-Files können zum Teil sehr gross werden (mein momentanes Maximum ist fast 1900 Zeilen), wobei man schnell den Überblick verlieren kann. Ich schreibe für gewöhnlich ein Inhaltsverzeichnis, wenn ich CSS-Files schreibe und nummeriere alles durch, sodass man alles etwas schneller finden kann. SASS hat aber dieses tolle Ding, das man partials nennt. Man kann sozusagen Teil-Files erstellen, in denen jeweils nur ein kleiner Teil des Ganzen ist. Und zusammengesetzt wird das ganze dann mit imports. Ich habe einige Posts darüber gelesen, wie man das mit dem Ordnern am besten sinnvollsten machen soll. Am meisten überzeugt hat mich ein Artikel aus thesassway.com (<a href="http://thesassway.com/beginner/how-to-structure-a-sass-project">link</a>). Also teile ich meine Ordner nun in modules und partials auf. Die Files sind dann zum Teil sehr kurz, doch es ist alles sortiert und wenn ich etwas bestimmtes anpassen will, finde ich es schnell.<br />
Meine Files und Ordner erstelle ich mit dem Terminal, einfach weil es so viel schneller ist, ein > zu schreiben, als eine Reihe von Tastenkombinationen. Im folgenden könnt ihr den Verlauf sehen und dann noch meine Filestruktur.</div><div class="english">As soon as the prototype is done we have an image of what our project will look like in the end. We created most of the Variables and Mixins and what is part of the Style. So we just map out how to structure our Files. CSS files can get enormous. I usually write a table of content, but SASS has an easier option. It is called partials. Which means you can save chunks of code and just put them all together in the end. I read quite a few posts on how to structure. My favourite post was on thesassway.com (<a href="http://thesassway.com/beginner/how-to-structure-a-sass-project">link</a>) So that's pretty much how I structure. Some of the files only have a few lines, but at least it helps me being organized.<br />
I create my files and folders with the terminal, because it is <i>so much faster</i> to just write > instead of a whole bunch of shortcuts. In the following you can see my structure.</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRqO-xll5MhnY2J0PopJMn15xR5IoeGde-3AUNewh-WNnrJJ6RtnO35xQc659gbhyphenhyphenjDjb6riqXHsELJAp5MxKPljspu4efJ5aMTn-LbxIcTH2GRkprjcbzsthi8BufxzVMsxS6ZXpGljjp/s1600/20.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRqO-xll5MhnY2J0PopJMn15xR5IoeGde-3AUNewh-WNnrJJ6RtnO35xQc659gbhyphenhyphenjDjb6riqXHsELJAp5MxKPljspu4efJ5aMTn-LbxIcTH2GRkprjcbzsthi8BufxzVMsxS6ZXpGljjp/s1600/20.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetRsUZKDJ3sYH7Ay7Q3dVY8n-FE7XYnEoEKFnJT3Suwed1wL16OpJS1dqaRUyufMTVC9BBTGx-Xi2xOdKNCNS4Js7zChpCHm9TcoxczzPycP_h_wEFaUwCKND3dJ45HH0ewdJlDU5GR9J/s1600/21.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetRsUZKDJ3sYH7Ay7Q3dVY8n-FE7XYnEoEKFnJT3Suwed1wL16OpJS1dqaRUyufMTVC9BBTGx-Xi2xOdKNCNS4Js7zChpCHm9TcoxczzPycP_h_wEFaUwCKND3dJ45HH0ewdJlDU5GR9J/s1600/21.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOKq8tg8__1t85rXrAA8865zW_hl-d4Z_TsYH8CazpwKvnd1X1ztZQJ5wo6_WUkFhP2Eg4z1l4MR0KT0332iypPolYgXbz2OH3eBFlDxXIrc8d1-3l0Tw5Wf7gUpkKt_R9tP2SSs_4gjY/s1600/22.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOKq8tg8__1t85rXrAA8865zW_hl-d4Z_TsYH8CazpwKvnd1X1ztZQJ5wo6_WUkFhP2Eg4z1l4MR0KT0332iypPolYgXbz2OH3eBFlDxXIrc8d1-3l0Tw5Wf7gUpkKt_R9tP2SSs_4gjY/s1600/22.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8e22G1bcURVZ9cOPN7y5zS55_6Ueb4BFGX0RtmpMfE-e4ruA725l3KuiTlpZwc0et4_SMGca1kp5XsjN0Jm3N0yIc4Ze3qhV1FY46yH13_AiFW24E2VFiWX2v0nzHqjdUCarIdXrdBLhX/s1600/23.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8e22G1bcURVZ9cOPN7y5zS55_6Ueb4BFGX0RtmpMfE-e4ruA725l3KuiTlpZwc0et4_SMGca1kp5XsjN0Jm3N0yIc4Ze3qhV1FY46yH13_AiFW24E2VFiWX2v0nzHqjdUCarIdXrdBLhX/s1600/23.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWdh_jzB2rFL-1FkWJeAwWe4gSLs_D6V506LOXYOENI4EFs3BOnMITdFWYB3K18u0-LXDj9PXdPsuTgSxQQ-EQVgJPnlCvwvFIZh_k0ZIIF5GTD_iJyPtHI3Q73HFRdSo1PXRbUWPn-3Hy/s1600/24.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWdh_jzB2rFL-1FkWJeAwWe4gSLs_D6V506LOXYOENI4EFs3BOnMITdFWYB3K18u0-LXDj9PXdPsuTgSxQQ-EQVgJPnlCvwvFIZh_k0ZIIF5GTD_iJyPtHI3Q73HFRdSo1PXRbUWPn-3Hy/s1600/24.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELO1tLRkTG-mCEXbukl-kooQfK7WDNh2szO0vn2Ieg51KWdmUaVtDLYzpPSKqctWxyoS8se6PspGdazrEQ7cJnh_MWzl5xJvoUGEq0BFC62E-rgWgmqOweZ7Gk0tk6_p4tCecyMO1cTsQ/s1600/25.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELO1tLRkTG-mCEXbukl-kooQfK7WDNh2szO0vn2Ieg51KWdmUaVtDLYzpPSKqctWxyoS8se6PspGdazrEQ7cJnh_MWzl5xJvoUGEq0BFC62E-rgWgmqOweZ7Gk0tk6_p4tCecyMO1cTsQ/s1600/25.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghh3gA7UedsJPhMrrJWsoxBSDpFrXIHD4ue0wmfLm6Zyz8LwDnFzoSSZi-WER6MXu2SgsDmenex2_rTQN2PUAwSZsJOr4m4fG1Xr6BmOYQWoRQrMJmFy6YPznTSOFHMr7yzgmD4jxVYAxT/s1600/26.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghh3gA7UedsJPhMrrJWsoxBSDpFrXIHD4ue0wmfLm6Zyz8LwDnFzoSSZi-WER6MXu2SgsDmenex2_rTQN2PUAwSZsJOr4m4fG1Xr6BmOYQWoRQrMJmFy6YPznTSOFHMr7yzgmD4jxVYAxT/s1600/26.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCyU3BlFrKsLBqgeJ5yppczG9wcW6l5P6H5J3vAhNHvOJHlIn1IOBpByX1uukoQN84yRH2tNlciF9pM-o_BYKkACwlLGxbS9WnASFUbHGIfi6c3CLLj42tzHWIw681wNP9yhbkK-QUTcQ/s1600/27.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCyU3BlFrKsLBqgeJ5yppczG9wcW6l5P6H5J3vAhNHvOJHlIn1IOBpByX1uukoQN84yRH2tNlciF9pM-o_BYKkACwlLGxbS9WnASFUbHGIfi6c3CLLj42tzHWIw681wNP9yhbkK-QUTcQ/s1600/27.jpg" /></a><br />
<br />
<div class="german"><pre><code class=language-markup">Filestruktur
|-- modules/
| |-- _all.scss [imports aller Module]
| |-- _colors.scss [Farbvariabeln]
| |-- _mixins.scss [Mixins]
| |-- _typography.scss [Schriftvariabeln]
|
|-- partials/
| |-- _base.scss [Modulimport, Globale Variabeln, Extendonly Klassen]
| |-- _reset.scss [Reset Style]
| |-- _general.scss [Generelle Styles]
| |-- _header.scss [Header Style]
| |-- _menu.scss [Menu Style]
| |-- _articles.scss [Artikel Styles]
| |-- _comments.scss [Kommentar Styles]
|
|-- main.scss [Haupt Sassfile, Import aller Partials]</code></pre><br />
<h2>Arbeit mit Five</h2>Wie jedes Mal, verwende ich für den Blogger-Code five. Ich habe Oliver ein paar Änderungen vorgeschlagen, weil sie für mich zu den ersten Schritten gehören, ehe ich richtig anfange. So habe ich noch Labels hinzugefügt und im Header-Gadget den Untertitel eingefügt. Meine Ausgangslage findet ihr also in diesem <a href="https://github.com/bekreatief/five/blob/patch-1/five.xml" target="_blank">Patch</a><br />
<br />
Dieses Template wird dann Markuptechnisch dem Layout von meinem Prototyp angeglichen. In diesem Fall waren es keine Weltbewegenden Änderungen. Ich habe die ganzen Verlinkungen gemacht, vom CSS-File, Font Awesome sowie den Webfonts, die ich verwendet habe. Dann habe ich den Hauptcontainer hinzugefügt, einen um den Header herum, Eine Section für die Navigation eingefügt und dann noch die Grundlage für das Bildpreview auf der Startseite, das möchte ich euch kurz erklären.<br />
<br />
<h3>Responsive Bildcontainer in jedem beliebigen Format</h3>Die Idee war es, das erste Bild des Posts auf der Startseite in einem Grid darzustellen. Das musste dann natürlich noch responsive sein. Ich habe euch vor einer Weile vom padding-hack erzählt und wie ihr das mit SASS bewerkstelligen könnt (<a href="http://bekreatief.blogspot.com/2014/09/padding-hack-sass-faux-color-overlay.html">Link</a>) das einzige Problem ist, dass man bei Blogger data-Tags nicht in CSS einbinden kann.<br />
Ich hatte dieses Problem vor einigen Monaten schon einmal, als ich perfekt quadratische Previews auf meiner eigenen Startseite haben wollte und Oliver (von <a href="http://www.5202.de/">5202</a>) war dann so nett und hat mir mit einem Script ausgeholfen, weil meine jQuery-Kenntnisse gleich Null waren.<br />
<br />
Das Preview habe ich über dem Post-Header eingefügt. jQuery und das Script stehen oberhalb des schliessenden Body-Tags</div><div class="english"><pre><code class=language-markup">file strukcure
|-- modules/
| |-- _all.scss [imports of all modules]
| |-- _colors.scss [color variables]
| |-- _mixins.scss [mixins]
| |-- _typography.scss [font variables]
|
|-- partials/
| |-- _base.scss [module import, global variables, extendonly classes]
| |-- _reset.scss [eeset style]
| |-- _general.scss [general styles]
| |-- _header.scss [header style]
| |-- _menu.scss [menu style]
| |-- _articles.scss [article styles]
| |-- _comments.scss [comment styles]
|
|-- main.scss [main sass file, Imports of all partials]</code></pre><br />
<h2>Working with Five</h2>As alway I will use five for the blogger Code. I forked five and added everything in, which I usually do before even starting to write anything. I added Labels and the blogger description in the header. You can find my changes in this <a href="https://github.com/bekreatief/five/blob/patch-1/five.xml" target="_blank">Patch</a>.<br />
<br />
The template will then be adjusted according to the HTML sketch. In this case it was not a lot of changes. I added the whole links to css and webfonts. Then I added the maincontainer, a header, a seaction for the navigation and the basis for the image preview on index pages.<br />
<br />
<h3>Responsive image container in every format</h3>The idea was, to have the first image of the posts in a grid. This should be responsive as well. I wrote a post about the padding hack a while ago, and showed you how to use it in combination with SASS (<a href="http://bekreatief.blogspot.com/2014/09/padding-hack-sass-faux-color-overlay.html">Link</a>) the only problem was, that blogger data-tags can not be used in CSS.<br />
<br />
I had this problem a few months ago, when I wanted square preview images in my blog and Oliver was nice enough to help me write some jQuery, because back then I didn't know the slightest bit about it.<br />
<br />
I added the preview in the post header. jQuery and the script are placed above the closing body tag.</div><br />
<pre><code class="language-markup"><b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='prev_img'>
<a expr:href='data:i.url'>
<img class='img' expr:src='data:i.firstImageUrl'/>
</a>
</div>
</b:if></code></pre><br />
<pre><code class="language-javascript"><script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
<script>
function square(){
$(&#39;.prev_img&#39;).find(&#39;img&#39;).each(function(n, image){
var image = $(image);
var thisurl = $(this).attr(&#39;src&#39;);
image.parents(&#39;a&#39;).css(&#39;background-image&#39;, &#39;url(&#39; + thisurl + &#39;)&#39;);
$(&#39;.prev_img img[src=&quot;&quot;]&#39;).parent().parent().remove();
});
}
$(document).ready(function() {
square();
});
</script></code></pre><br />
<div class="german">Dann kam natürlich noch der Footer rein und das Markup ist mehr oder weniger vollständig.<br />
<br />
<h2>SASS schreiben</h2>Als nächstes wird der Style geschrieben. Ich werde nicht meinen kompletten Code erklären, sondern nur die wichtigsten Files.</div><div class="english">Then just add the footer and markup is done.<br />
<br />
<h2>Writing SASS</h2>Next we write out style. I am not going over everything, just focus on the most important things.</div><br />
<h3>Modules/_all.scss</h3><div class="german">In all werden alle Module importiert. So müssen wir in unserem base partial nur einen import schreiben und haben direkt alle drin. In den Modulen schreiben wir SASS, welches keinen CSS-Output gibt. Das heisst Variabeln und Mixins. Im Grunde ist das Ziel der Module, dass sie in einem neuen Projekt wiederverwendet werden können, ohne grosse Änderungen. So müssen wir Fonts und Farben womöglich anpassen, aber im Grunde bleibt sich das hier gleich</div><div class="english">In _all.scss all of the modules are imported. So in our base partial we only need a single import and everything's there. In the modules we write SASS, that does not output actuall CSS. This means variables and mixins. Basically the goal of the modules is to be universal and reuseable, without hassle. So you may have to change fonts and colors, but the main stuff can be left the same.</div><br />
<script src="http://gist-it.appspot.com/github/bekreatief/photosheet/blob/gh-pages/template_style/modules/_all.scss?footer=minimal"></script><br />
<br />
<h3>Modules/_colors.scss</h3><div class="german">Hier kommen alle unseren Farben rein. Ihr seht, dass ich dabei eine Variable für schwarz und weiss definiert habe. Dies sind allerdings in wahrheit beide grau. Einmal in sehr hell und einmal in wahnsinnig dunkel. Der Grund ist, dass schwarz auf weiss ein sehr starker Kontrast ist, der auf Dauer unangenehm werden kann. Deswegen verwende ich stets diese beiden Farben. Ansonsten habe ich in diesem Projekt nur noch eine weitere Farbe, weil es ein sehr neutrales Ergebnis werden soll.</div><div class="english">Here we add all our colors. You can see I addedd custom white and black which are basically shades of gray. It is easier on the eyes to use grays because the contrast is a bit more manageable. Otherwise not a lot of colors, because the end result is supposed to be very neutral.</div><br />
<br />
<script src="http://gist-it.appspot.com/github/bekreatief/photosheet/blob/gh-pages/template_style/modules/_colors.scss?footer=minimal"></script><br />
<br />
<h3>Modules/_typography.scss</h3><div class="german">Und hier definiere ich die Schriften.</div><div class="english">And here defining fonts.</div><br />
<br />
<script src="http://gist-it.appspot.com/github/bekreatief/photosheet/blob/gh-pages/template_style/modules/_typography.scss?footer=minimal"></script><br />
<br />
<h3>Modules/_mixins.scss</h3><div class="german">Das ist das spannendste aller Files. Mixins sind der Grund, warum SASS so unglaublich schnell geschrieben ist. Ihr schreibt ganze Folgen von CSS und diese könnt ihr dann einfügen. Das ganze funktioniert ebenfalls mit Variabeln. Wer Autoprefixer nicht verwendet, schreibt dann zum Beispiel mixins mit den ganzen Vendor-Prefixen. Ich habe hier nur drei. Einmal ein Flex-box-mixin, weil mir das meist zu viel Geschreibe ist, mein paddin-hack mixin und noch die rowMachine. Dies ist ein Mixin, welches ich in einem CSS-Tricks Screencast (<a href="http://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/" target="_blank">link</a>) gefunden habe. Es ist absolut wundervoll, wenn es darum geht Breiten für Grids zu berechnen. Ihr könnt es wie Chris mit floats verwenden, oder wie ich mit Flexbox kombinieren. Und es gibt bestimmt noch mehr Möglichkeiten. Ich bin begeistert von Mathe in SASS, einfach weil ich es hasse jedes Mal, wenn ich etwas ändern will, alles neu berechnen zu müssen. Also wird bei mir jede noch so einfache Rechnung stets mit Variabeln gemacht, damit Anpassungen in Windeseile ausgeführt werden können.</div><div class="english">This ist the most exciting files. Mixins are the reason why I love SASS and why it is written so fast. I wrote one for the padding hack, flexbox and a row machine, which I found in a CSS-Tricks Screencast (<a href="http://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/" target="_blank">link</a>). It basically allows you to generate widths for grids.</div><br />
<script src="http://gist-it.appspot.com/github/bekreatief/photosheet/blob/gh-pages/template_style/modules/_mixins.scss?footer=minimal"></script><br />
<br />
<h3>Partials/_base.scss</h3><div class="german">In der Base passiert ganz viel. Als erstes laden wir unsere ganzen Module rein. Und dann kreieren wir hier die globalen Variabeln. Hier kommen alle Variabeln rein, die im Gesamtcode Verwendung finden. Ausserdem auch die extendonly klassen, die im Grunde ähnlich sind wie Mixins, nur ohne Variabelnübergabe, sozusagen. Dieses File ist grundsätlich das einzige, das bei Änderungen angepasst werden muss. Der ganze Rest wird einmal geschrieben und dann kann man es in Ruhe lassen. Ausser man braucht richtig grosse Änderungen.</div><div class="english">In the base file we place all of our modules, extend onlys, which are basically like mixins, but without the variables. And global variables. This ensures that changes can be made really quickly, changing just one variable in the file.</div><br />
<script src="http://gist-it.appspot.com/github/bekreatief/photosheet/blob/gh-pages/template_style/partials/_base.scss?footer=minimal"></script><br />
<br />
<br />
<h3>Partials/_articles.scss</h3><div class="german">In diesem File habe ich das Grid geschrieben. Seht euch besonders den Teil an, in dem die rowMachine Verwendung findet. Ich habe das Template für bis zu fünf Posts nebeneinander geschrieben. Entsprechend des Werts in der Variable für die Anzahl, wird ein anderes Set an Media Queries geladen.</div><div class="english">In this file I wrote the grid. See the rowmachine part. I created the template up to a width of five posts next to each other. Depending on the variable value, a bunch of media queries will be loaded.</div><br />
<script src="http://gist-it.appspot.com/github/bekreatief/photosheet/blob/gh-pages/template_style/partials/_articles.scss?footer=minimal"></script><br />
<br />
<br />
<h3>Main.scss</h3><div class="german">Und in unserem Main-File passiert fast gar nichts und trotzdme alles. Hier werden die ganzen Partials zusammengefügt und ein grosses CSS-File entsteht am Ende. Partials werden von SASS nicht kompiliert. Wenn ihr einen CSS-Output haben wollt, müsst ihr alle partials in einem richtigen SASS-File haben.</div><div class="english">And in the main file we just import everything. Here our partials will be put together and compiled into one single css-file.</div><br />
<script src="http://gist-it.appspot.com/github/bekreatief/photosheet/blob/gh-pages/template_style/main.scss?footer=minimal"></script><br />
<br />
<br />
<div class="german">Und im Grunde ist es das.<br />
Der Prozess geht so wahnsinnig schnell. Auch während des Developements. Wenn ihr von Anfang an die generierte CSS-Datei in eurem Blog verlinkt, sobald ihr das Markup habt. Könnt ihr die Änderungen praktisch umgehend sehen, nachdem ihr sie gepushed habt.<br />
<br />
Ich hoffe das hier war für einige von euch hilfreich. Versucht es einmal, ihr werdet schockiert sein, wie viel schneller es geht. Sobald ihr drin seid, läuft es ratzfatz. Photosheet hat vom Moment, als ich das Git Repository gestartet habe, bis zum fertigen Template in zwei Stunden geschrieben. Mit Overwrite hat es etwas länger gedauert, aber wenn ihr ein Template für euch alleine schreibt, braucht ihr das ja nicht.<br />
</div><div class="english">And that's it, basically.<br />
The process is really fast. Also while developing. Just include the css from the start. As soon as changes are pushed you will be able to see them. Photosheet was written within two hours, which is like more than half the time I needed when writing templates with CSS only.</div>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-34315182071014933372014-09-16T18:26:00.000+02:002015-10-26T15:14:18.023+01:00Padding Hack SASS ✤✤✤✤ & Faux Color Overlay Hover ✤✤Ich hab mich ja vor einer Weile in SASS verliebt. Hat eine Weile gedauert, ehe ich mich rangetraut habe und jetzt frage ich mich wirklich, wie ich CSS ohne SASS gesschrieben habe, es spart so viel Zeit! Heute bin ich über meine Mixins gegangen und habe etwas mit dem padding-Hack rumgespielt, wobei gleichzeitig noch dieser Faux-Overlay Effekt entstanden ist. Wie wir das machen, möchte ich euch heute zeigen. (Falls ihr SASS noch nicht kennt, checkt definitiv die <a href="http://sass-lang.com/" target="_blank">Website</a> aus und probiert es aus, es ist grandios!) Wenn ihr wollt, dass ich noch einen Einführungspost zu SASS schreibe, gebt bescheid. :)<br />
<br />
<i>I fell in love with SASS a while ago. It took me quite a while until I finally checked it out, but now I'm actually asking myself how I ever wrote CSS without it. It saves a ton of time! Today I want over my mixins and played aroung with the padding-hack, which resulted in this faux overlay effect on the images, I want to show you today. How to achieve this, is what I want to show you today. (If you don't know SASS yet, definitely check out the <a target="_blank" href="http://sass-lang.com">Website</a> and try it out, it is fantastic!) If you want me to write more of an introduction post on it, let me know :)</i><br />
<a name='more'></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigDdRhL1Q_3lpILu1-7NIet3ZhwixerAyYrbePpGgpFBuCuP7hjYMfAHDyPV4QxkGri2Ytty8i_EYt6XxGO3wifPNYbFxiX3xxkyr2hmZjEhVqGtrmflH-fvCMPmLf6w3oDTCJkOY8HINX/s1600/fauxoverlay.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigDdRhL1Q_3lpILu1-7NIet3ZhwixerAyYrbePpGgpFBuCuP7hjYMfAHDyPV4QxkGri2Ytty8i_EYt6XxGO3wifPNYbFxiX3xxkyr2hmZjEhVqGtrmflH-fvCMPmLf6w3oDTCJkOY8HINX/s1600/fauxoverlay.jpg" /></a><br />
<br />
<p data-height="300" data-theme-id="7132" data-slug-hash="Dbpgj" data-default-tab="result" data-user="bekreatief" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/Dbpgj/'>Dbpgj</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
<br />
<input type="radio" name="lang" id="english"><label for="english" class="buttonbg">English <i class="fa fa-angle-down"></i></label><input type="radio" name="lang" id="german" checked><label for="german" class="buttonbg">Deutsch <i class="fa fa-angle-down"></i></label><br />
<br />
<div class="german">Wir beginnen mit einem einfachen Markup. Eine Section, in der wir Container mit Links platzieren. Diese Links sind unsere Bild-Container. Für das richtige Verhältnis verwenden wir den padding hack (Höhe wird als 0 definiert, ein prozentuales padding unten sorgt dafür, dass das Verhältnis des Containers stimmt, der Link darin wird eingepasst und wir haben einen responsiven Container, dessen Verhältnis fix ist). Die Bilder werden dann als Hintergrundbild des Links definiert und gewissermassen in das richtige Verhältnis geschnitten. Für den Padding-Hack schreiben wir ein Mixin, dem wir drei Variabeln übergeben. Die Breite des div-containers in Prozent, sowie das Verhältnis, welches aus einer Breitenzahl und einer Höhenzahl besteht. Für den Link definieren wir die CSS ebenfalls in einem Extend-Only Selektor.<br />
Seht euch das Beispiel unten an. Verändert die Variabeln, um zu sehen, wie einfach es geht.</div><div class="english">We begin with simple markup. A section in which we place containers and links. The links are going to be our image containers. For the right aspect ratio, we will use the padding hack (height of the container will be defined as 0, a padding on the bottom will create a fluid container with a fixed aspect ratio). The Images will be definied as backgrounds of the links and thus, be cut to the right size. For the padding hack we write a mixin, with 3 variables. One for the container width and one each for the aspect ratio height and width. For the link's CSS we define an extend-only selector.<br />
Have a look at the example below. Check the variables to see how simple it is.</div><br />
<div data-height="500" data-theme-id="7132" data-slug-hash="epvkL" data-default-tab="css" data-user="bekreatief" class='codepen'><pre><code>/* PADDING HACK SASS
---------------------------------------------------------*/
//Variables
//-------------------------------------------------
$containerwidth: 30%;
$ratiowidth: 16;
$ratioheight: 9;
//Mixins
//-------------------------------------------------
@mixin paddinghack($containerwidth, $ratiowidth, $ratioheight){
// $containerwidth: width of the responsive container
// $imgwidth and $imgheight stand for aspect ratio you want to achieve (example: 16:9)
position: relative;
width: $containerwidth;
height: 0;
padding: (($ratioheight / $ratiowidth) * $containerwidth) 0 0 0;
}
// Extend Only
//-------------------------------------------------
%paddinghack{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
// SASS
//------------------------------------------------------------
div{
@include paddinghack($containerwidth, $ratiowidth, $ratioheight);
a{
@extend %paddinghack;
display: block;
background: {
image: url(http://th07.deviantart.net/fs71/PRE/f/2014/174/1/7/17a514b56717abed29512fddb462de82-d7nmo0f.png);
size: cover;
position: center;
}
}
}</code></pre><p>See the Pen <a href='http://codepen.io/bekreatief/pen/epvkL/'>epvkL</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p></div><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
<div class="german">Mit SASS können wir auch noch etwas mehr Mathematik machen. Haben wir zum Beispiel 3 Bilder, die wir nebeneinander platzieren wollen, auf voller Breite mit einem Rand zwischen den Bildern, aber ohne Rand links beim ersten und ohne Rand rechts beim letzten Bild, so können wir SASS die exakte Breite für uns berechnen lassen. Und das für jeden beliebigen Rand (irgendjemand da, der jetzt noch sagt SASS ist uncool?)</div><div class="english">With SASS we also have the possibility to do some more math. Let's say we have 3 images, we want to place next to each other, displaying them at full-width, with a margin inbetween, but not at the beginning or end. We can let SASS calculate the exact image width for us, with any margin we want. (somewhere still saying SASS is uncool?)</div><br />
<div data-height="400" data-theme-id="7132" data-slug-hash="wmtoK" data-default-tab="css" data-user="bekreatief" class='codepen'><pre><code>/* PADDING HACK SASS
---------------------------------------------------------*/
//Variables
//-------------------------------------------------
$margin: 1%;
$containerwidth: 100%;
$ratiowidth: 4;
$ratioheight: 3;
//Mixins
//-------------------------------------------------
@mixin paddinghack($containerwidth, $ratiowidth, $ratioheight){
// $containerwidth: width of the responsive container
// $imgwidth and $imgheight stand for aspect ratio you want to achieve (example: 16:9)
position: relative;
width: $containerwidth;
height: 0;
padding: (($ratioheight / $ratiowidth) * $containerwidth) 0 0 0;
}
// Extend Only
//-------------------------------------------------
%paddinghack{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
// SASS
//------------------------------------------------------------
section{
width: $containerwidth;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
div{
float: left;
box-sizing: border-box;
@include paddinghack(((100%-($margin*4))/3), $ratiowidth, $ratioheight);
margin: 0 $margin;
&:first-of-type{
margin-left: 0;
a{
background-image: url(http://th07.deviantart.net/fs71/PRE/f/2014/174/1/7/17a514b56717abed29512fddb462de82-d7nmo0f.png);
}
}
&:nth-of-type(2){
a{
background-image: url(http://th03.deviantart.net/fs70/PRE/f/2012/080/2/5/25bd377c1206148061f9bdcd8304f6a4-d4th6pk.png);
}
}
&:last-of-type{
margin-right: 0;
a{
background-image: url(http://th00.deviantart.net/fs71/PRE/i/2012/015/3/d/red_center_by_mynimi94-d4mgrp4.png);
}
}
a{
@extend %paddinghack;
display: block;
background: {
size: cover;
position: center;
}
}
}</code></pre><p>See the Pen <a href='http://codepen.io/bekreatief/pen/wmtoK/'>wmtoK</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p></div><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
<div class="german">Und den Faux-Overlay nenn ich so, weil wir keine Ebene über das Bild legen, sondern dem div-container eine Hintergrundfarbe geben und beim Hover einfach die Deckkraft des Bildes verringern, sodass der Eindruck entsteht, das Bild würde leicht eingefärbt. Und das ist alles :D</div><div class="english">An the faux overlay is called like that because we do not add a layer over the image, but give the underlaying div-container a background and on hover, decrease the opacity of the image, so that the color of the container is showing through, creating the illusion of a colored image. And that's all there is to it.</div><br />
<div data-height="300" data-theme-id="7132" data-slug-hash="FcIlA" data-default-tab="result" data-user="bekreatief" class='codepen'><pre><code>/* PADDING HACK SASS
---------------------------------------------------------*/
//Variables
//-------------------------------------------------
$fontcolor: #fff;
$linkcolor: complement(#d1aecf);
$hovercolor: darken($fontcolor, 40%);
$hovertint: $linkcolor;
$bgcolor: darken($linkcolor, 62%);
$margin: 1%;
$containerwidth: 50%;
$ratiowidth: 1;
$ratioheight: 1;
//Mixins
//-------------------------------------------------
@mixin paddinghack($containerwidth, $ratiowidth, $ratioheight){
// $containerwidth: width of the responsive container
// $imgwidth and $imgheight stand for aspect ratio you want to achieve (example: 16:9)
position: relative;
width: $containerwidth;
height: 0;
padding: (($ratioheight / $ratiowidth) * $containerwidth) 0 0 0;
}
// Extend Only
//-------------------------------------------------
%paddinghack{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
// SASS
//------------------------------------------------------------
body{
background: $bgcolor;
color: $fontcolor;
font:{
family: Roboto, Calibri, sans-serif;
size: 1em;
weight: 300;
}
}
section{
width: $containerwidth;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
div{
float: left;
box-sizing: border-box;
@include paddinghack(((100%-($margin*4))/3), $ratiowidth, $ratioheight);
margin: 0 $margin;
background-color: $hovertint;
&:first-of-type{
margin-left: 0;
}
&:last-of-type{
margin-right: 0;
}
a{
@extend %paddinghack;
display: block;
transition: 1s linear;
background: {
// image: url(imgURL) --> done with jQuery
size: cover;
position: center;
}
&:hover{
transition: .3s linear;
opacity: .6;
}
img{
display: none;
}
}
}
p{
position: fixed;
bottom: 3px;
right: 3px;
a{
text-decoration: none;
transition: .3s ease;
color: $linkcolor;
&:hover{
color: $hovercolor;
}
}
}</code></pre><p>See the Pen <a href='http://codepen.io/bekreatief/pen/FcIlA/'>Padding Hack SASS</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p></div><script async src="//codepen.io/assets/embed/ei.js"></script><br />
Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-88024557845864684522014-08-19T21:52:00.000+02:002014-08-19T21:52:37.998+02:00[BLOGGER] Widgetsection Under Any Post ✤✤✤Dieses Problem hat mich für eine ganze Weile beschäftigt. Wie um Himmels Willen bekommt man Widgets zwischen Posts. Das einzige, was ich herausfand war, dass man Ads zwischen zwei Posts platzieren konnte, doch wie man Gadgets zum Beispiel zwischen dem dritten und vierten Post platzieren konnte, war im WWW unauffindbar.<br />
Vor einer Weile hab ich begonnen mich näher mit JavaScript und jQuery zu beschäftigen und hatte dann plötzlich eine Idee, die mir geradezu zu einfach vorkam. Ich hatte schon Sorge, dass ich was nicht bedacht hatte, doch es funktioniert tatsächlich. Und weil ich so happy bin, möchte ich euch heute zeigen, wie es funktioniert.<br />
<br />
<i>It stayed with me for years, how the hell do you put widgets in between posts. Not after each one, but for example between the third and fourth post. I googled forever, but the only thing I knew after was that you could place Ads between posts, but how to put widgets between any kinds of posts was nowhere to be found.<br />
A while ago I started getting into JavaScript and jQuery und suddenly one day I had an idea which seemed almost to simple to not have been found before. I was afraid it wouldn't work, but it actually did and that's why I want to show you today, how you can achieve This.</i><br />
<a name='more'></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijFEy20vLPnI1L2a9boiTM-Y9fxUtGEoUgZHRgsOtYkT0BO-ltfMiuUGGyKHCHsSgk4BZpXSgK8gnE1M9sUt55gkL_4eX0W7bs1zJY4lgIG2_MU91IElQCOF1VpDRIflqLLl-If6Yl5HKj/s1600/square.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijFEy20vLPnI1L2a9boiTM-Y9fxUtGEoUgZHRgsOtYkT0BO-ltfMiuUGGyKHCHsSgk4BZpXSgK8gnE1M9sUt55gkL_4eX0W7bs1zJY4lgIG2_MU91IElQCOF1VpDRIflqLLl-If6Yl5HKj/s1600/square.png" /></a><br />
<br />
<input type="radio" name="lang" id="english"><label for="english" class="buttonbg">English <i class="fa fa-angle-down"></i></label><input type="radio" name="lang" id="german" checked><label for="german" class="buttonbg">Deutsch <i class="fa fa-angle-down"></i></label><br />
<br />
<div class="german">Am Anfang brauchen wir jQuery. Womöglich habt ihr das bereits in euren Blog integriert, falls nicht, kopiert das Script am Ende mit.<br />
Die Grundidee ist ganz einfach. Wir erstellen unterhalb der Blogspots eine neue Widget-Section, in die wir die Gadgets kopieren können, die wir zwischen den Posts haben wollen. Als nächstes fügen wir einen Container unter den dritten Post ein und in diesen Container verschieben wir den Inhalt der Widget-Section.<br />
<br />
Als erstes müssen wir also unsere Widget-Section schreiben. Dazu öffnet ihr das HTML, springt zum Widget Blog1, platziert euren Cursor und sucht dann nach <code class="language-markup"></b:section></code> Das erste Ergebnis nach Blog1 ist die schliessende Section der Blog-Section. Direkt darunter platzieren wir unsere neue Section.</div><div class="english">To begin with we'll be using jQuery so make sure you'll have that included, in case you haven't copy the link as well.<br />
The basic idea is the following, we create a widget section right underneath the blog section in which we add the widgets. Then we'll add a class to the third post and put a div-container under it. And then we just move the content of the widget-section into our new container.<br />
<br />
First we need to write the section. So open up your HTML, jump to the Blog Widget and put your cursor there. Then search for <code class="language-markup"></b:section></code> and the first result after the Blog Widget is the end of the section. Underneath it, we'll write our new section.</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfyT5bYRAfA-h18SAv5B4MZ5HyT6WwhzkYZf78ZtRiEBLWkvcz97ISo1y8jpHokqv24CKAJHV013ZuDRoxayh6FTR1RlJA_jhO0jUNd36GRgt18S8q7Yk2FeFIPVks0V0GRsrSUgNMwyzQ/s1600/1.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfyT5bYRAfA-h18SAv5B4MZ5HyT6WwhzkYZf78ZtRiEBLWkvcz97ISo1y8jpHokqv24CKAJHV013ZuDRoxayh6FTR1RlJA_jhO0jUNd36GRgt18S8q7Yk2FeFIPVks0V0GRsrSUgNMwyzQ/s1600/1.png" /></a><br />
<br />
<pre><code class="language-markup"><b:section class='between' id='between' showaddelement='yes'>
</b:section></code></pre><br />
<div class="german">Wenn wir das haben können wir unter Layout ein Gadget einfügen und uns das mal ansehen.</div><div class="english">After we've done that we can add a Widget in the layout section and have a look at the result.</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGXswI9i7v4n9NNE2bCewoY8nZb_Tq3MNAk8OxGb9sCm6dRxJ3o-idjede7mihHzY8r7l8i2HUgvbjOLDs5W9oSDnDx2L-pOpNow_52BuBzaeMBK6BMtXkPU8EW8XJdKbPO1Bmtkl36OK/s1600/2.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGXswI9i7v4n9NNE2bCewoY8nZb_Tq3MNAk8OxGb9sCm6dRxJ3o-idjede7mihHzY8r7l8i2HUgvbjOLDs5W9oSDnDx2L-pOpNow_52BuBzaeMBK6BMtXkPU8EW8XJdKbPO1Bmtkl36OK/s1600/2.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQxP1ZCb3E1yiglTTYUieCw7AWEldfhTkfB4EfugiTCpBeB_wWyfAPpUbpM9hlssFO_c3_6PWHTT-w0o3zd5wAlr4Tgwwib1YyZiSWSHjZT_URAC5xYUVHs1b7ReIDZaf5nK94R7-a8YK/s1600/4.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQxP1ZCb3E1yiglTTYUieCw7AWEldfhTkfB4EfugiTCpBeB_wWyfAPpUbpM9hlssFO_c3_6PWHTT-w0o3zd5wAlr4Tgwwib1YyZiSWSHjZT_URAC5xYUVHs1b7ReIDZaf5nK94R7-a8YK/s1600/4.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhob3cXqmIbZ7X-UwcgBY8PLEINyf85jEjDZHKgnk82py1FhofaktRSPePy2K_gFSHltJ601CI4aTGq98TPAhtchKBA-DgdzQ32JA5_NUxclHjfe70S6lbSHBrrEXiQoFIlzenYqs1jNFiu/s1600/5.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhob3cXqmIbZ7X-UwcgBY8PLEINyf85jEjDZHKgnk82py1FhofaktRSPePy2K_gFSHltJ601CI4aTGq98TPAhtchKBA-DgdzQ32JA5_NUxclHjfe70S6lbSHBrrEXiQoFIlzenYqs1jNFiu/s1600/5.png" /></a><br />
<br />
<div class="german">Das ist jetzt ganz am Ende. Nun suchen wir nach <code class="language-markup"></body></code> und fügen oberhalb davon unser Script ein. Und schon haben wir nach dem dritten Post unser Widget. Wollt ihr es an einer anderen Stelle haben, müsst ihr die Zahl hier <code class="language-javascript">.date-outer:eq(2)</code> verändern. Einfach -1 rechnen.</div><div class="english">So now it's under all of the posts. We search for <code class="language-markup"></body></code> and place the script above that. And we moved our Widget! If you want to put it somewhere else, just change the number here <code class="language-javascript">.date-outer:eq(2)</code> by taking your post number and calculating -1,</div><br />
<pre><code class="language-markup"><!-- jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
<!-- Widget Area Between Posts -->
<script>
$(document).ready(function(){
$(".date-outer:eq(2)").addClass("thirdpost");
$( "<div class='mywidgetcontainer'/>" ).insertAfter( ".thirdpost" );
var widgetcontent = $("#between").contents();
$(".mywidgetcontainer").append(widgetcontent);
$("#between").empty;
});
</script> </code></pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNfRXCapvmNPZagqJ_abpSkbFhwWBmwtGScl-CeWqz6I6COE2sOpu5m3OzZ7FHTNa5N2lMNhXSobB-_SraAU2ZPBxT-tyUqx90RP-jY9R9qjovfKn5lLRtJ2pKEND9xek3zNTcTuKVYwdt/s1600/finished.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNfRXCapvmNPZagqJ_abpSkbFhwWBmwtGScl-CeWqz6I6COE2sOpu5m3OzZ7FHTNa5N2lMNhXSobB-_SraAU2ZPBxT-tyUqx90RP-jY9R9qjovfKn5lLRtJ2pKEND9xek3zNTcTuKVYwdt/s1600/finished.png" /></a>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-60585618642274311672014-07-31T19:31:00.001+02:002014-07-31T19:31:43.356+02:00[Blogger] Take certain Post out of the stream (and have them somewhere else) ✤✤(✤)Ich wurde gefragt, wie man es macht, dass man bestimmte Posts aus dem Kontext nimmt, sie also nicht auf der Startseite anzeigt, dafür aber irgendwo anders anzeigen kann, nicht nur auf der Postseite selbst, sondern sozusagen "mehrere einzelne Blogs" hat. Das ist eigentlich ziemlich einfach und geht auch gar nicht so lange. Was wir machen ist mit einem einzelnen Label zu arbeiten, welches wir hidden nennen. Damit können wir beliebige Posts aus dem Kontext nehmen. Um dann unter den versteckten Labels noch zu sortieren, sortieren wir dann in der URL nach bestimmten Labels.<br />
<br />
<i>I was asked, how you take out certain posts out of the context, so that they will not be displayes on the index page, but still be showing on item and label pages, so you kinda get a "second blog". That's pretty simple and it takes almost no time. What we do is work with a label, to which we'll add a bit of jquery.</i><br />
<a name='more'></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7OrvVrjh6mV14Qgog0TVpW2Tcli1Ss24lvzDYBFFb9tUNlOYuhjj3Y1gTSIs5N5kp2lAzAM4hlnRiY4ICmqQTfEm-HPA82Gx6677ukzeTh_8UNHY6K-5EkeJLc3iKhr9Z-YzOwVB-Dw1/s1600/title.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7OrvVrjh6mV14Qgog0TVpW2Tcli1Ss24lvzDYBFFb9tUNlOYuhjj3Y1gTSIs5N5kp2lAzAM4hlnRiY4ICmqQTfEm-HPA82Gx6677ukzeTh_8UNHY6K-5EkeJLc3iKhr9Z-YzOwVB-Dw1/s1600/title.png" /></a><br />
<br />
<input type="radio" name="lang" id="english"><label for="english" class="buttonbg">English <i class="fa fa-angle-down"></i></label><input type="radio" name="lang" id="german" checked><label for="german" class="buttonbg">Deutsch <i class="fa fa-angle-down"></i></label><br />
<br />
<div class="german"><h2>1. Vorbereitung</h2>Okay, wir arbeiten hier mit kondizionalen Tags und etwas jQuery.<br />
Bevor wir das Script schreiben können, müssen wir unseren Blog untersuchen.<br />
Dafür bracht ihr einen Browser wie Firefox oder Chrome, mit dem ihr das HTML dahinter ansehen könnt.<br />
Öffnet euren Blog, und macht rechtsklick auf einem der Labels. Wählt dann Element untersuchen, um euch den Code anzusehen.<br />
</div><div class="english"><h2>1. Prepping</h2>Okay, we work with conditional tags and jQuery.<br />
Before we start we need to inspect our blog.<br />
For that you'll need a browser capable of looking through the Code.<br />
So open up your blog, search for the labels and right click on one of them, to see the code.<br />
</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZid5ccQvy_2Q_Yb-Ze3P4fnKBtU7CZj61H6tENqjY9JXOJM8VhFhQkKdVmb1H32vfIkHmNpS-X1OqNFwZy8w0M-UMQFlCOmPxicbbO2SZ7cgtcrZdJ4kwG-BXc4qS9KmhXzXWuyG5NcvO/s1600/1.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZid5ccQvy_2Q_Yb-Ze3P4fnKBtU7CZj61H6tENqjY9JXOJM8VhFhQkKdVmb1H32vfIkHmNpS-X1OqNFwZy8w0M-UMQFlCOmPxicbbO2SZ7cgtcrZdJ4kwG-BXc4qS9KmhXzXWuyG5NcvO/s1600/1.png" /></a><br />
<br />
<div class="german">Der Code klappt auf. Was ihr braucht ist die Klasse des Label-containers. Im Falle eines Stadartlabel-containers ist das <code class="language-css">.post-labels</code> ein einzelnes Label sprechen wir also mit <code class="language-css">.post-labels a</code> an. Das merken wir uns.<br />
Was wir danach tun ist, die einzelnen Elemente nach oben durchgehen, bis wir den container gefunden haben, bei Blogger ist das typisch unlogisch <code class="language-css">.date-outer</code> auch das merken wir uns.</div><div class="english">The Code will pop open. What we need is the class of the label-container. In Case of a blogger standard layout, it'll be <code class="language-css">.post-labels</code>. To call a single label we would then use <code class="language-css">.post-labels a</code>. We'll memorize that.<br />
What we then do is follow the containers up, finding the main post container. In typical blogger not-at-all logic it has the name <code class="language-css">.date-outer</code>, we'll rememeber that one as well.</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ3aRbig3_bZa5xVFwW-82C2OKbBLlPnLCKi5qdB_mBh3nl-lca_HmH5xkE8Ts5N7sjXxM0Xs8TtOVrG78z6KfYlJ21VcdlhViXUHqyZdNjmqpQduUy6Ixth4lWVkoOYpCf6mgRBIj15dO/s1600/2.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ3aRbig3_bZa5xVFwW-82C2OKbBLlPnLCKi5qdB_mBh3nl-lca_HmH5xkE8Ts5N7sjXxM0Xs8TtOVrG78z6KfYlJ21VcdlhViXUHqyZdNjmqpQduUy6Ixth4lWVkoOYpCf6mgRBIj15dO/s1600/2.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3MNuwOxtBJNVrdgZk8PRxYALQbutEPgOLr_O91pB_BkdGYy3tozL2qYRWyXRfTSy7eYomoMdrznYxEin_chpMMsXzPpgIdc3HTP3z0lkICq7mMnW27KocCRJz_ftKeUYNFg4XOG-0mDe0/s1600/3.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3MNuwOxtBJNVrdgZk8PRxYALQbutEPgOLr_O91pB_BkdGYy3tozL2qYRWyXRfTSy7eYomoMdrznYxEin_chpMMsXzPpgIdc3HTP3z0lkICq7mMnW27KocCRJz_ftKeUYNFg4XOG-0mDe0/s1600/3.png" /></a><br />
<br />
<h2>2. Script</h2><div class="german">Okay, kommen wir zum Script, welches im Grunde ganz einfach ist. Was wir tun ist, die labellinks nach "hidden" zu durchsuchen. Das ist das Label, welches wir hinzufügen werden. Und wenn wir das gefunden haben, gehen wir zum entsprechenden Post-Container und sagen ihm, dass er sich auf allen index-Seiten verstecken soll. Weil die Label-Suchseiten aber leider auch index-Seiten sind, müssen wir dem Post bei den Labelseiten sagen, dass er doch angezeigt werden soll. Und weil Blogger scheinbar keine Möglichkeit hat, konditionale Tags zu verbinden, müssen wir das in zwei separaten Scripts machen.<br />
Das ganze ist jQuery, also müssen wir das noch hinzufügen. Falls ihr das schon habt, müsst ihr das nicht mehr reinkopieren.<br />
<br />
Für das Script suchen wir nach <code class="language-markup"></body></code> und fügen oberhalb davon den Code ein.</div><div class="english">The script is basically very simple. What we do is search the labellinks for "hidden" which is the label we'll add. As soon as we found it, we jump to it's parent post-container and tell it to hide on every index page. But since the label search pages are index pages as well (and blogger's conditional tags seem not to be able to be used in combination) we add a second script where we tell the container to show itself to the world when on a label search page. And since it's jQuery you need to add the library. If you already use it, you do not need to add it a second time.<br />
<br />
For the script we search our code for <code class="language-markup"></body></code> and place the script above that.</div><br />
<pre><code class="language-markup"><!-- jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
<!-- hide posts tagged "hidden" on index pages -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$(".post-labels a").filter(":contains('hidden')").parents('.date-outer').hide();
});
//]]>
</script>
</b:if>
<!-- display posts tagged "hidden" on Label pages -->
<b:if cond='data:blog.searchLabel'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(".post-labels a").filter(":contains('hidden')").parents('.date-outer').show();
});
//]]>
</script>
</b:if></code></pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSxdx1ZfKEdQi3nmu9LhUjppglYYEFWyy6T_C-tjd-HNASkMgte9MhRbDT0wzxYtWBCo9rBaYsjtItW6KWlu7gyAGkfVxn6jFPu1I1Pe3XaK0sHUeLwdciu1_68XTkATTIbPTBGNTksTBx/s1600/4.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSxdx1ZfKEdQi3nmu9LhUjppglYYEFWyy6T_C-tjd-HNASkMgte9MhRbDT0wzxYtWBCo9rBaYsjtItW6KWlu7gyAGkfVxn6jFPu1I1Pe3XaK0sHUeLwdciu1_68XTkATTIbPTBGNTksTBx/s1600/4.png" /></a><br />
<br />
<div class="german"><h2>3. Versteckter Post</h2>Nun veröffentlichen wir unseren Post. Und fügen unter unseren Labels ein <i>hidden</i> ein. Sobald das veröffentlich ist, sehen wir den Post nicht auf der Startseite.<br />
Suchen wir aber nach einem Label, welches unser versteckter Post trägt (dafür <b>http://deineURL.blogspot.com/search/label/LABELNAME</b> eingeben), wird es angezeigt.<br />
<b>WARNUNG</b> Blogger lädt die Posts, bevor es sie entfernt. Das heisst der Post hinterlässt einen leeren Platz. Habt ihr also beispielsweise 8 Posts auf einmal und die letzten 8 Posts sind versteckt, werded ihr eine komplett leere Seite haben. Leider habe ich bisher kein Workaround gefunden, also würde ich vielleicht mal mit infinte scrolling dahinter, oder einfach das Datum der Posts verändern, sodass es nicht so drastisch auffällt, wenn ihr viele versteckte Posts haben wollt.</div><div class="english"><h2>3. Hidden Post</h2>Now we publish out post. When including the tags you want to include the label <i>hidden</i>. As soon as we publish our post, it will not be displayed on the index page. But if we search for a label that our hidden post contains (just enter <b>http://yourURL.blogspot.com/search/label/LABELNAME</b>), we can see it.<br />
<b>WARNING</b> Blogger will still load the post before removing it. Which means it will leave an empty spot on your index page. So if you showcase 8 posts per page and you have 8 hidden posts right after each other, you will end up having a blank page. I have not found a workaround, so I suppose if you publish a lot of hidden posts at once, you may want to add infinite scrolling or change that date of your posts.</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBMp42lx7aF8wbpNKiE0H-F92CICit8Vl9B4eEk-9gsVflwDwRYU9GZviINixSDZBxRfBlCq-JPWLYkBWKvf9H0Kl2ySRMflgdkrSRH0mLC6LwOpL76NGxZaXj-Y_00H9frVM_JJsva7Z5/s1600/5.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBMp42lx7aF8wbpNKiE0H-F92CICit8Vl9B4eEk-9gsVflwDwRYU9GZviINixSDZBxRfBlCq-JPWLYkBWKvf9H0Kl2ySRMflgdkrSRH0mLC6LwOpL76NGxZaXj-Y_00H9frVM_JJsva7Z5/s1600/5.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO2axgNVJi9qpBUL-A5VBlV-EX_jZA4jJHKTVxc9P0PMHqYNdKhk35ZMIRlgKgVaHlX1fmNL384IXGubxpsekBppcK4zzq_kMI8ISuTQw6Wjpojeob3vXDGSHabgv7sd8cQe0f7AVo-eNo/s1600/6.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO2axgNVJi9qpBUL-A5VBlV-EX_jZA4jJHKTVxc9P0PMHqYNdKhk35ZMIRlgKgVaHlX1fmNL384IXGubxpsekBppcK4zzq_kMI8ISuTQw6Wjpojeob3vXDGSHabgv7sd8cQe0f7AVo-eNo/s1600/6.png" /></a><br />
<br />
<h2>4. Details</h2><div class="german">Es ist nur ein Detail aber ich finde ein hidden label einfach nicht schön, also wollte ich es entfernen. Das geht ganz schnell, einfach ein Script indem wir wieder nach dem label suchen und das dann verstecken (in keinem konditionalen Tag, wir wollen es überrall verstecken). Aber was als Resultat herauskam waren zwei Kommas nacheinander. Die Kommas sind leider keine eigenen Elemente, also muss man das schnell machen. Ich habe es einfach in einem span-tag gepackt und dann beim script noch das folgende Element auch ausgeblendet. And that does the job!</div><div class="english">It's just a detail but I just don't like the look of a hidden label in my list. So I wanted to remove it, with a simple script, but ended up not removing the comma. The comme is not in a container so you have to add some span or something around it. As soon as it is wrapped, we can hide it in the script. And then the job is done!</div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBS14h6lbgT9SDjAogG12OG4__a9JeG6ljJcxYy7EHXWMUBRAfLDnTYjaDzLlUQsbrkvhLEu-wpplHD1isstQ1XKxanE27F65WSf7AngSfwPTonz22RKs-I2Mcr5rw8FeMyT_Cr5izy2U/s1600/7.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBS14h6lbgT9SDjAogG12OG4__a9JeG6ljJcxYy7EHXWMUBRAfLDnTYjaDzLlUQsbrkvhLEu-wpplHD1isstQ1XKxanE27F65WSf7AngSfwPTonz22RKs-I2Mcr5rw8FeMyT_Cr5izy2U/s1600/7.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK7xXxnKRjQfV0YUwdjRYsNZxNw6rsvV7RMs-oh5lvBzFwqGCnvxwv2-9WmmjCJyNnnzlGI_u9Ihm7BPKj1iKMYCUjDkR2XF8iL2HDuoZ4X4-iKLZMfB8DDIZR1pEMsXccXtSjxTWTCZFd/s1600/8.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK7xXxnKRjQfV0YUwdjRYsNZxNw6rsvV7RMs-oh5lvBzFwqGCnvxwv2-9WmmjCJyNnnzlGI_u9Ihm7BPKj1iKMYCUjDkR2XF8iL2HDuoZ4X4-iKLZMfB8DDIZR1pEMsXccXtSjxTWTCZFd/s1600/8.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsruMwTztjA6vSowez8HnnsTOfr_aum4LX621EOE3x-rjU27DyzwfhIvuAq9sXEkYWuJzaWnYrQBFWKdFSOn6QgpXB5fZVkpjvHeETJ9373ZopFwQxWR6Jee8rZJWHGHM066pZc0bY_GE8/s1600/9.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsruMwTztjA6vSowez8HnnsTOfr_aum4LX621EOE3x-rjU27DyzwfhIvuAq9sXEkYWuJzaWnYrQBFWKdFSOn6QgpXB5fZVkpjvHeETJ9373ZopFwQxWR6Jee8rZJWHGHM066pZc0bY_GE8/s1600/9.png" /></a><br />
<br />
<div class="german">Das Script fügen wir unterhalb der anderen ein.</div><div class="english">We add the script underneath the other ones.</div><br />
<pre><code class="language-markup"><!-- hide "hidden" from label list -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
$(".post-labels a").filter(":contains('hidden')").hide().next().hide();
});
//]]>
</script></code></pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-yNMhoBUjH_ulJ5Iyyucqk30hjMYYcay-lBfjOY1oo1jn2QiiFuVPLplvKbc7e-_JOTv8OM9TTi72FDOQh2BY_w-1VXTKmofUjxJrBuPqg1Rv1Ejpfp3lhY-zrF43W0cxOdjM-YgRMtI/s1600/10.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-yNMhoBUjH_ulJ5Iyyucqk30hjMYYcay-lBfjOY1oo1jn2QiiFuVPLplvKbc7e-_JOTv8OM9TTi72FDOQh2BY_w-1VXTKmofUjxJrBuPqg1Rv1Ejpfp3lhY-zrF43W0cxOdjM-YgRMtI/s1600/10.png" /></a><br />
<br />
<br />
Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-20916102376992921572014-07-18T00:30:00.001+02:002014-07-18T00:37:37.776+02:00CSS Language Switcher (using the :checked-Hack) ✤✤✤Hallo zusammen :)<br />
Das Ziel des heutigen Tutorials könnt ihr gleich in diesem Post sehen. Es geht darum die Sprache mithilfe eines Buttons zu wechseln.<br />
Ich wurde gefragt, wie man das denn machen kann. Anfangs wollte ich mit JavaScript dahinter, hab mich dann allerdings für den <b>:checked-Hack</b> entschieden, der auf das Script verzichtet und einen alles mit CSS lösen lässt.<br />
Ich find die Idee eigentlich ganz sauber, ist wahrscheinlich angenehmer zu als beides parallel, ich werde das also wahrscheinlich jetzt für den Tutorialteil mal beibehalten. Gebt mir Bescheid, ob ihr's so besser findet.<br />
<br />
<i>Hey there :)<br />
The result of the tutorial of today can be seen in this post. It's about changing the language with a button.<br />
I was asked how this can be achieved. At the beginning I wanted to go with jQuery, but then I decided to go with the <b>:checked-Hack</b>, which does not require javascript and actually works with CSS only.<br />
I like the idea for it's "cleanness" in the result, since it's probably more comfortable to read, so I may keep the idea. Tell me if you like it better like this.</i><br />
<a name='more'></a><br />
<input type="radio" name="lang" id="english"><label for="english" class="buttonbg">English <i class="fa fa-angle-down"></i></label><input type="radio" name="lang" id="german" checked><label for="german" class="buttonbg">Deutsch <i class="fa fa-angle-down"></i></label><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwUlbun2eyJfWsWOMSrWeRbVv5V-gAed4_slZMzwqs1cyr8Df091iRJbQwPR0STPlqzloqCt0sLmrFM08gtbnehY9LwVDQmoWFVNqcMCB7MjSqLfWhjdvYYLRFbgoSVOFH7FF8Iu4VONOv/s1600/switch.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwUlbun2eyJfWsWOMSrWeRbVv5V-gAed4_slZMzwqs1cyr8Df091iRJbQwPR0STPlqzloqCt0sLmrFM08gtbnehY9LwVDQmoWFVNqcMCB7MjSqLfWhjdvYYLRFbgoSVOFH7FF8Iu4VONOv/s1600/switch.jpg" /></a><br />
<div class="german"><h3>Script Idee</h3>Die Grundidee, die ich hatte, war es ein Script zu schreiben, das ähnlich funktioniert, wie mein <a href="http://bekreatief.blogspot.com/2012/08/java-ein-ausklappen.html" target="_blank">ausklappbarer Container</a> (erstes JS-Tut, das ich je geschrieben habe), nur mit einem etwas schöneren Effekt und einem simpleren Script, das in etwa so aussah:</div><div class="english"><h3>Script Idea</h3>The first idea I had was to write a script that opened a container when a button was pressed, including a pretty effect,which looked something like this:</div><br />
<p data-height="268" data-theme-id="7132" data-slug-hash="LIEHx" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/LIEHx/'>Swing Hide and Reveal</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
<h3>HTML</h3><div class="german">Aber dann schrieb ich für die Arbeit ein Framework mit Tabs und dachte, dass ich das eigentlich auch für dieses Problem verwenden könnte. Was wir eigentlich machen, ist, zwei Radio-Buttons zu verwenden. Sobald der eine Radio-Button ausgewählt ist, machen wir den Inhalt in der einen Sprache sichtbar und blenden den anderen aus und das selbe machen wir dann noch umgekehrt. Dem Radio-Button geben wir ein Label, welches dann zu unserem Schalter wird.</div><div class="english">But then I was writing a framework with tabs using the :checked-hack and I though that I could use it for this problem. What we basically do is use radio-buttons. When A radiobutton is checked, we will display the content in the language we want and hide the other language, and the other way round. We add a label to our radiobutton which will become our toggle.</div><br />
<iframe width="100%" height="400px" src="http://dabblet.com/gist/c10477b867319968b87d"></iframe><br />
<br />
<div class="german">Für die Radio-Buttons verwenden wir IDs, sie sind unsere klar identifizierten Toggles, wenn wir den Inhalt in Container packen, verwenden wir Klassen, da wir den Content aufteilen können in mehrere Container. Das macht dann Sinn, wenn man zum Beispiel Bilder verwendet. Schliesslich wollen wir die nicht zwei Mal einbinden müssen, sondern nur einmal.</div><div class="english">We use IDs for the buttons, because there are only gonna be these two. For the content containers we will use classes, because we can split the content into multiple containers. This makes sense if we use for example images. They will be needed for both languages and we don't want to put them in twice.</div><br />
<h3>Toggling</h3><div class="german">Nachdem wir das haben, fügen wir das ganze toggling ein. Wenn ihr euch das iframe unten anseht, könnt ihr sehen, dass es im Grunde funktioniert. Klickt ihr auf Englisch, wird der engliche Container angezeigt, klickt ihr auf Deutsch, zeigt es euch den deutschen an.<br />
Das ganze ist natürlich noch nicht wirklich ansprechend, und deswegen muss es noch gestyled werden.</div><div class="english">After that we add the functionality. If you take a look at the iframe below, you can see that the effect works. if you click on English the english container opens up and if you click on Deutsch the german one opens up. Still it is not really appealing yet, so we need to add some more CSS.</div><iframe width="100%" height="500" src="http://dabblet.com/gist/597e6b1b1d0000cec65b"></iframe><br />
<br />
<h3>CSS</h3><div class="german">Ich hab euch zwei fertige Beispiele gebaut. Einmal haben wir ein Beispiel ohne Schnickschnack, einfach mit Style. Dazwischen ein Bild eingebaut, damit ihr sehen könnt, dass es mit mehreren containern funktioniert. Beim zweiten habe ich noch einen fade-In-Effekt für euch. Das ist mit <a href="http://daneden.github.io/animate.css/">animate.css</a> gemacht und funktioniert einwandfrei in jedem Browser ausser meinem geliebten Firefox, der streikt (sogar Safari und <b>IE</b> kriegens hin!) Aber ich find den Effekt ganz schön.<br />
Und dann habt ihr es geschafft. Eine Sprachsteuerung ganz mit CSS :D</div><div class="english">I have two finished examples for you. One just a "plain" one with just element styling, using an image so you can see it does work with multiple content containers. and then I did a second one with a fade effect, using <a href="http://daneden.github.io/animate.css/">animate.css</a>. This does work on every browser (even Safari and <b>IE</b>!) but on Firefox. It only loads my animation at the start and not when toggling. But I still like the effect and wanted to share it with you.<br />
And then you did it. A language Switcher wit CSS only.</div><br />
<p data-height="268" data-theme-id="7132" data-slug-hash="eEAwc" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/eEAwc/'>CSS Language Switch (with image)</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
<p data-height="268" data-theme-id="7132" data-slug-hash="Filry" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/bekreatief/pen/Filry/'>CSS Language Swith (with animation)</a> by Myri (<a href='http://codepen.io/bekreatief'>@bekreatief</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
<style>
/* hide radiobutton */
input[type=radio] {
opacity:0;
}
label {
cursor: pointer;
margin: 0px 10px;
opacity: .5;
}
/* Display Toggling */
#english:checked ~ .english{
display: block;
}
#english ~ .english{
display: none;
}
#english:checked ~ .german{
display: none;
}
#german ~ .german{
display: none;
}
#german:checked ~ .english{
display: none;
}
#german:checked ~ .german{
display: block;
}
#german:checked+label,
#english:checked+label{
opacity: 1;
}
#german:checked+label i,
#english:checked+label .fa{
display: none;
}
</style><br />
Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-20692150759312608832014-07-03T13:07:00.000+02:002015-10-26T15:14:18.001+01:00Simple Parallax Effect ✤✤✤✤Leute, ihr könnt euch niccht vorstellen, was für ein Chaos es war, bis ich diesen Post hier fertig hatte.<br />
Ich wollte mal wieder ein Video machen, hab alles schön gefilmt. Der Teil vor der Pause war okay und dann hat mein Programm entschieden, dass es meinen Laptop und den externen Monitor beide auf ein Verhältnis von 16:9 bringen will (obwohl ich gesagt habe <b>nur</b> Bildschirm 1). Wie auch immer, ich habe dann einfach einen Tag später noch einmal gefilmt, sodass ich euch jetzt trotzdem das Video präsentieren kann.<br />
Worum geht es? Um Parallax.<br />
Wahrscheinlich habt ihr schon die schönen Seiten gesehen, die parallaxes Scrolling einsetzen, bei denen Animationen ablaufen, sobald ihr runter scrollt. Parallax kann man super für Storytelling einsetzen, aber auch "subtile" Effekte peppen eine Seite auf.<br />
Um so einen "subtilen" Effekt geht es heute.<br />
<a name='more'></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZq6WrkkZuMuIs2F5lSid4Rz6DteM8vXsaV_0gbuKJE1I7icKzLSjiKZEf9I8jmxSjTAhhJA1uku7FVVzQfsgHxwmS8zqZA7hIACxMOSautJXqLzWpGrQV6DYAJvtE9yxMRfGnsKrxvOWI/s1600/parallax_faster.gif" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZq6WrkkZuMuIs2F5lSid4Rz6DteM8vXsaV_0gbuKJE1I7icKzLSjiKZEf9I8jmxSjTAhhJA1uku7FVVzQfsgHxwmS8zqZA7hIACxMOSautJXqLzWpGrQV6DYAJvtE9yxMRfGnsKrxvOWI/s1600/parallax_faster.gif" /></a><br />
<br />
Was wir dafür benutzen ist Skrollr. Ein super Plugin, basierend auf Vanilla JS, also kein jQuery von Nöten. Das Plugin kann extrem viel, es lohnt sich definitiv das auszuprobieren, ansonsten braucht ihr nichts ausser einem Bild und Editor. Ich benutze Brackets (absolut tollster Editor, wenn ihr HTML und CSS schreibt (und auch sonst ^^)), welches Live-Preview enthält. Sehr cool, um zu sehen, was man so macht, während man es macht.<br />
<br />
Ansonsten ziemlich basic.<br />
Skrollr wird mit data-Attributen beschrieben, man baut es im HTML ein und gibt zwei Punkte an. Anfang und End-punkt. Der ganze Rest wird vom Plugin erstellt. Keine keyframes von Nöten, der absolute Traum, wenn man Animationen mag aber vor der ganzen Schreibarbeit zurückscheut.<br />
<br />
Ihr könnt euch das <a href="http://bekreatief.github.io/demo/parallax_demopage/" class="buttonbg">Demo</a>, aber auch gerne den <a href="https://github.com/bekreatief/bekreatief.github.io/blob/master/demo/parallax_demopage/index.html" class="buttonbg">Code</a>.<br />
<br />
Ziemlich genau so, würde man das ganze auch in einem Blogger-Blog einbauen, wollt ihr ein Tutorial dazu haben, meldet euch :)<br />
<br />
Gehosted wird das ganze auf GitHub, wie das geht seht ihr im Video auch noch.<br />
<br />
<div class="video_container"><iframe width="640" height="360" src="http://www.youtube.com/embed/OjEZ0JLWB7M" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<style>
.video_container{
position: relative;
width: 100%;
padding: 56.25% 0 0 0;
height: 0;
}
.video_container iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}
</style>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com2tag:blogger.com,1999:blog-1589905134039127183.post-31967687073233785632014-06-17T22:35:00.000+02:002015-10-26T15:14:18.018+01:00[JS] Turn off the lights button Dass ich und JavaScript uns nicht besonders gut verstehen, habe ich glaub ich schon ein paarmal erwähnt. Trotzdem versuche ich ja in letzter Zeit so bisschen damit zu arbeiten. Heute bei der Arbeit musste ich einen Turn off the lights button schreiben und habe festgestellt, dass kein Script das gemacht hat, was ich wollte. Irgendwie hab ich mir dann aus sechs verschiedenen Scripten selbst was zusammengebastelt, dass dann am Ende das getan hat, was ich haben wollte. Und weil ich eigentlich gar nicht sooo viel haben wollte, sondern eigentlich nur das, was in den Kommentaren der jeweiligen Posts auch gefragt wurde (und dann eigentlich nie beantwortet wurde...) habe ich beschlossen meinen Button mit euch zu teilen :)<br />
<br />
<i>Me and javaScript haven't really been best friends. that's a fact most of you probably will now about. Still, I try to get a little closer to it, and try writing some simpler scripts. Today at work I had to create a turn off the lights button and realized that all over the internet I could not find one script that did what I wanted. So I had to mix about six different ones until I got the result I was looking for. And since I did not have wishes like noone else but had the same questions usually asked in the comment section of each of the tutorials I decided to share my script with you.</i><br />
<br />
<a name='more'></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwBXlMib25_2sYZryyetwCSph0PCfeSDCVSFeNyNi0aFQRU71fhspxPTnr73MAAtMs0GyodwpmgkRRruX44A6VwvgI98rREOYxFUIP4rzUjAWtqo9g4ucIiWIF9NKP3E9p6R306Z5yi-R/s1600/turn_off.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwBXlMib25_2sYZryyetwCSph0PCfeSDCVSFeNyNi0aFQRU71fhspxPTnr73MAAtMs0GyodwpmgkRRruX44A6VwvgI98rREOYxFUIP4rzUjAWtqo9g4ucIiWIF9NKP3E9p6R306Z5yi-R/s1600/turn_off.png" /></a><br />
<br />
Damit ihr euch das ganze live ansehen könnt, habe ich ein <a class="buttonbg" href="http://bekreatief.github.io/demo/turn_off_the_lights/day.html" target="_blank"><i class="fa fa-external-link"></i> Demo</a> geschrieben, welches das Ganze veranschaulicht.<br />
<br />
<i>To visualize I wrote a <a class="buttonbg" href="http://bekreatief.github.io/demo/turn_off_the_lights/day.html" target="_blank"><i class="fa fa-external-link"></i> Demo</a> for you to look at.</i><br />
<br />
<h2>Markup</h2>Okay, das grundlegende Markup sieht wie folgt aus.<br />
Wir haben ein Video, das wir mithilfe eines iframes einbinden, dieses fügen wir in einen Container ein, dort in unserem Seitencode, wo wir's haben wollen.<br />
Am Ende des Codes fügen wir dann noch einen leeren Container ein, dem wir die ID <b>shadow</b> geben. Das wird unser ausgeschaltetes Licht. Weiter fügen wir unten noch jQuery ein, damit machen wir das ganze nämlich.<br />
Und selbstverständlich darf unser Toggle nicht fehlen. Ihr könnt einen Button nehmen, ich habe einen Link genommen, der buchstäblich nirgends hinführt (kein href), weil ich die CSS dafür schon geschrieben hatte und er gleich aussehen sollte, wie die "richtigen" Links, die neben ihm stehen.<br />
jQuery müsst ihr entweder runterladen und hosten, oder ihr verwendet den <a href="https://developers.google.com/speed/libraries/devguide?hl=de#jquery" target="_blank"><i class="fa fa-external-link"></i> Google Link</a><br />
<br />
<i>Okay, the basic markup looks like this.<br />
We have a video which we embed in an iframe, which we put in a container.<br />
At the end of our whole markup we add another empty container to which we add the ID <b>shadow</b>. This is the turned off light. Also we do include jQuery, that's what we will be using.<br />
And of course we need a toggle. You can use a button I used literally a link that does not point anywhere (no href), since I had written the CSS already and it had to look like the other links right next to it.<br />
Add jQuery by downloading and hosting or just point to the <a href="https://developers.google.com/speed/libraries/devguide?hl=de#jquery" target="_blank"><i class="fa fa-external-link"></i> Google Link</a>.</i><br />
<br />
<pre><code class="language-markup"><!DOCTYPE html>
<html lang="en">
<head>
<!-- Head Content -->
</head>
<body>
<!-- iframe in Container -->
<div class="video_container">
<iframe width="640" height="360" src="http://www.youtube.com/embed/2qZY3Tv3Z9c" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Toggle Button -->
<a class="lightSwitcher"> Turn off the lights </a>
<div id="shadow"></div>
<!-- jQuery -->
<script src="js/jquery-2.1.1.min.js"></script>
</body>
</html></code></pre><br />
<h2>CSS</h2>Okay, als nächstes die CSS.<br />
Was hier besonders wichtig ist, ist der z-Index. Unser Shadow-Container soll alles verdecken, bis auf unseren Link und unser Video.<br />
Ich hab das Video noch responsive gemacht (deswegen der Container, vor allem aber auch, weil es in Wordpress etwas aufwändiger ist, dem iframe eine Klasse zu geben als dem Container) und den Link in einen einfachen Button verwandelt.<br />
<br />
<i>Next for the CSS. Most important is the z-index. We wanna cover all of the content with the shadow except for the link and the video. I made my video responsive (that's why the container, and also because it is easier to add a class to that in wordpress than it is to the embeded iframe), the link got a button look.</i><br />
<br />
<pre><code class="language-css">#shadow{
background: rgba(0, 0, 0, .8);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
display: none;
}
.video_container iframe{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 102 !important;
}
.video_container{
width: 100%;
height: 0;
padding: 56.25% 0 0 0;
position: relative;
}
.lightSwitcher{
position: relative;
z-index: 103;
color: #4F525C;
background: #F5AC0E;
padding: 7px;
font-size: 150%;
top: 10px;
}
.lightSwitcher:hover{
cursor: pointer;
background: #4F525C;
color: #F5AC0E;
text-decoration: none;
}</code></pre><br />
Man bemerke, ich habe shadow keine Höhe gegeben, da 100% nicht die komplette Höhe des contents, sondern nur den Bildausschnitt bedeckt, die Höhe fügen wir dann nachher im Script hinzu. Ausserdem beginne ich mit einem ausgeblendeten shadow.<br />
<br />
Das war's schon, jetzt können wir zum Script kommen.<br />
<br />
<i>Note that I do not put a height to the shadow because we want to have it cover all of our content not just what is seen in our window. We'll add the height in our script. Also I start with a shadow that is hidden.<br />
<br />
That's it. Now for the script.</i><br />
<br />
<h2>jQuery</h2>Im Grunde, ist es enorm simpel, denn jQuery hat eine Funktion, die genau das tut, was ich haben will, das Script sieht so aus und tut was es soll, es blendet den shadow ein und aus.<br />
Vorher errechnen wir aber noch die Höhe des Contents und fügen diese der shadow-CSS hinzu.<br />
<br />
<i>Basically it is extremely simple. jQuery has a function to do exactly what I want. That's how the script looks and it does what it has to. It adds the height to our shadow and fades it in and out when clicking on our button.</i><br />
<br />
<pre><code class="language-javascript">$(document).ready(function(){
$("#shadow").css("height", $(document).height());
$(".lightSwitcher").click(function(){
$("#shadow").fadeToggle("350");
});
});</code></pre><br />
<h2>Adjustments</h2>Wie gesagt, es funktioniert super, aber es ist noch nicht ganz ausgereift. Was mich am meisten gestört hat, war dass auch bei "ausgeschaltetem" Licht immernoch "turn off the lights" stand. Das wollte ich ändern. Und dann hatte ich da nich die Navbar. Diese hat eigentlich einen z-Index, der höher ist, als das Video, weil ein offenes Dropdown nicht hinter dem Video verschwinden soll. bei ausgeschaltetem Licht hat mich diese Navbar aber gestört. Also musste der z-Index verändert werden.<br />
Was ich dann gemacht habe, war dem Schalter eine Klasse zu geben, sobald der Schatten sichtbar ist und dann einfach den Text und z-index geändert, sobald die Klasse vorhanden war.<br />
Und somit ist das Script festig und funktioniert absolut wunderbar.<br />
Ich habe dafür das Markup des Links leicht anpassen müssen, weil ich noch ein icon vor dem Text hatte und dieses belassen wollte. Damit ich den Text verändern konnte, musste ich ihn also mit einer einzelnen Klasse versehen.<br />
<br />
<i>As I said, it works but the script is not yet as I want it. What bothered me most was that even if the light was turned off, the link still said to turn the lights off instead of on. I wanted to change that and then I did have the navbar. This had to have a higher z-index than the video because the dropdown should be above the video, but when the lights were turned off, I wanted the navbar to be hidden too. What I did was add a class to the swith when the shadow was visible and then I just adjusted the css of the navbar and the text of the link as soon as there was the class.<br />
And then we are done and can go on.<br />
My markup changed because I did only want to change the text of the link, but also had an icon added. So what I did was add a span around the text and only change this when toggling.</i><br />
<br />
<pre><code class="language-markup"><a class="lightSwitcher">
<span class="switchtext">Turn off the lights</span>
</a></code></pre><br />
<pre><code class="language-javascript">$(document).ready(function(){
$("#shadow").css("height", $(document).height());
$(".lightSwitcher").click(function(){
var $this = $(this);
$("#shadow").fadeToggle("350");
$this.toggleClass('shadowvisible');
if($this.hasClass('shadowvisible')){
$('.switchtext').text('Turn on the lights');
$('.navbar').css({ "z-index": "99" });
} else {
$('.switchtext').text('Turn off the lights');
$('.navbar').css({ "z-index": "105" });
}
});
});</code></pre><br />
Und hier noch einmal die Endversion, die ich "Day-Version" nenne, denn es gibt ja auch noch eine zweite Möglichkeit.<br />
<br />
<i>And again the finished demo. I call it the day version because there is also another possibility.</i><br />
<br />
<a href="http://bekreatief.github.io/demo/turn_off_the_lights/day.html" class="buttonbg" target="_blank"><i class="fa fa-external-link"></i> Day Version</a><br />
<br />
<h2>Night Version</h2>Es gibt auch noch die Nacht-Version.<br />
Die Frage habe ich auch in meherern Foren gefunden, die ich während meiner Recherche durchforstet habe und deswegen ich antworte in meinem Tutorial auch direkt auf die Umkehrversion.<br />
Dazu passen wir CSS und Script leicht an und haben folgendes:<br />
<br />
<i>There is also a night version.<br />
The question I often stumbled upon was if you could start with the lights turned off and so I thought I could add that in my tutorial as well.<br />
We adjust it a little bit and the night version is done.</i><br />
<br />
<h3>Markup</h3><pre><code class="language-markup"><a class="lightSwitcher">
<span class="switchtext">Turn on the lights</span>
</a></code></pre><br />
<h3>CSS</h3><pre><code class="language-css">#shadow{
background: rgba(0, 0, 0, .8);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
display: block;
}</code></pre><br />
<h3>Script</h3><pre><code class="language-javascript">$(document).ready(function(){
$("#shadow").css("height", $(document).height());
$(".lightSwitcher").click(function(){
var $this = $(this);
$("#shadow").fadeToggle("350");
$this.toggleClass('shadowhidden');
if($this.hasClass('shadowhidden')){
$('.switchtext').text('Turn off the lights');
$('.navbar').css({ "z-index": "105" });
} else {
$('.switchtext').text('Turn on the lights');
$('.navbar').css({ "z-index": "99" });
}
});
});</code></pre><br />
<a class="buttonbg" href="http://bekreatief.github.io/demo/turn_off_the_lights/night.html" target="_blank"><i class="fa fa-external-link"></i> Night Version</a>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com2tag:blogger.com,1999:blog-1589905134039127183.post-2193832841031520962014-06-13T13:26:00.000+02:002015-10-26T15:14:29.956+01:00[PS 2 Gimp] Sunny AfternoonNach einer gefühlten Ewigkeit wieder einmal ein Gimp-Tutorial. Letztens habe ich mithilfe von verschiedenen Actions in Photoshop einen Effekt hinbekommen, der mir richtig gut gefallen hat und ich hab mich gefragt, ob man das wohl in Gimp rekonstruieren kann.<br />
Das Ergebnis hat mir dann sogar noch besser gefallen als die Photoshop-Version, also musste ich es euch zeigen :D<br />
<br />
<i>After what feels like an eternity a new gimp-tutorial. A few days ago I was playing around with actions in photoshop and achieved an effect that I really liked and I asked myself if I could recreate it in Gimp.<br />
I ended up liking the end result even more than the photoshop version so I had to show you guys :D</i><br />
<a name='more'></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0RVNAI88sncaPB1cdd5wniyOaAer7c03e9peFj-Prsm5OdvdG4Nyj5O7XdQ_y1Q3vZyDCz_AWDO188tBxPFhrqXRCkqTkymEXbMYZAb-wUZBYFUhFPdseUYxAPzq36mI83n9q2QUc1l6N/s1600/comparisson.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0RVNAI88sncaPB1cdd5wniyOaAer7c03e9peFj-Prsm5OdvdG4Nyj5O7XdQ_y1Q3vZyDCz_AWDO188tBxPFhrqXRCkqTkymEXbMYZAb-wUZBYFUhFPdseUYxAPzq36mI83n9q2QUc1l6N/s1600/comparisson.png" /></a><br />
<br />
Öffnet euer Bild und dann bearbeiten wir die Kurven. Die Kurven sind nicht exakt, einfach ungefähr so.<br />
Wir bearbeiten den allgemeinen und den roten Kanal.<br />
<br />
<i>Open your image and then the curves. Just try to recreate something like that.<br />
We work on the main and the red channel.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiORrYJaWOUH4oSSLP4_eMxi96nzCf2EcImJWqwWdjGMTItpE9sjFkNeYdnCLy_2d6YPtd-DUTw1wJs0Tn5WyYtkf2RkPsKqMzU7Y3rHz8s-CaFjM_CRXyDOW3F_2z-MUKSmaZbXRveoYcK/s1600/1.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiORrYJaWOUH4oSSLP4_eMxi96nzCf2EcImJWqwWdjGMTItpE9sjFkNeYdnCLy_2d6YPtd-DUTw1wJs0Tn5WyYtkf2RkPsKqMzU7Y3rHz8s-CaFjM_CRXyDOW3F_2z-MUKSmaZbXRveoYcK/s1600/1.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySsRSpFD_GoiLOWSlYiYwBOWsPb0_kC_WPBAbvnDsnCqiC5ygEu3WSkcFtz7Y6s6TQZSWXHEhpL7fwXgS3dhVVfy_G7GJ2AfV034szGWaLdKEm_VtcnYRFsOfs__k-WQ4P4Y0agpwFTW8/s1600/2.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySsRSpFD_GoiLOWSlYiYwBOWsPb0_kC_WPBAbvnDsnCqiC5ygEu3WSkcFtz7Y6s6TQZSWXHEhpL7fwXgS3dhVVfy_G7GJ2AfV034szGWaLdKEm_VtcnYRFsOfs__k-WQ4P4Y0agpwFTW8/s1600/2.png" /></a><br />
<br />
Als nächstes erstellen wir eine neue Ebene und füllen sie mit dieser gelblichen Farbe. Die Ebene versehen wir dann mit einem Blendmodus und setzen die Deckkraft runter.<br />
<br />
<i>Next we create a new layer and fill it with the yellow color. We add a mode and reduce the opacity.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5YTGDddIrhTSje34ThG_w5VOhyphenhypheneiVn6rrW5qfMeVP4tCyRIuplStAaACeHlRbi8QKqW7b_pfUsWvHJM2be5Dyy7_IxWum8lZkN_LGQWNZFtuRED3v0DgizvCFtlqkbexmwslXvVOwIUhA/s1600/3.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5YTGDddIrhTSje34ThG_w5VOhyphenhypheneiVn6rrW5qfMeVP4tCyRIuplStAaACeHlRbi8QKqW7b_pfUsWvHJM2be5Dyy7_IxWum8lZkN_LGQWNZFtuRED3v0DgizvCFtlqkbexmwslXvVOwIUhA/s1600/3.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSs_YuqxS4Bd53yiwk6_nyz3c3kbQ99nqFNErkgGwLBWq1FIYv_r4fosryLsXvMBEKfgJbBNkLrFA4CmE0XK8M0EzJDPfsjN6GLcQyv5K-u-CwFVOkNnXxRM9V6hfFl5MQ1m03x_R795qe/s1600/4.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSs_YuqxS4Bd53yiwk6_nyz3c3kbQ99nqFNErkgGwLBWq1FIYv_r4fosryLsXvMBEKfgJbBNkLrFA4CmE0XK8M0EzJDPfsjN6GLcQyv5K-u-CwFVOkNnXxRM9V6hfFl5MQ1m03x_R795qe/s1600/4.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLjx8hOu1k7UlFc7uTCv6OT51lKIgW4myI4xhO4pk-sAvuet_IQMDstBo9pOd7MTQ2Oe_i_dp7O6ELsWtOAcFsdq8HCdqZKM_Q19UViRY0M9G5eIaDuyKNTKw7kvLxCmS-YV2nGAmVKawB/s1600/5.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLjx8hOu1k7UlFc7uTCv6OT51lKIgW4myI4xhO4pk-sAvuet_IQMDstBo9pOd7MTQ2Oe_i_dp7O6ELsWtOAcFsdq8HCdqZKM_Q19UViRY0M9G5eIaDuyKNTKw7kvLxCmS-YV2nGAmVKawB/s1600/5.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK47Ch8M8U8x55PU0Lg-HteWlVvTA3p0JM_ENuh8UlthEYKuOpnzC8UFbEPNJxTfanpETZaQ8kPJ33qO0zfcioEpJLx0EwhtpLyP11ThvZ8Df3B5ZbKJOkar7rfX5wucuNnRUvROxZqdaQ/s1600/6.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK47Ch8M8U8x55PU0Lg-HteWlVvTA3p0JM_ENuh8UlthEYKuOpnzC8UFbEPNJxTfanpETZaQ8kPJ33qO0zfcioEpJLx0EwhtpLyP11ThvZ8Df3B5ZbKJOkar7rfX5wucuNnRUvROxZqdaQ/s1600/6.png" /></a><br />
<br />
Dann markieren wir nocheinmal die Hintergrundebene und bearbeiten die Kurven noch einmal ein bisschen.<br />
<br />
<i>Reselect the background layer again and work on the curves again.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieKjEc39-DA0glNk_LGAFRcHfq7JGxZkPYHsgzBA9T0Go9U21Of8_FewiL7ejLsnDgpMkzOd1OYlBTgehd11gHmqsI5SU7BQnCPgaYb9n63aS4eWi5QnrpsqZ-3y7q0797-_n002O63r6q/s1600/7.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieKjEc39-DA0glNk_LGAFRcHfq7JGxZkPYHsgzBA9T0Go9U21Of8_FewiL7ejLsnDgpMkzOd1OYlBTgehd11gHmqsI5SU7BQnCPgaYb9n63aS4eWi5QnrpsqZ-3y7q0797-_n002O63r6q/s1600/7.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTQa5nQrqgfHMCbo6IZpAv_D3dq5BlvsWS57-yw0rkv1auAGYAZ5psM9Eb5cRXJO2M2-usuFkzXON3awGnit8TkeJzIJWRrN4NGv-GLWKsjohkQI9gzW9b2CBdKyL-TXHGgwho5kMqiikI/s1600/8.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTQa5nQrqgfHMCbo6IZpAv_D3dq5BlvsWS57-yw0rkv1auAGYAZ5psM9Eb5cRXJO2M2-usuFkzXON3awGnit8TkeJzIJWRrN4NGv-GLWKsjohkQI9gzW9b2CBdKyL-TXHGgwho5kMqiikI/s1600/8.png" /></a><br />
<br />
Als nächstes verändern wir die Vordergrundfarbe, dann erstellten wir eine Kopie unseres Hintergrundbildes und fügen eine Gradient-Map ein.<br />
<br />
<i>Next we change the foregroundcolor, then copy the background and add a agradient map.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfHm05SHvT0Gx-5aeDgfT5TQIDzOITo871pcMuAN8G7W9UWACXzUVGayI_aOcLRxzZR-TPdLMZLFw8a_tYfhNgd20mqiGAgjoifY-gXEqVuQcEELJwu4M1RrorLcSpMQVSZKvh7K35yIy0/s1600/9.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfHm05SHvT0Gx-5aeDgfT5TQIDzOITo871pcMuAN8G7W9UWACXzUVGayI_aOcLRxzZR-TPdLMZLFw8a_tYfhNgd20mqiGAgjoifY-gXEqVuQcEELJwu4M1RrorLcSpMQVSZKvh7K35yIy0/s1600/9.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZJpYoCfaLWnEUzICw5lJ5UDaFrL2xVRq-1nDmk21JS1nET138E8ThEsMrwAmkuN0imHDXoFS_pTfzL6Ta8tP-n1kmNCCQH4s7N43AyFCqwPrV0YzzMnjcKd047uS99vjmB5riEz12wi12/s1600/10.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZJpYoCfaLWnEUzICw5lJ5UDaFrL2xVRq-1nDmk21JS1nET138E8ThEsMrwAmkuN0imHDXoFS_pTfzL6Ta8tP-n1kmNCCQH4s7N43AyFCqwPrV0YzzMnjcKd047uS99vjmB5riEz12wi12/s1600/10.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6yetYFphZTRd5Rlu197Ud1JEBcYd6zyVBE5BJEvXAHpZScsmv7aNpqVK-7UiiRxG_q1a34IEvFTnwg5_LbnCwbxTNuzsFS6leB9egowKMMaMbdugMam-WvAiuXVp8dv9TJqIr_dNWuFW7/s1600/11.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6yetYFphZTRd5Rlu197Ud1JEBcYd6zyVBE5BJEvXAHpZScsmv7aNpqVK-7UiiRxG_q1a34IEvFTnwg5_LbnCwbxTNuzsFS6leB9egowKMMaMbdugMam-WvAiuXVp8dv9TJqIr_dNWuFW7/s1600/11.png" /></a><br />
<br />
Dann wieder Deckkraft und Modus anpassen.<br />
<br />
<i>Change the opacity and mode.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6-CMz9wrB_PfYrjA4iY2p1sLjIlZ0jfTQEeIBxEUswIm6CvFG4Rx-fMZToXIaQ3LkVbRo5ahqaAljRhmg6YektlP7Gt9nN2NztibS1DnKE4YDOPoyH-pUaoNUQ6b2hWzoJM4sZjNtfS6K/s1600/12.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6-CMz9wrB_PfYrjA4iY2p1sLjIlZ0jfTQEeIBxEUswIm6CvFG4Rx-fMZToXIaQ3LkVbRo5ahqaAljRhmg6YektlP7Gt9nN2NztibS1DnKE4YDOPoyH-pUaoNUQ6b2hWzoJM4sZjNtfS6K/s1600/12.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZDOTuZ3GAXqHaAOB-4lPC25K78noFyMeHwrR1sbOR9VgpYgQ5cVnyxaEI_cy6q3BEH1n-QTx_vgkKXiTi2iyD_oM7ZCOQ7-XleujE72AjC2jtCpJJfsTZhMNrdoBbGKIJNmuDu5P1wIh/s1600/13.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZDOTuZ3GAXqHaAOB-4lPC25K78noFyMeHwrR1sbOR9VgpYgQ5cVnyxaEI_cy6q3BEH1n-QTx_vgkKXiTi2iyD_oM7ZCOQ7-XleujE72AjC2jtCpJJfsTZhMNrdoBbGKIJNmuDu5P1wIh/s1600/13.png" /></a><br />
<br />
Neue Ebene und ein Gradient einfügen, dass dann wieder mit Modus und Deckkraft angepasst wird.<br />
<br />
<i>Add a new layer, add a gradient and adjust.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9EK_AGYqoQIJ4oBvFjlWBgsgo-r3WjBAirHh66XvcfdASJlbe4o2ezCpC7Eidcs1S7PByATsjINm-V4W-lBaw1gKhnr9z88gdY4HeVEsB4bPCqF_lzGsDGHfhkCPnuFLHe8FzIkjF_Sx/s1600/14.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9EK_AGYqoQIJ4oBvFjlWBgsgo-r3WjBAirHh66XvcfdASJlbe4o2ezCpC7Eidcs1S7PByATsjINm-V4W-lBaw1gKhnr9z88gdY4HeVEsB4bPCqF_lzGsDGHfhkCPnuFLHe8FzIkjF_Sx/s1600/14.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkFlgsVrI8aja9Rzp_3jLZvwfdfoq3chIW4urbIvcK_TGuhR_51AlJOzM-BkqFYCk4GMWdSdxAUeVplk8P12GOxExMooFtbpKWG8JooOm2P0wmhUCY97GtMfhAhuTb6NX24ikO91qudCg/s1600/15.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkFlgsVrI8aja9Rzp_3jLZvwfdfoq3chIW4urbIvcK_TGuhR_51AlJOzM-BkqFYCk4GMWdSdxAUeVplk8P12GOxExMooFtbpKWG8JooOm2P0wmhUCY97GtMfhAhuTb6NX24ikO91qudCg/s1600/15.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6SZj_wEC2g7-nc5NzB9hnRsWGsoRcUQ8K5EoqoLYJBEFRUBdoeu96k7F3G1-HgthKEaBJhpJkNMcuZJpQ5XNHf60H07sPmPu_CxhgePaJLJrdYIEDMQURSXUy-tf0aERS3o4rOeE_k1m/s1600/16.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6SZj_wEC2g7-nc5NzB9hnRsWGsoRcUQ8K5EoqoLYJBEFRUBdoeu96k7F3G1-HgthKEaBJhpJkNMcuZJpQ5XNHf60H07sPmPu_CxhgePaJLJrdYIEDMQURSXUy-tf0aERS3o4rOeE_k1m/s1600/16.png" /></a><br />
<br />
Neue Ebene, mit Farbe füllen und anpassen.<br />
<br />
<i>New Layer, fill and adjust.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5k8lYwxTUWLBATwnBe2Jmk1QEvaqitr5cW1YVEze4J0Xf9vUgwjVlql06y1KW_gzHNWGJ-PT1GW1kMvFK-jafZo-Ljb1WBtV-ykLtDuIij30WdsZ9bZWAqJE1qUA33dd9bcGh70Shoeze/s1600/17.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5k8lYwxTUWLBATwnBe2Jmk1QEvaqitr5cW1YVEze4J0Xf9vUgwjVlql06y1KW_gzHNWGJ-PT1GW1kMvFK-jafZo-Ljb1WBtV-ykLtDuIij30WdsZ9bZWAqJE1qUA33dd9bcGh70Shoeze/s1600/17.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMx3tR78iVvS_bCqBSimvH5kXf3DcBYntynNUh4WOj1SDvDLOtH1UwhoReoSrCjrRwSbGBBQ0PuJPofJnewbjKKYe5ApcFjmK0Nm__Sazsh41A0wGpF7X3PbCbFo43iGjdIJWPStrEB96/s1600/18.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMx3tR78iVvS_bCqBSimvH5kXf3DcBYntynNUh4WOj1SDvDLOtH1UwhoReoSrCjrRwSbGBBQ0PuJPofJnewbjKKYe5ApcFjmK0Nm__Sazsh41A0wGpF7X3PbCbFo43iGjdIJWPStrEB96/s1600/18.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRN2opr7hsVMdV1AfK7Aa9jtgKHJ9ezj3hksDLyViT0IB-4YiwSbLnaJV54GlNaquDisn5wm2IGjcNjjkAKZx4F6QquuvGy0iqBMQPpYvh41NNYI5gtpFsYM2EX6201FfL7nHgXLVugWfw/s1600/19.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRN2opr7hsVMdV1AfK7Aa9jtgKHJ9ezj3hksDLyViT0IB-4YiwSbLnaJV54GlNaquDisn5wm2IGjcNjjkAKZx4F6QquuvGy0iqBMQPpYvh41NNYI5gtpFsYM2EX6201FfL7nHgXLVugWfw/s1600/19.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAiVvvW_m17LFA9FdycZULnNb7Xuyo0WnjBNNZ5M3GQgiLtVXzWB4o-yvbh4p28XdEpaIRGmG0cJBFfBtM5Du6kRRV76d4UtTlwAicUw-bNhukqVDi7PS5m5EaY4HCTydULa8qgLtVk0S0/s1600/20.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAiVvvW_m17LFA9FdycZULnNb7Xuyo0WnjBNNZ5M3GQgiLtVXzWB4o-yvbh4p28XdEpaIRGmG0cJBFfBtM5Du6kRRV76d4UtTlwAicUw-bNhukqVDi7PS5m5EaY4HCTydULa8qgLtVk0S0/s1600/20.png" /></a><br />
<br />
Zum Schluss noch einmal eine gelbe Ebene hinzufügen<br />
<br />
<i>Finish with another yellow layer.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMTDIg32lu0lNUnN_KzGVY_xkrulfCfdJHOUyZcj0tH1I9-AEInD1SjzsNV-2Bt0TpIwkLtl4L3rA9zR8lcJ0R57FLjkutwd7RRViVMNLBGF5pfXS__ZCsVtuj7F_MAQ-73lsajy9r8gky/s1600/21.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMTDIg32lu0lNUnN_KzGVY_xkrulfCfdJHOUyZcj0tH1I9-AEInD1SjzsNV-2Bt0TpIwkLtl4L3rA9zR8lcJ0R57FLjkutwd7RRViVMNLBGF5pfXS__ZCsVtuj7F_MAQ-73lsajy9r8gky/s1600/21.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWA0XvVEjigdB0FUz7Ing6bX9wyXnlQhhScCEI9xNJs8I7Fd9NDl8QiDSZhBliIkF_1pOUtaycC4XQPCLzOwu5vFuXlxIWse8csdkydqW8jWbVdsytRCCQTElEWQ_8LOKwlomuI9rk11L/s1600/22.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWA0XvVEjigdB0FUz7Ing6bX9wyXnlQhhScCEI9xNJs8I7Fd9NDl8QiDSZhBliIkF_1pOUtaycC4XQPCLzOwu5vFuXlxIWse8csdkydqW8jWbVdsytRCCQTElEWQ_8LOKwlomuI9rk11L/s1600/22.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZjfu5ZNlAAFdbmaXk6P11wd12uuR7gmdYBCl1DnLVqNaKSJRZSskPJOxdHG7ubbCLkaN-lNbz-SeKYrNfmqTi6orDqksn5RR0Gj8YdKMGWgxkwOElimw4w6b_TOv0jkzOw1xudbj7Ffdz/s1600/23.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZjfu5ZNlAAFdbmaXk6P11wd12uuR7gmdYBCl1DnLVqNaKSJRZSskPJOxdHG7ubbCLkaN-lNbz-SeKYrNfmqTi6orDqksn5RR0Gj8YdKMGWgxkwOElimw4w6b_TOv0jkzOw1xudbj7Ffdz/s1600/23.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkrAHXmmj8f2VSPSTn9H4SYi_EpoQslR7ux-ur6alW2P3-8sVJS9uLZ1f-BQjfW9NhedPiTYsdR0Y5GA4TvUE65_QZF1sUo26nKgOkJmK2RzZ1d_YZIMxorYZy9AmPxmAaUbAjrK4cU31G/s1600/24.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkrAHXmmj8f2VSPSTn9H4SYi_EpoQslR7ux-ur6alW2P3-8sVJS9uLZ1f-BQjfW9NhedPiTYsdR0Y5GA4TvUE65_QZF1sUo26nKgOkJmK2RzZ1d_YZIMxorYZy9AmPxmAaUbAjrK4cU31G/s1600/24.png" /></a><br />
<br />
Und das war's :D<br />
<br />
<i>And that's it!</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAtATdFUs6mlklzjUUqETVq9GEKl6afKaguBUfuHdEhK_tdP2PlHzhsxHew1WVhNS2i7HPHb3_pQKy9mJk2igVKyH-t_WAO7wMTuXiRERj98Of6zP2BvW49NJTS8sKZBeRQWPGH6Ssr6z1/s1600/gimp.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAtATdFUs6mlklzjUUqETVq9GEKl6afKaguBUfuHdEhK_tdP2PlHzhsxHew1WVhNS2i7HPHb3_pQKy9mJk2igVKyH-t_WAO7wMTuXiRERj98Of6zP2BvW49NJTS8sKZBeRQWPGH6Ssr6z1/s1600/gimp.png" /></a><br />
Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com3tag:blogger.com,1999:blog-1589905134039127183.post-46126837848562685522014-05-23T18:35:00.002+02:002015-10-26T15:14:29.967+01:00SVG (Superb Vector Goodness) Inkscape Icon Creation and Code cleanup ✤✤Okay, ein bisschen geschummelt habe ich. SVG steht für Scalable Vector Graphics aber meine Definition stimmt eher :D<br />
Um Vektoren geht es, nicht wegrennen Mathefeinde, das hier ist nämlich richtig cool! Mathekenntnisse sind keine vorhanden, dafür gibt es Inkscape.<br />
SVG unterscheiden sich von herkömmlichen Bild-Formaten dadurch, dass sie nicht auf Pixeln basieren. Man kann sie so gross aufblasen wie man will, ohne dass sie je verpixelt werden. Ausserdem sind SVGs der Schlüssel zu eigenen Icon-Fonts, doch heute möchte ich euch erst einmal erklären, wie der Arbeitsverlauf ist, und wie ihr den von Inkscape generierten Code nachher aufräumt.<br />
<br />
<i>Okay, I tricked a little bit. SVG does not really stand for superb vector goodness but scalable vector graphics, which tells you something about it, but my definition is more attractive. It screams Check us out, which you really should, because these graphics are great. Even if it says vector, you don't have to do the maths, my new buddy inkscape does that. SVG are different from usual images because they are not pixel-based. They are made out of vectors, so out of lines. What that means is that you can blow them up, scale like crazy and they'll still look the same, just bigger. Also, SVG is the key to creating an icon-font, but today I want to show you the workflow and how to clean up the code inkscape puts out.</i><br />
<a name='more'></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht8cOInOYR1xFF7GdiSrpnt9xvDtaQgUsL9sJ9H3bcfSY1p33WC4xI-m_Bd5x-SQr0OYDftVFMXthnvDVyeNiKnINkJOjDGCI30tYnlae3XjnWXvt16aUJSq3hYxgHRUmlc3yolLiw6N2l/s1600/feat.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht8cOInOYR1xFF7GdiSrpnt9xvDtaQgUsL9sJ9H3bcfSY1p33WC4xI-m_Bd5x-SQr0OYDftVFMXthnvDVyeNiKnINkJOjDGCI30tYnlae3XjnWXvt16aUJSq3hYxgHRUmlc3yolLiw6N2l/s1600/feat.jpg" /></a><br />
<br />
<h2>Inkscape</h2>Okay, bevor es losgehen kann, braucht ihr Inkscape. Inkscape ist ein Gratisprogramm und relativ einfach zu bedienen. Im Vergleich zu Gimp arbeitet man sich meiner Ansicht nach viel schneller ein.<br />
<br />
<i>Before you can start you need inkscape. Inkscape is free and relatively easy. Comparing to gimp I understood and established my own workflow a lot faster.</i><br />
<br />
<a class="buttonbg" href="http://www.inkscape.org/en/download/"><i class="fa fa-download"></i> Inkscape</a><br />
<br />
<h2>Icon Creation</h2>Okay, ich werde nicht darauf eingehen, was ein Icon ausmacht und wie man das Konzept eines Logos/Icons kreirt, das würde zu lange dauern und der eigene kreative Prozess spielt da eine ganz grosse Rolle. Viele werden mit einer Skizze beginnen und anhand dieser ihre Pfade kreiren. Als ich das Logo für <a href="http://twinsister.ch">TwinSister</a> entworfen habe, habe ich oft Bilder im Hintergrund platziert, die mir bei der ganzen Konzeption als Referenz gedient haben. Es ist ein zeitaufwändiger Prozess(aber es macht so viel Spass! Mit Inkscape krieg sogar ich Zeichnen-Sehr-Unbegabte Dinge hin, die ganz gut ausschauen).<br />
Für dieses Tutorial habe ich den Prozess meiner KreaTief-Vektor-Erstellung bebildert um die wichtigsten Eckpunkte zu illustrieren.<br />
<br />
<i>Okay, I'm not gonna tell you what icon-creation all involves and how you create a concept, because this takes much to long and everyone has their own way of how to go about it. A lot of people will start with a sketch and create their paths based on this. When I created the logo for TwinSister.ch, I often used image in my background to act as a reference to form paths. It is quite the long process (but so much fun! With Inkscape even I, who am a total fail when it comes to drawing can create something decent).<br />
For the sake of this tutorial I want to take you with me on the vector creation my logo, to illustrate the most important steps.</i><br />
<br />
<h3>1. New Image</h3>Öffnet Inkscape, ein neues Bild wird direkt geöffnet.<br />
Da ich mein Logo schon hatte, als Bild-datei habe ich dieses über "file>open" geöffnet. Das Bild war dann sozusagen die schon relativ weit fortgeschrittene Skizze.<br />
<br />
<i>Open Inkscape, a new image will be created automatically.<br />
Since I already had my logo as an image, I opened it (file>open). Regard the image as my pretty evolved sketch to use as a Guide.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS6Pdh5RSs1Wg0Oe2k0ObEFYFXgs_B5GqWnSL-iuOb9wSA5Nam0EOTkUvCjZUav6ve7l-Tyz7XP3WoVzWw-aF6FgP5g1JEU323ibvenM1IhVn0G_xk01JKILmK61dCOCkMZEd1nTAhBbPw/s1600/1.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS6Pdh5RSs1Wg0Oe2k0ObEFYFXgs_B5GqWnSL-iuOb9wSA5Nam0EOTkUvCjZUav6ve7l-Tyz7XP3WoVzWw-aF6FgP5g1JEU323ibvenM1IhVn0G_xk01JKILmK61dCOCkMZEd1nTAhBbPw/s1600/1.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidln7o8nEpiaIUODYmJL_qKVrdYdZoazuMEdciwFXYzSCQmda_aXcQDKtuCAOZ4xuJ2oGv7gA6DlOYEg2PIL7agbxD4pyFKwo1NnbuMogIXH5f-u0Ip3HbXQm-cqO00fR8sXkqihOmP94K/s1600/3.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidln7o8nEpiaIUODYmJL_qKVrdYdZoazuMEdciwFXYzSCQmda_aXcQDKtuCAOZ4xuJ2oGv7gA6DlOYEg2PIL7agbxD4pyFKwo1NnbuMogIXH5f-u0Ip3HbXQm-cqO00fR8sXkqihOmP94K/s1600/3.jpg" /></a><br />
<br />
Da ich gern alles innerhalb meiner Grenzen mache (auch wenn das nicht unbedingt getan werden muss) habe ich über die Document Properties, das Bild noch in die gewünschten Verhältnisse gebracht.<br />
<br />
<i>Since I like my work to be contained in a frame (you don't have to) I resized it to the size of my image.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYdYIGRAzEVxarbRjuDFmffErOAvBj5cnYgdqsnT5dAlzvmuONQcUQL5wwkOWi-lIURtbWFcMJv-e-AhQfGjQxBGlYu0k8H3zFem986iMxNYs-vDpAiRthZmtOf-iNTOiSRud26G-d0D8b/s1600/4.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYdYIGRAzEVxarbRjuDFmffErOAvBj5cnYgdqsnT5dAlzvmuONQcUQL5wwkOWi-lIURtbWFcMJv-e-AhQfGjQxBGlYu0k8H3zFem986iMxNYs-vDpAiRthZmtOf-iNTOiSRud26G-d0D8b/s1600/4.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBUjDDHa2BEAZHyz0HBdpjjwOXBL84nd3V8T9Fu29R2rvikK8DKL4IUlWk6tDp9j0To54o5WBvn7zxftJIetbc8yOf5QK6ADXC9V45iTC8gWcapu645EOqgRihx_VQ41i8nI75N36_p6wr/s1600/5.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBUjDDHa2BEAZHyz0HBdpjjwOXBL84nd3V8T9Fu29R2rvikK8DKL4IUlWk6tDp9j0To54o5WBvn7zxftJIetbc8yOf5QK6ADXC9V45iTC8gWcapu645EOqgRihx_VQ41i8nI75N36_p6wr/s1600/5.jpg" /></a><br />
<br />
<h3>2. Path Creation</h3>Okay, dann geht es ans Pen Tool und ihr könnt eure Linien bilden. Versucht so wenige Knotenpunkte wie möglich zu setzen, die Linien werden durch weniger Eckpunkte meist flüssiger, wenn ihr einmal einen Punkt daneben setzt, ist das nicht so schlimm, sobald der Pfad fertig ist, könnt ihr die Punkte manipulieren. <br />
Ich färbe meine Pfade immer rot, damit ich sie wirklich sehen kann.<br />
<br />
<i>Now you want to grab your pen tool and create your lines. Try to use as few nodes as possible, the lines end up smoother. If you misplace a node it's not bad, you can manipulate it after.<br />
I always stroke my paths with red so I can really see them.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwDOxGkRYlfFBhjjc47QxGso3wN0RgUH8obTmgZ-Qht0bzbsDpiFZszpZG1wuiaR5TqIMxgOSL8DsMEDGL_M2WzLH9hf7cT3CAw3NHVFOFAEneIWxbsaovAMcgd8_dRLu8OmeBdTMMaMAV/s1600/6.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwDOxGkRYlfFBhjjc47QxGso3wN0RgUH8obTmgZ-Qht0bzbsDpiFZszpZG1wuiaR5TqIMxgOSL8DsMEDGL_M2WzLH9hf7cT3CAw3NHVFOFAEneIWxbsaovAMcgd8_dRLu8OmeBdTMMaMAV/s1600/6.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOQ7qDRo3D2FVzd-7AcUFFxRYg47iQRlfbTKprNEyp7tMgWrp6-kPW2qRLJBE54adN8-a_y_2_CjO3z514ggznodZ7x1xL78h2BhvZO-2pDbXPJNloYCV7_dWb_LFPzKabOpQHTxYC37P7/s1600/7.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOQ7qDRo3D2FVzd-7AcUFFxRYg47iQRlfbTKprNEyp7tMgWrp6-kPW2qRLJBE54adN8-a_y_2_CjO3z514ggznodZ7x1xL78h2BhvZO-2pDbXPJNloYCV7_dWb_LFPzKabOpQHTxYC37P7/s1600/7.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAidIYDduT_WViATySgcWzt7UKBWWMqkGdl7FvFuE5W5mnhmsa5tmAA17VidlPGfBAeOaFaxCHbhHIEO0MDlTHRbPmVUppyJCW5Z89rhjZ3QUyeP0BwHjdyKR_G7CpzXT19O5FPbrxyK5r/s1600/8.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAidIYDduT_WViATySgcWzt7UKBWWMqkGdl7FvFuE5W5mnhmsa5tmAA17VidlPGfBAeOaFaxCHbhHIEO0MDlTHRbPmVUppyJCW5Z89rhjZ3QUyeP0BwHjdyKR_G7CpzXT19O5FPbrxyK5r/s1600/8.jpg" /></a><br />
<br />
Um das Ganze dann zu bearbeiten selektiert ihr das Node Tool (zweites von oben) und markiert euren Pfad. Die Knotenpunkte lassen sich dann markieren und manipulieren.<br />
<br />
<i>To manipulate you select the node toll (second from the top) and select your path. The nodes will be visible and can be moved and manipulated.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoWV9AR99ESuOXzCZnJS0zyDo1z_5V_ptsQdsrutTXvwo3iHDIC7j1lWU7Uwxt19XXnZBWab-2QTsMFfQOceoIOPfkp0k24RdTFCS3ofccwpwfJBjUD_Fxq5p5qaz6FsDWBrGpsKBcKIk/s1600/9.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoWV9AR99ESuOXzCZnJS0zyDo1z_5V_ptsQdsrutTXvwo3iHDIC7j1lWU7Uwxt19XXnZBWab-2QTsMFfQOceoIOPfkp0k24RdTFCS3ofccwpwfJBjUD_Fxq5p5qaz6FsDWBrGpsKBcKIk/s1600/9.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm289nymmyRJTrUHIhcI2HQSMcFSh85MNWhsm3FwFHfRP9vh170zc_yfyXsBGcXW7Dp6xJXNp676qgF24uC-6-0jpfCLbmiVfhVa9_hPazBZjlGbmlswul8-PPs9laGkA6WErV6TGhGWRT/s1600/10.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm289nymmyRJTrUHIhcI2HQSMcFSh85MNWhsm3FwFHfRP9vh170zc_yfyXsBGcXW7Dp6xJXNp676qgF24uC-6-0jpfCLbmiVfhVa9_hPazBZjlGbmlswul8-PPs9laGkA6WErV6TGhGWRT/s1600/10.jpg" /></a><br />
<br />
Beim nachbearbeiten der Pfade lassen sich einzelnen Knotenpunkte auch löschen, hier kann man oft extrem reduzieren und die Linien verbessern.<br />
Wenn ihr fertig seid, markiert ihr alle Teile eures Pfads.<br />
<br />
<i>When working on the paths, you'll see that your path benefits if you remove some nodes. It will often improve the all over line.<br />
When you're happy with the look, select all of your paths</i><br />
<br />
<h3>3. Fill and Combine</h3><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj_BJXMHOHWLgezfMP5r2Ch_oHmo3BdspKYqxOuvTxqmkuyQM98D43QrelI11HqhVLv4GYEc2KSAUr8oQ2_D_ZX9lGBmZ5xcqboTmq_8ZpusVhIjQBRdo6PA2KsyzPsJvYH3LaE3t-08-/s1600/11.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj_BJXMHOHWLgezfMP5r2Ch_oHmo3BdspKYqxOuvTxqmkuyQM98D43QrelI11HqhVLv4GYEc2KSAUr8oQ2_D_ZX9lGBmZ5xcqboTmq_8ZpusVhIjQBRdo6PA2KsyzPsJvYH3LaE3t-08-/s1600/11.jpg" /></a><br />
<br />
Im Fill and Stroke Reiter entfernt ihr die Linie und füllt eure Pfade mit schwarz (oder einer anderen beliebigen Farbe). Dann wählt ihr "Path>Combine". Eure Pfade wird zu einem einzigen zusammengesetzt. Und dann seid ihr ready zum Speichern. :)<br />
<br />
<i>In the fill and stroke panel remove the stroke and fill your paths with black (or any other color). Then select "Path>Combine". Your paths will be fused into one. And then you're ready to save :)</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcLlkfjwCgaDDW1NTHfUgN0x-lMay3ln2ms8yfTi99rYJPu7Tbz2SrNgH6ofxuzZUAppk2FLBIfCDSgSoZIeeXKnZH4fuZyuS0uQg4Kk5dHgJBjYjKkxesjMwgp9Gt1lZ9XocQl0xayMK/s1600/12.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcLlkfjwCgaDDW1NTHfUgN0x-lMay3ln2ms8yfTi99rYJPu7Tbz2SrNgH6ofxuzZUAppk2FLBIfCDSgSoZIeeXKnZH4fuZyuS0uQg4Kk5dHgJBjYjKkxesjMwgp9Gt1lZ9XocQl0xayMK/s1600/12.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvjQ8lSHn5hG3wG-iSGi71fTwfYrsmmKlIPreH-zt_oGdoMFM3xKTS4t6OM3y07_ADE_O1yvtLURZOU2bUE54OddyRyfSstHnq047JWrVMKx-t6PFSyviVhIXKXqhzqfKxQAIVls6PrSu/s1600/13.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvjQ8lSHn5hG3wG-iSGi71fTwfYrsmmKlIPreH-zt_oGdoMFM3xKTS4t6OM3y07_ADE_O1yvtLURZOU2bUE54OddyRyfSstHnq047JWrVMKx-t6PFSyviVhIXKXqhzqfKxQAIVls6PrSu/s1600/13.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXUimFZSYHzXmNvjJpnllGvnjD-rhD2Zx88b1MVnq8a2rWRkxmXryvitNDaeELLEqU8dUCWezgZId_gNep07uxOR02TqwK5xoxeS3qGND5btodhMxDI8LQvZ9hSvg8DG7eEpqwDa9cDk-Q/s1600/14.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXUimFZSYHzXmNvjJpnllGvnjD-rhD2Zx88b1MVnq8a2rWRkxmXryvitNDaeELLEqU8dUCWezgZId_gNep07uxOR02TqwK5xoxeS3qGND5btodhMxDI8LQvZ9hSvg8DG7eEpqwDa9cDk-Q/s1600/14.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh268akYAT7-XHan2kPIe567s7nFh_b6kzkD-X5Ry9Wfe5H9GJWuN1ISoz_lrKfjWxAMXi2lxLO8UbwnYbv6oeV-lxab1lwDO0gusQuT6FQ05llnSvfUIyIxowkz14UAo6-BMuMMjoRAGkq/s1600/15.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh268akYAT7-XHan2kPIe567s7nFh_b6kzkD-X5Ry9Wfe5H9GJWuN1ISoz_lrKfjWxAMXi2lxLO8UbwnYbv6oeV-lxab1lwDO0gusQuT6FQ05llnSvfUIyIxowkz14UAo6-BMuMMjoRAGkq/s1600/15.jpg" /></a><br />
<br />
<h2>Code Cleanup</h2>Es gibt verschiedene Möglichkeiten, wie ihr euer SVG eurem Projekt hinzufügen könnt, zum einen über ein image-Tag oder ihr mag das inline, also mit dem Code, den Inkscape ausspuckt. Der Code gibt euch die Möglichkeit mit CSS zu gestalten, also empfehle ich das, aber der muss zuerst aufgeräumt werden.<br />
<br />
<i>You can add the svgs using an image tag or if you do it inline, using the code inkscape created. The code gives you the possibility to add CSS-Styles so that's what I recommend, but first the code has to be cleaned up.</i><br />
<br />
<h3>Inkscape Code</h3>Den Code bekommt ihr, wenn ihr die Datei einfach mit einem Editor öffnet.<br />
<br />
<i>You get the code if you open the svg-file with an editor</i><br />
<br />
Der Code zu meinem Logo sieht so aus:<br />
<br />
<i>That's what the Code of my logo looks like directly out of inkscape</i><br />
<br />
<pre><code class="language-markup"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg2985"
version="1.1"
inkscape:version="0.48.4 r9939"
width="513"
height="296"
sodipodi:docname="ktlogooutlinefill.jpg">
<metadata
id="metadata2991">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs2989" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1003"
id="namedview2987"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
showguides="false"
inkscape:guide-bbox="true"
inkscape:zoom="2.6925676"
inkscape:cx="256.5"
inkscape:cy="148"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="svg2985">
<sodipodi:guide
orientation="0,1"
position="225.72713,30.621149"
id="guide3800" />
<inkscape:grid
type="xygrid"
id="grid3806"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<path
id="path3793"
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 169.15797,177.69953 c 0.14912,0.74558 36.47337,101.45033 36.47337,101.45033 0,0 3.87703,7.60493 14.16605,7.75405 10.28902,0.14911 115.69451,0.42573 121.828,0.29823 6.13349,-0.1275 11.34858,-2.99765 14.46427,-10.58726 7.23792,-17.63106 36.24248,-99.96818 35.15614,-98.85465 -8.10963,8.31265 -27.90139,8.78668 -35.15614,-0.45678 C 354.30027,171.63703 339,265.37885 339,265.37885 l -3,0 15.76529,-86.58427 c -11.16466,8.23354 -20.15535,6.10399 -33.45194,-1.48742 L 310,265.37885 l -3,0 7.78446,-87.80102 c -9.57155,10.016 -24.69993,7.17784 -33.23263,-0.78272 L 282,265.37885 l -3,0 -1.3455,-87.62812 c -12.74443,8.58427 -22.33822,8.00682 -33.10381,0.44735 L 258,265.37885 l -3,0 -14.62456,-88.3737 c -7.63033,10.33472 -25.01755,8.56975 -33.10382,0.8947 l 25.72838,87.479 -3,0 -26.45628,-88.3737 c -11.70209,9.05246 -19.43054,10.01678 -34.38575,0.69438 z m 196.54224,-62.55054 c 3.97677,-4.02027 8.92232,-3.98552 13.52717,-1.66591 12.50931,6.83395 10.27013,20.43147 2.86537,27.45416 -5.76347,5.2335 -27.72072,22.92291 -53.84216,24.05572 -15.14035,0.96568 -30.28747,1.07208 -45.44598,0.99959 0,0 50.31043,-24.72208 58.57334,-30.85262 8.2629,-6.13055 24.32226,-19.9909 24.32226,-19.9909 z m 32.66114,-10.97333 -0.18569,25.99749 c 0.63501,3.51143 2.15905,4.61897 4.8281,5.94228 0.96914,0.4865 61.83689,30.6399 61.83689,30.6399 l -61.83689,30.26851 c 0,0 -5.0138,1.29987 -5.0138,4.8281 0,3.52823 0.18569,26.74028 0.18569,26.74028 l 106.03263,-55.52321 -0.3714,-13.18445 z m -141.68937,12.72311 c -13.06691,3.41089 -59.35497,10.46445 -67.99606,20.42061 -8.6411,9.95615 -9.51223,31.21049 19.61761,32.36422 24.69663,0.54943 43.94504,1.74178 66.18759,-9.08817 18.40351,-10.49172 81.43986,-47.487 93.5439,-66.003987 4.31389,-7.908063 4.16484,-20.864657 -9.03411,-23.880505 -34.27208,9.662925 -65.99504,34.919292 -102.31893,46.187832 z M 298.9864,9.7503989 c 0,0 -5.20624,22.5466381 21.14044,27.9684241 15.97423,4.712171 22.55788,21.819944 12.14785,25.308953 C 251.91096,113.23724 228.75252,117.2763 228.75252,117.2763 197.61926,123.36863 198.7088,94.514202 213.63674,74.616134 231.27113,47.768857 264.97321,48.090766 283.88607,31.022158 288.61313,26.689022 298.9864,9.7503989 298.9864,9.7503989 z m -188.54146,94.4858811 0.18569,25.99749 c -0.63501,3.51143 -2.15905,4.61897 -4.8281,5.94228 -0.96914,0.4865 -61.83689,30.6399 -61.83689,30.6399 l 61.83689,30.26851 c 0,0 5.0138,1.29987 5.0138,4.8281 0,3.52823 -0.18569,26.74028 -0.18569,26.74028 L 4.598012,173.12963 4.9694047,159.94518 z M 177.75,70.75 c 0,0 3.75,-13.5 11.5,-13.75 C 197,56.75 209,56 209,56 l -78.75,203 c 0,0 -3.75,9.75 -10.875,9.75 -7.125,0 -19.75,0.25 -19.75,0.25 z"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccssssccccccccccccccccccccccccccscccccccscccccscccccccccccccccccscccccsccscc" />
</svg></code></pre><br />
Sehr viel Unnötigkeiten.<br />
Zu Beginn einfach mal alles löschen, was wir nicht brauchen.<br />
Also weg mit allem was nicht Pfad oder Dimensionsangaben ist.<br />
<br />
<i>A lot of unnessecary stuff.<br />
First we just delete everything we don't need.<br />
So remove everything that's not our path or other information of dimension</i><br />
<br />
<pre><code class="language-markup"><svg
id="svg2985"
version="1.1"
width="513"
height="296">
<path
id="path3793"
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 169.15797,177.69953 c 0.14912,0.74558 36.47337,101.45033 36.47337,101.45033 0,0 3.87703,7.60493 14.16605,7.75405 10.28902,0.14911 115.69451,0.42573 121.828,0.29823 6.13349,-0.1275 11.34858,-2.99765 14.46427,-10.58726 7.23792,-17.63106 36.24248,-99.96818 35.15614,-98.85465 -8.10963,8.31265 -27.90139,8.78668 -35.15614,-0.45678 C 354.30027,171.63703 339,265.37885 339,265.37885 l -3,0 15.76529,-86.58427 c -11.16466,8.23354 -20.15535,6.10399 -33.45194,-1.48742 L 310,265.37885 l -3,0 7.78446,-87.80102 c -9.57155,10.016 -24.69993,7.17784 -33.23263,-0.78272 L 282,265.37885 l -3,0 -1.3455,-87.62812 c -12.74443,8.58427 -22.33822,8.00682 -33.10381,0.44735 L 258,265.37885 l -3,0 -14.62456,-88.3737 c -7.63033,10.33472 -25.01755,8.56975 -33.10382,0.8947 l 25.72838,87.479 -3,0 -26.45628,-88.3737 c -11.70209,9.05246 -19.43054,10.01678 -34.38575,0.69438 z m 196.54224,-62.55054 c 3.97677,-4.02027 8.92232,-3.98552 13.52717,-1.66591 12.50931,6.83395 10.27013,20.43147 2.86537,27.45416 -5.76347,5.2335 -27.72072,22.92291 -53.84216,24.05572 -15.14035,0.96568 -30.28747,1.07208 -45.44598,0.99959 0,0 50.31043,-24.72208 58.57334,-30.85262 8.2629,-6.13055 24.32226,-19.9909 24.32226,-19.9909 z m 32.66114,-10.97333 -0.18569,25.99749 c 0.63501,3.51143 2.15905,4.61897 4.8281,5.94228 0.96914,0.4865 61.83689,30.6399 61.83689,30.6399 l -61.83689,30.26851 c 0,0 -5.0138,1.29987 -5.0138,4.8281 0,3.52823 0.18569,26.74028 0.18569,26.74028 l 106.03263,-55.52321 -0.3714,-13.18445 z m -141.68937,12.72311 c -13.06691,3.41089 -59.35497,10.46445 -67.99606,20.42061 -8.6411,9.95615 -9.51223,31.21049 19.61761,32.36422 24.69663,0.54943 43.94504,1.74178 66.18759,-9.08817 18.40351,-10.49172 81.43986,-47.487 93.5439,-66.003987 4.31389,-7.908063 4.16484,-20.864657 -9.03411,-23.880505 -34.27208,9.662925 -65.99504,34.919292 -102.31893,46.187832 z M 298.9864,9.7503989 c 0,0 -5.20624,22.5466381 21.14044,27.9684241 15.97423,4.712171 22.55788,21.819944 12.14785,25.308953 C 251.91096,113.23724 228.75252,117.2763 228.75252,117.2763 197.61926,123.36863 198.7088,94.514202 213.63674,74.616134 231.27113,47.768857 264.97321,48.090766 283.88607,31.022158 288.61313,26.689022 298.9864,9.7503989 298.9864,9.7503989 z m -188.54146,94.4858811 0.18569,25.99749 c -0.63501,3.51143 -2.15905,4.61897 -4.8281,5.94228 -0.96914,0.4865 -61.83689,30.6399 -61.83689,30.6399 l 61.83689,30.26851 c 0,0 5.0138,1.29987 5.0138,4.8281 0,3.52823 -0.18569,26.74028 -0.18569,26.74028 L 4.598012,173.12963 4.9694047,159.94518 z M 177.75,70.75 c 0,0 3.75,-13.5 11.5,-13.75 C 197,56.75 209,56 209,56 l -78.75,203 c 0,0 -3.75,9.75 -10.875,9.75 -7.125,0 -19.75,0.25 -19.75,0.25 z"
/>
</svg></code></pre><br />
Schon besser. Sowas könnte man einbauen. Trotzdem mag ich kein inline-CSS und kopple dieses immer aus, dann noch ID anpassen und ich bin happy :D<br />
<br />
<i>A lot better. You could use something like that. I still dislike inline-CSS and just take it out. Then I adjust my ID and am happy. :D</i><br />
<br />
<pre><code class="language-markup"><svg id="kt_logo" version="1.1" width="513" height="296">
<path d="m 169.15797,177.69953 c 0.14912,0.74558 36.47337,101.45033 36.47337,101.45033 0,0 3.87703,7.60493 14.16605,7.75405 10.28902,0.14911 115.69451,0.42573 121.828,0.29823 6.13349,-0.1275 11.34858,-2.99765 14.46427,-10.58726 7.23792,-17.63106 36.24248,-99.96818 35.15614,-98.85465 -8.10963,8.31265 -27.90139,8.78668 -35.15614,-0.45678 C 354.30027,171.63703 339,265.37885 339,265.37885 l -3,0 15.76529,-86.58427 c -11.16466,8.23354 -20.15535,6.10399 -33.45194,-1.48742 L 310,265.37885 l -3,0 7.78446,-87.80102 c -9.57155,10.016 -24.69993,7.17784 -33.23263,-0.78272 L 282,265.37885 l -3,0 -1.3455,-87.62812 c -12.74443,8.58427 -22.33822,8.00682 -33.10381,0.44735 L 258,265.37885 l -3,0 -14.62456,-88.3737 c -7.63033,10.33472 -25.01755,8.56975 -33.10382,0.8947 l 25.72838,87.479 -3,0 -26.45628,-88.3737 c -11.70209,9.05246 -19.43054,10.01678 -34.38575,0.69438 z m 196.54224,-62.55054 c 3.97677,-4.02027 8.92232,-3.98552 13.52717,-1.66591 12.50931,6.83395 10.27013,20.43147 2.86537,27.45416 -5.76347,5.2335 -27.72072,22.92291 -53.84216,24.05572 -15.14035,0.96568 -30.28747,1.07208 -45.44598,0.99959 0,0 50.31043,-24.72208 58.57334,-30.85262 8.2629,-6.13055 24.32226,-19.9909 24.32226,-19.9909 z m 32.66114,-10.97333 -0.18569,25.99749 c 0.63501,3.51143 2.15905,4.61897 4.8281,5.94228 0.96914,0.4865 61.83689,30.6399 61.83689,30.6399 l -61.83689,30.26851 c 0,0 -5.0138,1.29987 -5.0138,4.8281 0,3.52823 0.18569,26.74028 0.18569,26.74028 l 106.03263,-55.52321 -0.3714,-13.18445 z m -141.68937,12.72311 c -13.06691,3.41089 -59.35497,10.46445 -67.99606,20.42061 -8.6411,9.95615 -9.51223,31.21049 19.61761,32.36422 24.69663,0.54943 43.94504,1.74178 66.18759,-9.08817 18.40351,-10.49172 81.43986,-47.487 93.5439,-66.003987 4.31389,-7.908063 4.16484,-20.864657 -9.03411,-23.880505 -34.27208,9.662925 -65.99504,34.919292 -102.31893,46.187832 z M 298.9864,9.7503989 c 0,0 -5.20624,22.5466381 21.14044,27.9684241 15.97423,4.712171 22.55788,21.819944 12.14785,25.308953 C 251.91096,113.23724 228.75252,117.2763 228.75252,117.2763 197.61926,123.36863 198.7088,94.514202 213.63674,74.616134 231.27113,47.768857 264.97321,48.090766 283.88607,31.022158 288.61313,26.689022 298.9864,9.7503989 298.9864,9.7503989 z m -188.54146,94.4858811 0.18569,25.99749 c -0.63501,3.51143 -2.15905,4.61897 -4.8281,5.94228 -0.96914,0.4865 -61.83689,30.6399 -61.83689,30.6399 l 61.83689,30.26851 c 0,0 5.0138,1.29987 5.0138,4.8281 0,3.52823 -0.18569,26.74028 -0.18569,26.74028 L 4.598012,173.12963 4.9694047,159.94518 z M 177.75,70.75 c 0,0 3.75,-13.5 11.5,-13.75 C 197,56.75 209,56 209,56 l -78.75,203 c 0,0 -3.75,9.75 -10.875,9.75 -7.125,0 -19.75,0.25 -19.75,0.25 z" />
</svg>
<style>
#kt_logo{
fill: #000;
}
</style>
</code></pre><br />
<h3>With images in the background</h3>Ihr könnt SVGs auch mit Bildern füllen. Folgt dem Link um ein Beispiel zu sehen. Wenn ihr gerne noch ein Tutorial lesen würdet, wie ihr SVGs responsive hinbekommt (und eine Erklärung zum Bild im HG) lasst es mich wissen.<br />
<br />
<i>You can fill SVGs with images too. Just follow the link to see an example. If you'd like a tutorial about how to make a svg responsive (and an explanation for the image in the background) let me know.</i><br />
<br />
<a class="buttonbg" href="http://dabblet.com/gist/6f8557bb4c2c43b16f9e"><i class="fa fa-external-link"></i> Responsive SVG with image background</a><br />
<br />
Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-68637102298870485042014-05-11T22:59:00.000+02:002014-05-11T23:04:53.109+02:00[BLOGGER] Datum aufspalten und gestalten ✤✤✤✤✤Hallo zusammen.<br />
Die Frage tauchte schon sehr oft auf: "Wenn ich mehr als einen Post pro Tag veröffentliche, dann wird das Datum nur beim letzten Post angezeigt." Das ist kein Problem des Tutorials, sondern ein Blogger-Problem. Dieses Phänomen lässt sich in jeder Vorlage beobachten, meist ist es einfach nicht so auffällig, wie wenn man das Datum gestaltet hat.<br />
<br />
Um das Problem zu beheben, habe ich jetzt eine Alternative Version meines CPL-Gastposts geschrieben. Wenn ihr nicht zu den Leuten gehört, die mehr als einen Post pro Tag veröffentlichen, dann würde ich euch das "Original" empfehlen.<br />
Alle anderen sind jetzt herzlich eingeladen, diese Alternative Version in ihren Blog einzubauen. Eigentlich verändert sich nur der Anfang, der ganze CSS-Teil bleibt sich gleich.<br />
<br />
<a href="http://www.copypastelove.de/2013/03/datum-aufspalten-gestalten.html" class="buttonbg">CPL Post</a><br />
<a name='more'></a><br />
<br />
Okay, Datum aufspalten. Endergebnis wird was in diese Richtung:<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFPO8MAif_pFsC9jO-8Z6jhe3fW8o9ShBcWWMv7bi6wqgmUchHhY8BbVu-d12S9EqdQ-86jDliHpYpHyZByJsqpLlJSw0sLy58Vzmmt1VL158gqdiJhF5_e9o3RXmFYbxNkJsFTi-Sq-iu/s1600/date.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFPO8MAif_pFsC9jO-8Z6jhe3fW8o9ShBcWWMv7bi6wqgmUchHhY8BbVu-d12S9EqdQ-86jDliHpYpHyZByJsqpLlJSw0sLy58Vzmmt1VL158gqdiJhF5_e9o3RXmFYbxNkJsFTi-Sq-iu/s1600/date.gif" /></a><br />
<br />
<h3>Grundidee und wie wir das Datum überall hinbekommen </h3>Okay, damit das Datum überall angezeigt wird, müssen wir vom data-Tag: dateHeader weg und stattdessen einen Timestamp platzieren. Dieser wird im Bloggercode auch bei doppelten Post angezeigt.<br />
<br />
Das Problem ist, dass das Timestamp-Format nicht das Datumsformat unterstützt, welches für das ursprüngliche Script gebraucht wird, deswegen musste ich das Script umschreiben.<br />
<br />
<h3>Format ändern</h3>Okay, das Timestamp-Format müssen wir anpassen. Und zwar machen wir das unter Einstellungen>Sprache und Formatierung>Format des Zeitstempels. Stellt sicher, dass ihr das folgende Format ausgewählt habt:<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHlI7ko-nhf6jbxr0D3lutwUoEowB-dSpy5FgzaRIqofJ5sWqPxdizqD6-lGZlBPNnohi851R5PmKq0SfXiHDSXQd24SHiNsik0ATLKfNhDwRD2ayrjreV3oSRF-Fc-k3A3VtxzlnJVEe/s1600/timestamp.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHlI7ko-nhf6jbxr0D3lutwUoEowB-dSpy5FgzaRIqofJ5sWqPxdizqD6-lGZlBPNnohi851R5PmKq0SfXiHDSXQd24SHiNsik0ATLKfNhDwRD2ayrjreV3oSRF-Fc-k3A3VtxzlnJVEe/s1600/timestamp.jpg" /></a><br />
<br />
<h3>JavaScript einfügen</h3>Ich mache das für das Tutorial im Simple Template, es funktioniert aber eigentlich mit jedem Blogger-Code, der nicht zu den Dynamic Views gehört.<br />
<br />
Okay, wir müssen in den Code rein, weswegen ich Schwierigkeitsstufe 5 gegeben habe, weil ich weiß, dass es für viele erst einmal etwas abschreckend sein kann. Aber es gibt immer das schöne STRG+Z, das macht alles weg, was man nicht haben will ^^ <br />
<br />
<b>Außerdem solltet ihr zu Beginn eine Sicherheitskopie machen.</b><br />
<br />
Ich empfehle beim Designen immer einen Testblog, einfach damit irgendwelche Fehler und Unschönheiten ausgemerzt werden können, ehe all eure Leser das sehen ^^<br />
<br />
<b>Gut, wir öffnen also unseren Quelltext.</b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii3M8Q566MRk8KvNZ4pgP3M4Q9T7LUh41INCn-4wDqx-CJiRYSlMc8dvzaAVPt6vM0ktwHEgdvKdb2MUeUhuemO0mlhhdIYqJdcDOekNZbEHmbozYE1yU1UYMLlzcxCcL32DCR8kcJN9je/s1600/d2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii3M8Q566MRk8KvNZ4pgP3M4Q9T7LUh41INCn-4wDqx-CJiRYSlMc8dvzaAVPt6vM0ktwHEgdvKdb2MUeUhuemO0mlhhdIYqJdcDOekNZbEHmbozYE1yU1UYMLlzcxCcL32DCR8kcJN9je/s1600/d2.gif" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfiUpuMdEHa0hzIsIE13ZJGYfKYvaEeofz5EOWOV93gM-J2z-R6amnj6l0QCnXYEx6X0CuzDelRvuy0NsVQkUGmZzcsoiio7HbhKca-kjiVCM8l2K08eUXWK4nNrVOtS1kpfTwsI8WaFD/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfiUpuMdEHa0hzIsIE13ZJGYfKYvaEeofz5EOWOV93gM-J2z-R6amnj6l0QCnXYEx6X0CuzDelRvuy0NsVQkUGmZzcsoiio7HbhKca-kjiVCM8l2K08eUXWK4nNrVOtS1kpfTwsI8WaFD/s1600/1.png" /></a><br />
<br />
Dann sucht ihr in eurem Code nach<br />
<pre><code class="language-markup"></head></code></pre><b>unter</b> diesem schliessenden Head-Tag <b>fügen wir unser JavaScript ein</b><br />
<br />
<pre><code class="language-javascript"><script>
function replace_date(d) {
var da = d.split(&#39; &#39;);
weekday = &quot;<div class='weekday'>&quot;+da[0]+&quot;</div>&quot;;
month = &quot;<div class='month'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
day = &quot;<div class='day'>&quot;+da[2].slice(0,2)+&quot;</div>&quot;;
year = &quot;<div class='year'>&quot;+da[3]+&quot;</div>&quot;;
document.write(month+day+year);
}
</script></code></pre><br />
Im Origiginal-Tutorial habe das Script erklärt. Die Anpassung ist hier eigentlich bloss, dass wir den Wochentag ausblenden und das Komma nach dem Tag entfernen. Da der Zeitstempel das Format nicht unterstützt, muss das Script erweitert werden, doch es funktioniert noch immer gleich und spaltet das Datum in seine einzelnen Komponenten auf.<br />
<br />
<h3>Einbau des <i>fancy Dates</i></h3>Als nächstes müssen wir dieses Script ausführen, es muss also auch aufgerufen werden. Dazu müssen wir die ursprüngliche Gestaltung des Datums (Darstellung als Heading) aufheben und unsere neue Ansicht einfügen.<br />
<br />
Dazu sucht ihr in eurem Code nach folgendem Schnipsel. (den werdet ihr drei Mal finden) <br />
<br />
<pre><code class="language-markup"><b:if cond='data:post.dateHeader'></code></pre><br />
Es gibt zwei Schnipsel-Arten, die mit dieser Zeile beginnen.<br />
Einmal:<br />
<br />
<pre><code class="language-markup"><b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if></code></pre><br />
und:<br />
<br />
<pre><code class="language-markup"><b:if cond='data:post.dateHeader'>
<div class='date-header'>
<span><data:post.dateHeader/></span>
</div>
</b:if></code></pre><br />
Beide Schnipsel <b>ersetzt</b> ihr jeweils durch folgendes:<br />
<br />
<pre><code class="language-markup"><span class='date-header'>
<div id='date'>
<script> replace_date(&#39;<data:post.timestamp/>&#39;); </script>
</div>
</span></code></pre><br />
Schaut euch das in der Vorschau an, und wenn es so aussieht wie unten auf dem Bild, habt ihr alles richtig gemacht. Dann speichert ihr es. Der schwierigste Part ist geschafft.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWMdNTM5-ZbnHk06ZxFsOHT5F3rrpTY6JP3FR8QqmS5Gk30rFHzrIixRsRBkJymN4zN-JM2BQkdzgfxl03S_NItPjCVyGq_AxzCBEi_82AgAm1DJYbgJ_DlXlRembBBpmYfiNf0Ij45ed-/s1600/d5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWMdNTM5-ZbnHk06ZxFsOHT5F3rrpTY6JP3FR8QqmS5Gk30rFHzrIixRsRBkJymN4zN-JM2BQkdzgfxl03S_NItPjCVyGq_AxzCBEi_82AgAm1DJYbgJ_DlXlRembBBpmYfiNf0Ij45ed-/s1600/d5.gif" /></a><br />
<br />
<h3>CSS!!! (finally)</h3>Okay, jetzt geht's endlich an die CSS. Ich hab mich wie gezeigt für einen Kreis entschieden, aber eigentlich sind euch keine Grenzen gesetzt, jetzt könnt ihr echt richtig kreativ werden.<br />
Ihr könnt eure CSS eigentlich einfügen wie ihr wollt. Sei es im Vorlagendesigner oder in einem HTML-Gadget. Da ich meine CSS gerne beisammen habe, mache ich das im Code direkt drin, also werde ich euch das auch erklären.<br />
<br />
Sucht nach<br />
<pre><code class="language-markup">]]></b:skin></code></pre><br />
Achtet bitte darauf, dass ihr eure CSS wirklich vor der eckigen Klammer einfügt. Oft<br />
rutscht die schliessende Klammer der letzten CSS-Anweisung nach unten und euer schliessendes Skin-Tag sieht so aus:<br />
<br />
<pre><code class="language-markup">}]]></b:skin></code></pre><br />
Wenn ihr davor eure CSS einfügt, wird sie keine Wirkung haben, denn sie ist innerhalb einer anderen Anweisung.<br />
Falls ihr die geschweifte Klammer habt, fügt zuerst einen Zeilenumbruch nach ihr ein und kopiert dann die CSS rein.<br />
<br />
<b>Über</b> dieses Skin-Tag kopiert ihr eure CSS rein.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EwscdcyruvzYD2e7sYCu4FNPD4FPlZA10xazJQ0Hj1qpoEcmbNhlyQHpWqPIM_Pi_u_OGmyIe6xDWtsN1cAQ8aKUYkRo9cLhqzPnYBkSDPK81a5N4ycf8gznL9yShTey-mT-ILwJ-hUQ/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EwscdcyruvzYD2e7sYCu4FNPD4FPlZA10xazJQ0Hj1qpoEcmbNhlyQHpWqPIM_Pi_u_OGmyIe6xDWtsN1cAQ8aKUYkRo9cLhqzPnYBkSDPK81a5N4ycf8gznL9yShTey-mT-ILwJ-hUQ/s1600/4.png" /></a><br />
<br />
Das <i>Hauptdesign</i> machen wir mit <b>span.date-header</b>und <b>#date</b>. Diese beiden bilden das "äußere Design". Auch die <b>Positionierung</b> findet hier statt.<br />
<br />
<blockquote>Bisher hatte ich hier die CSS für den Kreis, da diese CSS aber ziemlich unsauber war, habe ich sie entfernt und möchte euch hier einfach meine Sammlung angeben. Verschiedene Styles, die ihr relativ einfach einfügen und dann auch personalisieren könnt.</blockquote><br />
<h2>Sammlung von verschiedenen Styles</h2>--> <b><a href="https://googledrive.com/host/0Bz6HRVCs7oBaQ1FCNDBkbEltMU0/index.html">Check it out!</a></b><br />
Ich habe jetzt bei der CSS mit Kommentaren auch jede einzelne Zeile erklärt, damit die Bearbeitung so einfach wie möglich wird.<br />
<br />
Wenn ihr die CSS eingefügt habt, seit ihr eigentlich fertig, dann könnt ihr mit der Personalisierung anfangen.<br />
<br />
<br />
<h3>Personalize</h3>Das ist CSS, die mit Platzierungen zutun habt. Jeder Blog hat andere Masse, funktioniert etwas anderes, also funktioniert sie nicht immer sofort perfekt. Aber mit ein klein wenig Aufwand, kann man das sehr schnell anpassen.<br />
Was die Farben in CSS angeht: Ich habe einige in RGBA angegeben, wozu ich einen Post geschrieben habe (<a href="http://bekreatief.blogspot.ch/2012/09/quicktip-farben-mit-transparenz.html" target="_blank">hier</a>)<br />
Und für schnelle Farbcodes, klickt mal bitte <a href="http://www.colorpicker.com/" target="_blank">hier</a>. <br />
<br />
Damit ihr diesen Prozess noch einmal "live" sehen könnt, habe ich noch ein Video gemacht, in der ich den Kreis sowie das Fähnchen (das enorm viele Probleme zu verursachen scheint) einbaue und noch ein paar grössere Änderungen vornehme.<br />
<br />
<iframe width="640" height="360" src="//www.youtube.com/embed/tysvKYCHVFc?feature=player_detailpage" frameborder="0" allowfullscreen></iframe><br />
<br />
<h3>Troubleshooting</h3>Im Video seht ihr, dass ich eigentlich alles direkt im Editor anpasse, damit die Änderungen direkt gespeichert werden. Ich empfehle das jedem, der sich seine Schritte nur schlecht merken kann und lieber auf Nummer sicher geht. Allen anderen, empfehle ich einmal CSS einzufügen, zu speichern und dann den Testblo anzugucken. Wenn ihr dan Rechtsklick auf das Element macht, könnt ihr <b>Element untersuchen</b> auswählen und CSS direkt bearbeiten. Sobald ihr mit den Änderungen zufrieden seid, könnt ihr die Änderungen auch im Editor übernehmen.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4zfzAQd3rP-k6IVs4UzwyVRGbdQKfLcXuOLrZHnCgDJJi5dQlZELJq1KVpwepgVNxl_fb9yCEbsk3SA4dvHpx-hfOmaWpmxA44G40I54mKG0nYdZll6oQpdgByOTXsKjtFySPSR6RM9wm/s1600/untersuchen_1.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4zfzAQd3rP-k6IVs4UzwyVRGbdQKfLcXuOLrZHnCgDJJi5dQlZELJq1KVpwepgVNxl_fb9yCEbsk3SA4dvHpx-hfOmaWpmxA44G40I54mKG0nYdZll6oQpdgByOTXsKjtFySPSR6RM9wm/s1600/untersuchen_1.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9f0atl0ZOYmrG6GoSNpH6zAUvZBWa6TN2LWdpSyXzSGm-BlmiR0c_RfMJRaMnInneu7frc8FfGyI9oJOLcaRJtY2Afp6Bil5ggEOaTdxZRoZfx39slvHeCkNleovSrnRVcXLuT6v9Jg_h/s1600/untersuchen.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9f0atl0ZOYmrG6GoSNpH6zAUvZBWa6TN2LWdpSyXzSGm-BlmiR0c_RfMJRaMnInneu7frc8FfGyI9oJOLcaRJtY2Afp6Bil5ggEOaTdxZRoZfx39slvHeCkNleovSrnRVcXLuT6v9Jg_h/s1600/untersuchen.jpg" /></a><br />
<br />
Okay, kommen wir zu den häufigsten Problemen.<br />
Ich hoffe, dass das Video die Änderunge verdeutlicht und euch einen Weg zeigt, wie ihr das Problem lösen könnt, aber hier sonst auch noch in geschriebener Form.<br />
<br />
<b>Bei mir klappt alles, bis zum Punkt mit der CSS</b><br />
Lies dir den Post noch einmal ganz genau durch. Dann siehst du dir das Video an. Ich habe alles im Originaltempo gelassen, damit man ganz genau sehen kann, was gemacht wird. Dann sollte das klappen.<br />
<br />
<b>Mein Datum ist zu weit aussen/innen/Abstand nach oben ist so riesig...</b><br />
Da wird was mit der Positionierung nicht stimmen.<br />
Verändere <em>left</em> bzw. <i>right</i> bzw. <i>top</i>-Werte. Verändere erst die Werte die vorhanden sind, ehe du eigene neue hinzufügst.<br />
<br />
<b>Wie kann ich die Farbe wechseln</b><br />
Ersetze den Farbcode. Es funktioniert jeder Farbcode, konsultiere einmal beide links und wenn du noch mehr Informationen brauchst, hilft Onkel Google sicher, aber bei Schwierigkeitsstufe 5 erwarte ich zumindest Wissen darüber, wie man Farben ausdrückt.<br />
<br />
<b>Wie wechsle ich den Hintergrund vom Fähnchen</b><br />
Das ist verständlich. Hier ist nicht der Background vorhanden, sondern das ist mit bodern gemacht. Jeder der mit den Fähnchen arbeitet, sollte mal meinen <a href="http://bekreatief.blogspot.com/2013/05/css-triangle-mania.html">Triangle Mania</a> Post lesen, ich denke danach wird es wesentlich einfacher sein, das ganze anzupassen.<br />
<br />
<b>Ich habe ein anderes Problem, das total seltsam ist und ich kann es einfach nicht lösen</b><br />
Schreib mir! Aber zuerst: lies dir die Kommentare durch. Es sind 300+, ich habe die oben gestellten Fragen mit einigen bearbeitet und habe ganz ehrlich die Nase voll immer das gleiche zu schreiben. Wenn es wirklich ein Problem ist, das nicht banal ist kümmere ich mich gerne darum, es liegt mir am Herzen, das ihr ans Ziel kommt, aber momentan hab ich nicht genug Zeit das für jeden einzelnen zu machen.<br />
Trotzdem versuche ich jede Email zu beantworten.<br />
<br />
Ihr könnt mich über mein <a href="http://bekreatief.blogspot.ch/p/contact_23.html">Kontaktformular </a> anschreiben. Schickt mir einfach eure Mailadresse, eine Beschreibung des Problems und einen Link wo ich mir das Problem ansehen kann und dann schreib ich euch zurück mit meinen Vorschlägen.<br />
Es liegt mir bei Tutorials am Herzen, dass alle die es versuchen auch zum Ergebnis kommen. Es ist eben kein einfaches Unterfangen, aber das kann man schaffen. :)Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com9tag:blogger.com,1999:blog-1589905134039127183.post-39160829836021857552014-04-22T00:46:00.000+02:002015-10-26T15:14:29.962+01:00[PhotoShop] Blurry Dreams Text EffectOh Mann, der letzte Post hier ist auch schon Ewigkeiten her...<br />
Die Inspiration hat mich momentan etwas verlassen, aber heute hab ich mit meinem neuen Photoshop CS6 (es leben Studentenrabatte von -80%!) etwas herumexperimentiert. Und weil ich fand, dass dieser Effekt für einen Header eigentlich sicher schön funktionieren könnte, möchte ich ihn mit euch teilen. :)<br />
<br />
<i>Man, it's been ages since my last post...<br />
Inspiration has decided to leave me for a while, so it seems. But today I was experimenting with my new Photoshop CS6 (thanks to student reduction from 80 percent!) and since I really liked the end results and though it might look really nice as a header I wanted to share it with you :)</i><br />
<a name='more'></a><br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/bloom4.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/bloom4.jpg"></a><br />
<br />
Okay, legen wir gleich los.<br />
<br />
<h2>Materials</h2>Der Hautpteil wird mit Actions gemacht, also ladet euch <a href="http://lieveheersbeestje.deviantart.com/art/Soft-red-Photoshop-Action-277607734">1</a>, <a href="http://lieveheersbeestje.deviantart.com/art/Photoshop-Vintage-Actions-296228815">2</a> und <a href="http://lieveheersbeestje.deviantart.com/art/Photoshop-Color-play-effects-350668021">3</a> herunter und wer die <a href="http://www.dafont.com/ayosmonika.font">Schrift</a> mag, darf die natürlich auch installieren. Wie man Schrift und Actions installiert, werde ich in diesem Tutorial nicht abdecken, aber das Internet sollte hier ganz gut Abhilfe leisten ^^<br />
<br />
<i>The main look will be achived using Actions, so you want to download <a href="http://lieveheersbeestje.deviantart.com/art/Soft-red-Photoshop-Action-277607734">1</a>, <a href="http://lieveheersbeestje.deviantart.com/art/Photoshop-Vintage-Actions-296228815">2</a> and <a href="http://lieveheersbeestje.deviantart.com/art/Photoshop-Color-play-effects-350668021">3</a> and who likes the <a href="http://www.dafont.com/ayosmonika.font">font</a> can install it as well. I'm not gonna explain how to install fonts and actions, but if you don't know how to do that, google should be able to find an answer for you ^^</i><br />
<br />
<h2>Background</h2>Okay, als erstes öffnet ihr euer Bild. Ich hab den Effekt bisher nur mit Blütenbildern ausprobiert, aber da dürft ihr gerne kreativ sein.<br />
<br />
<i>Okay, first you want to open up your image. I only tried using floral images up until now but you are free to be creative here.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/1.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/1.jpg"></a><br />
<br />
Und dann kommt schon die erste Aktion dran, die dann in diesem Fall Soft red wäre.<br />
<br />
<i>And then you want to add the first action, which is soft red.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/2.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/2.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/3.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/3.jpg"></a><br />
<br />
Dann fügen wir Blueberry vom Vintage Actions Pack hinzu.<br />
<br />
<i>Then we add blueberry from the vintage actions.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/4.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/4.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/5.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/5.jpg"></a><br />
<br />
Und nun kommt sweet rainbow hinzu.<br />
<br />
<i>Then sweet rainbow</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/6.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/6.jpg"></a><br />
<br />
Davon entfernen wir ein paar Ebenen, weil es sonst meiner Meinung nach etwas zu viel wird.<br />
<br />
<i>From this folder we'll remove a few layers, because I don't like them in combination with the other actions.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/7.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/7.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/8.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/8.jpg"></a><br />
<br />
<h2>Text</h2>Kommen wir nun zum Text. Platziert den Text an einer anderen Position, als ihr ihn schlussendlich haben wollt. Zum Beispiel am oberen Rand.<br />
<br />
<i>Now for the text. Place it somewhere you don't want to have it in the end. For example, in the upper corner.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/9.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/9.jpg"></a><br />
<br />
Diesen Text wollen wir nun markieren. Dazu klicken wir in der Ebene auf das Textsymbol während wir STRG/CMD gedrückt halten.<br />
<br />
<i>We want to select this text now. To do that fastest you want to click onto the textsymbol in the layer while pressing CTRL/CMD.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/10.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/10.jpg"></a><br />
<br />
Während der Text selektiert ist, wählen wir die Bildebene aus und klicken dann STRG/CMD+J, das hat den Effekt, dass nur der selektierte Teil der Hintergrundebene kopiert wird.<br />
<br />
<i>While the text is selected, click on the background layer and press CTRL/CMD+J. This will create a copy of the selected part of the background layer.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/11.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/11.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/12.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/12.jpg"></a><br />
<br />
Die Text-Ebene können wir nun löschen.<br />
<br />
<i>The text-layer can be deleted now.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/13.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/13.jpg"></a><br />
<br />
Und nun können wir den Text an der Stelle platzieren, an der wir ihn schlussendlich haben wollen.<br />
<br />
<i>Now let's place the text in its definite position.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/14.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/14.jpg"></a><br />
<br />
Als nächstes markieren wir die Ebene wie zuvor und machen das ganze mit einem Blur unscharf.<br />
<br />
<i>Next we select the layer like before and add some blur to it.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/15.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/15.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/16.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/16.jpg"></a><br />
<br />
Und dann fügen wir dem Text noch etwas Style hinzu.<br />
<br />
<i>And then let's add some style to the text layer.</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/17.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/17.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/18.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/18.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/19.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/19.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/20.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/20.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/21.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/21.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/22.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/22.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/23.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/23.jpg"></a><br />
<br />
Und dann sind wir schon am Ende angekommen. :)<br />
<br />
<i>And then we're already done :)</i><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/bloom4.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/bloom4.jpg"></a><br />
<br />
<a href="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/bloom_before_after.jpg"><img src="https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/ps_bloom_tut/bloom_before_after.jpg"></a>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0tag:blogger.com,1999:blog-1589905134039127183.post-10580390547198128342014-02-02T21:31:00.001+01:002015-10-26T15:14:54.192+01:00[BLOGGER] Remove Attribution add your own Copyright ✤✤<b>Update</b><br />
Da dieser Post einer der meistbesuchten ist und mittlerweile etwas veraltet ist, hab ich ihn jetzt überarbeitet.<br />
<br />
<i>Since this post is one of the most popular and a little old already, I decided to revise it.</i><br />
<hr><br />
Die Blogger-Attribution. Man kann zwar sein eigenes Copyright hinzufügen, aber powered by blogger und die Information welche Vorlage man verwendet, bleiben vorhanden. Mich hat das früher, als ich noch die Blogger-Templates verwendet habe, immer extrem genervt und deswegen habe ich mein eigenes Copyright geschrieben. Wie ihr das macht, zeige ich euch in diesem Tutorial.<br />
<br />
<i>The Blogger Attribution. You can add your own text, but there still remains information about the template and who powers the site. I never liked it, so I wrote my own copyright information. It is done very easily. Just follow these simple steps.</i><br />
<a name='more'></a><br />
<br />
Öffnet den HTML-Code eurer Vorlage und sucht dann mithilfe von "Gehe zu" die Attribution.<br />
<br />
<i>Open up your code and find the attribution.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTHIa6h5XlPVk2VWcYNwIL6r9Zn5JH2yp9X0tWhtDXBk8RiDughKUW4alTjzaGXuj4vylaIKoMoRXpvP4_ffRKLM74AO7VRfa8NKIfWrEwnFT1fRLGNJMwpaUuoQ6nbmH1htoQHUrvbnd/s1600/widget.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTHIa6h5XlPVk2VWcYNwIL6r9Zn5JH2yp9X0tWhtDXBk8RiDughKUW4alTjzaGXuj4vylaIKoMoRXpvP4_ffRKLM74AO7VRfa8NKIfWrEwnFT1fRLGNJMwpaUuoQ6nbmH1htoQHUrvbnd/s1600/widget.png" /></a><br />
<br />
Dank Google sind jetzt alle Widgets zusammengeklappt, auf eine Zeile. Markiert das ganze Widget und löscht es.<br />
<br />
<i>Thanks to google all widgets are now shortened to fit one line. Select the whole widget and delete it.</i><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3LgmThc3ij0tg-IsVc4R58zRyo5ZqD8rHwwaHNpGHr6tsdmj7fJEvX3u7oH5wdrp94aA71hyphenhyphenIqYmQWg5dvhyphenhyphendQAWiHoatB0QRblaAPzpk3ACHUnOwKuLlnoGztQ0Iiwy3mIt5snk8zopF/s1600/select.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3LgmThc3ij0tg-IsVc4R58zRyo5ZqD8rHwwaHNpGHr6tsdmj7fJEvX3u7oH5wdrp94aA71hyphenhyphenIqYmQWg5dvhyphenhyphendQAWiHoatB0QRblaAPzpk3ACHUnOwKuLlnoGztQ0Iiwy3mIt5snk8zopF/s1600/select.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKaxYrVf4Z0rPycFeZD_kbooK0hEx-uJvhOVCCitrPzxsV5LgJvrBslQ4a1CPBOpCG4LD8G-Jw_v__vxBmdSxkLt-yaGZeIRBhMMs5cd2oQ0y0mJIqs-Fdh8SyiGCWyV437vZzVAN-RzB/s1600/delete.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKaxYrVf4Z0rPycFeZD_kbooK0hEx-uJvhOVCCitrPzxsV5LgJvrBslQ4a1CPBOpCG4LD8G-Jw_v__vxBmdSxkLt-yaGZeIRBhMMs5cd2oQ0y0mJIqs-Fdh8SyiGCWyV437vZzVAN-RzB/s1600/delete.png" /></a><br />
<br />
Sucht als nächstes das schliessende body-tag.<br />
<br />
<i>Next search for the closing body tag.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKEGR24TVFNYTEqmLiR5hgKC7dzUzbOTZjn-oM6hiSN0Xf82xuN5cKpNRNf6UaLQB5_BrEgcaKRS35fNjll0jY0WABbf2OkvVt8gch562h2ncTl8S4bWn6Sthd8946FnDWlLwToAu-miO/s1600/bodytag.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKEGR24TVFNYTEqmLiR5hgKC7dzUzbOTZjn-oM6hiSN0Xf82xuN5cKpNRNf6UaLQB5_BrEgcaKRS35fNjll0jY0WABbf2OkvVt8gch562h2ncTl8S4bWn6Sthd8946FnDWlLwToAu-miO/s1600/bodytag.png" /></a><br />
<br />
Oberhalb davon fügen wir das Copyright ein. In einen div-container packen wir unsere Information rein mit einem Homelink, der mit dem Blog-Namen versehen wird. Dann noch Jahr und was ihr noch so in eure Credits packen wollt (Infos über das Hintergrundbild, allfällige Hilfestellungen etc.)<br />
<br />
<i>Above that we place our copyright. In a div-container we pack our information with a homelink written as our blogname, the year and any other information you might wanna add.</i><br />
<br />
<pre><code class="language-markup"><div class='credit'> Design and Content &#169; <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | 2014.</div></code></pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWb2xPfk3RXMA3Sd0cTI7xJFJrn6AVha6sfbaWwZ-mAu70oCyhyphenhyphenqF5tp_MFtJbyd2JhW22g6onixusQ3x7t9vy62HSUf-jjOQ-lGtx76tlwHs-2KQJ4gv8k1kARsBtiNxOBpAmY8Ze_kvF/s1600/credit.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWb2xPfk3RXMA3Sd0cTI7xJFJrn6AVha6sfbaWwZ-mAu70oCyhyphenhyphenqF5tp_MFtJbyd2JhW22g6onixusQ3x7t9vy62HSUf-jjOQ-lGtx76tlwHs-2KQJ4gv8k1kARsBtiNxOBpAmY8Ze_kvF/s1600/credit.png" /></a><br />
<br />
Sucht nach<br />
<br />
<i>Search for</i><br />
<br />
<pre><code class="language-markup">]]></b:template-skin></code></pre><br />
Oberhalb davon fügen wir die CSS ein. Ihr könnt hier machen was ihr wollt, ich hab ihr das ganz simpel gemacht.<br />
<br />
<i>Above that you put your CSS. You can do whatever you want, I just decided on a very simple look.</i><br />
<br />
<pre><code class="language-css">.credit{
width: 100%
padding:10px;
text-align:center;
font-size: 12px;
position: relative;
bottom: 20px;
}</code></pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT03IQiaeFWYJHMhlyAjM7O0S0pVHTMVo5kWiT6zjn1oOMWLveW7KdXbbSi3K9KoFXgkjJTP1omvVlgPCAKNZrh1wU6HFEMZfJR5njXn0Ojv9tP-witgyCHC452Qw8ya52nDfZnZ-sbjJV/s1600/css.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT03IQiaeFWYJHMhlyAjM7O0S0pVHTMVo5kWiT6zjn1oOMWLveW7KdXbbSi3K9KoFXgkjJTP1omvVlgPCAKNZrh1wU6HFEMZfJR5njXn0Ojv9tP-witgyCHC452Qw8ya52nDfZnZ-sbjJV/s1600/css.png" /></a><br />
<br />
Und am Ende sieht es so aus:<br />
<br />
<i>And that's what your result should look like.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicp8bn2acYpyZe1PYQj0VhDirBuVtNsxKyRRaNBy6Di0G7WTXdLeJcC7VECsgU4ohQ4Jt6yEHl1WoJHuKCeFhOCzY0pyjCNk1zTdoko_SOK9Dh5NFKIjyzR3WTN0TCRwRz5MaTlK1bhDjT/s1600/result.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicp8bn2acYpyZe1PYQj0VhDirBuVtNsxKyRRaNBy6Di0G7WTXdLeJcC7VECsgU4ohQ4Jt6yEHl1WoJHuKCeFhOCzY0pyjCNk1zTdoko_SOK9Dh5NFKIjyzR3WTN0TCRwRz5MaTlK1bhDjT/s1600/result.png" /></a>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com6tag:blogger.com,1999:blog-1589905134039127183.post-84923358103212346972014-01-20T23:18:00.000+01:002015-10-26T15:14:54.214+01:00[BHPPS] Image ThumbnailsNach einer gefühlten Ewigkeit mal wieder ein neuer Style für die Startseite. Diesmal sind es Bild-Thumbnails, die beim hovern Titel und Snippet anzeigen.<br />
Die Bilder haben ein fixiertes Seitenverhältnis von 1:1 und sind in Spalten angeordnet. Wenn man auf das Bild klickt, öffnet sich der Post wie gewohnt.<br />
Ich mag diesen Style total, allerdings erfordert er, dass in jedem Post ein Bild vorkommt, ansonsten funktioniert das nicht wirklich. Es ist etwas anspruchsvoller als die letzten Styles, aber optisch der harmonischste, wenn ihr mich fragt.<br />
Die Inspiration kam mir durch <a href="http://tympanus.net/Tutorials/CircleHoverEffects/" target="_blank">Codrops</a>.<br />
<br />
<i>After quite some time a new style for the home page. This time it's image thumbnails which showcase title and snippet as soon as you hover above them. The images have a fixed aspect ratio of 1:1 and are ordered in collumns. If you click on the picture it'll open up the post just like it normally would.<br />
I really like this style, but it does require an image in every post, otherwise it won't work. It is a little harder than the last ones, but the most harmonic looking if you aks me.<br />
I got the inspiration for this look at <a href="http://tympanus.net/Tutorials/CircleHoverEffects/" target="_blank">Codrops</a>.</i><br />
<br />
<a name='more'></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0BraXNLkUIpltcgpYGAMn8JUExLayTlOlOOK0FPNAJXtcnxIBQ76LzXbE_KkpUSFOpg2TZRYkCpa7LGKtb8XykJleHUjg2WGp8xYJhzSxbCBp7ZKFfi1WHBFMOdFxlzKuWjQKT2AHDhyphenhyphens/s1600/image-thumbs.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0BraXNLkUIpltcgpYGAMn8JUExLayTlOlOOK0FPNAJXtcnxIBQ76LzXbE_KkpUSFOpg2TZRYkCpa7LGKtb8XykJleHUjg2WGp8xYJhzSxbCBp7ZKFfi1WHBFMOdFxlzKuWjQKT2AHDhyphenhyphens/s1600/image-thumbs.png" /></a><br />
<br />
Und damit ihr das noch seht mit dem hover-Effekt, habe ich eine <a href="http://kreatief-imagethumbsdemo.blogspot.com">Demoseite</a> für euch, die ihr gleich hier unten sehen könnt.<br />
<br />
And so you can see the hover-effect I built a <a href="http://kreatief-imagethumbsdemo.blogspot.com">demopage</a> for you, which can just be seen underneath.<br />
<br />
<iframe src="http://kreatief-imagethumbsdemo.blogspot.com" width="100%" height="500px"></iframe><br />
<br />
<h3>Basic Idea</h3>Die Grundidee ist simpel. Wir haben einen Container, in dem wir ein span haben, der Titel sowie snippet enthält.<br />
<br />
<i>The basic idea is very simple. We have a container in which we place a span containing the title as well was the snippet.</i><br />
<br />
<pre><code class="language-markup"><a href="POST_URL">
<div>
<span>
<h3>Title</h3>
<p>Snippet</p>
</span>
</div>
</a></code></pre><br />
Was wir im Grunde tun, ist das Bild als Hintergrundbild für den div-Container zu definieren. Das gibt uns die Möglichkeit das Bild "zuzuschneiden", indem wir es als "cover"-Hintergrundbild definieren. Ganz so simpel ist es allerdings leider nicht, aber im Grunde ist es das, was wir machen werden.<br />
<br />
<i>What we basically do is set the image as background of the container. This gives us the ability to crop the image into the correct ratio, by setting it as a "cover"-background. It is not all that easy, but basically, that's what we are gonna do.</i><br />
<br />
<h3>Five</h3>Wie immer machen wir das Ganze mit Five. Ich habe dem ganzen noch Bootstrap-CSS hinzugefügt und ein paar Zeilen CSS geschrieben.<br />
<br />
<i>As allways we're gonna accomplish this look with five. I added bootstrap-css and a few lines of CSS.</i><br />
<br />
<a href="https://github.com/5202/five/blob/classic_comments/five.xml" class="buttonbg" target="_blank"><i class="fa fa-external-link"></i> Five</a> | <a href="http://getbootstrap.com/getting-started/" class="buttonbg" target="_blank"><i class="fa fa-external-link"></i> Bootstrap</a><br />
<br />
Bei mir sieht das dann so aus:<br />
<br />
<i>That's what it looks like for me:</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgChd2RWT_E1ZNhEcX9UScLQuVM0g8JwQkXxlUv759LFbffrgA6jUFfdlUCa1uvjuCENJsWGcejvw1GDouwDMfiYe0EflY26SwMMZx7L90S3ygGoYLVOB4kZT0vS64AnPuVTa2hRTQNoQJH/s1600/before.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgChd2RWT_E1ZNhEcX9UScLQuVM0g8JwQkXxlUv759LFbffrgA6jUFfdlUCa1uvjuCENJsWGcejvw1GDouwDMfiYe0EflY26SwMMZx7L90S3ygGoYLVOB4kZT0vS64AnPuVTa2hRTQNoQJH/s1600/before.png" /></a><br />
<br />
Als nächstes müssen wir jQuery einfügen, da wir ein Script werden verwenden müssen.<br />
Dazu geht öffnet ihr die jQuery-Seite und scrollt ganz nach unten. Dort werdet ihr den Link für die aktuellste Version finden.<br />
<br />
<i>Next we have to add jQuery because we'll have to use a script.<br />
Just open up the site and scroll all the way down. You'll find the access link to the most recent version.</i><br />
<br />
<a class="buttonbg" target="_blank" href="http://jquery.com"><i class="fa fa-external-link"></i> jQuery</a><br />
<br />
Sucht dann in eurem Blogger-Code nach dem schliessenden body-Tag (<code class="language-markup"></body></code>) und fügt oberhalb davon den Link ein, der wie folgt aussieht:<br />
<br />
<i>Search in your code the closing body tag(<code class="language-markup"></body></code>) and put the script just above it, like that:</i><br />
<br />
<pre><code class="language-markup"><!-- jQuery -->
<script src='QUICK_ACCSESS_LINK'/></code></pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYM7lhHgXCX2ERAqq0_6g9CFHi2ll6wl0Tcj5dcmMWTi1ir6Z4jvgoyZDIrGRSHpDrhfhpg4xpx6GBVRtKjMYKnH9Aa1C1esFDoiGutmq8VyvCaEwG6OZQHwe-TILnzL7TM08nuaUgkLub/s1600/jquery.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYM7lhHgXCX2ERAqq0_6g9CFHi2ll6wl0Tcj5dcmMWTi1ir6Z4jvgoyZDIrGRSHpDrhfhpg4xpx6GBVRtKjMYKnH9Aa1C1esFDoiGutmq8VyvCaEwG6OZQHwe-TILnzL7TM08nuaUgkLub/s1600/jquery.png" /></a><br />
<br />
<h3>Thumbnail Markup and Script</h3>Okay, bevor ich das Script erkläre, werde ich kurz auf das Markup eingehen, das wir für die Thumbnails verwenden müssen. In Blogger gibt es eine Möglichkeit das erste Bild eines Posts in einem image-Tag einzufügen, allerdings nicht in der CSS. In der CSS kann man nur "reale" Links einfügen, die man hat. Wie also bekommen wir den Link in die CSS? Ich habe mir dafür eine Lösung ausgedacht und <a href="https://plus.google.com/u/0/+OliverDoetsch/posts" target="_blank">Oliver</a> war dann so nett mir mit dem Script zu helfen (weil Myri ist unfähig mit jQ...) Das ist ein Punkt, der im neuen Markup Verwendung findet. Und dann natürlich noch die Sache, dass ich die Bilder responsive haben will. Ich habe lange gesucht, aber nach einer Weile habe ich eine Lösung in den Weiten des WWW gefunden, das die ultimative Lösung bringt. Ein Dummy! :D<br />
<br />
<i>Okay, before I go on explaining the script let me talk about the specific markup used for the thumbnails. In Blogger you have the possibility to add the url of the first image of your post in an image tag, but not into the CSS. In the CSS you can only add "real" links, you actually have. So how do you add the link into the CSS. I had an idea and <a href="https://plus.google.com/u/0/+OliverDoetsch/posts" target="_blank">Oliver</a> was nice enough to help me write the script (because Myri and jQ are still not feeling really comfortable with eacht other...) That's one point we need to use. The second is responsiveness. I found a way on how to keep a fixed ratio, after a really long internet search, which is simple and absolutely genious. A dummy!</i><br />
<br />
<a href="http://zipline-media.de/2012/03/tutorial-fixed-aspect-ratio-von-div-container-mit-css/" target="_blank" class="buttonbg"><i class="fa fa-external-link"></i> Fixed Aspect Ratio Responsive</a><br />
<br />
Haben wir das, ergibt sich folgendes Markup:<br />
<br />
<i>Now we have the following markup:</i><br />
<br />
<pre><code class="language-markup"><a expr:href='data:i.url' expr:title='data:i.title'>
<div class='ar_container'>
<div class='ar_dummy'/>
<div class='ar_content'>
<img class='img' expr:src='data:i.firstImageUrl'/>
<span>
<h3><data:i.title/></h3>
<p><data:i.snippet/></p>
</span>
</div>
</div>
</a></code></pre><br />
Wie ihr seht, habe ich das erste Bild des Posts in unserem Hauptcontainer platziert. Was ich im Script mache, ist die URL des Bildes auszulesen und dem Container das Attribut background-image mit der Bild-URL zuzuordnen. Auf diese Weise haben wir für jeden Container das erste Bild des Posts als Hintergrund definiert. <br />
Und so sieht das dann aus:<br />
<br />
<i>As you can see I added the first image of the post inside the main container. What I'm doing in the script is search for the url of the image and add it as the background-image of the main container with CSS.<br />
That's how that looks:</i><br />
<br />
<pre><code class="language-markup"><!-- Responsive 1:1 -->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.ar_content').find('img').each(function(n, image){
var image = $(image);
var thisurl = $(this).attr('src');
image.parents('.ar_content').css('background-image', 'url(' + thisurl + ')');
});
});
//]]>
</script></code></pre><br />
Dieses Script kopiert ihr unterhalb des eben hinzugefügten jQuery-Scripts.<br />
<br />
<i>You wanna paste this scrupt beneath the just added jQuery-Script.</i><br />
<br />
<h3>Markup</h3>Kommen wir zum Verändern des Codes. Seit der neue Editor die eingeklappten includes hat, ist es am einfachsten einfach die ganze Linie zu markieren und komplett zu ersetzen.<br />
Wir verändern zwei includables. Einmal das main und einmal das post.<br />
<br />
<i>Now for the code replacement. Since the new editor does shorten the includables it is far easiert to replace it all in one step, because it's one line only. So we are just gonna replace two of the includables. the main and the post one.</i><br />
<br />
<h4>main includable</h4>ursprünglich:<br />
<br />
<i>original:</i><br />
<pre><code class="language-markup"><b:includable id='main' var='top'>
<!-- posts -->
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
<!-- navigation -->
<b:include name='nextprev'/>
</b:includable></code></pre><br />
neu:<br />
<br />
<i>new:</i><br />
<br />
<pre><code class="language-markup"><b:includable id='main' var='top'>
<!-- index: grid layout -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='grid'>
<b:loop values='data:posts' var='i'>
<b:include data='i' name='post'/>
</b:loop>
</div>
<b:else/>
<!-- item/static page: normal layout -->
<b:loop values='data:posts' var='i'>
<b:include data='i' name='post'/>
</b:loop>
</b:if>
<!-- navigation -->
<b:include name='nextprev'/>
</b:includable></code></pre><br />
<h4>post includable</h4>ursprünglich:<br />
<br />
<i>original:</i><br />
<br />
<pre><code class="language-markup"><b:includable id='post' var='i'>
<article>
<div class='post' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:i.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:i.id' itemprop='postId'/>
<a expr:name='data:i.id'/>
<header>
<div class='post-header'>
<b:if cond='data:i.title'>
<!-- post-title -->
<div class='post-title'>
<h2 itemprop='name'>
<b:if cond='data:i.link'>
<a expr:href='data:i.link'><data:i.title/></a>
<b:else/>
<b:if cond='data:i.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:i.url'><data:i.title/></a>
<b:else/>
<data:i.title/>
</b:if>
<b:else/>
<data:i.title/>
</b:if>
</b:if>
</h2>
</div>
<!-- post-title end -->
<!-- post-date-->
<b:if cond='data:i.dateHeader'>
<div class='post-date'>
<h3 itemprop='date'>
<span><data:i.dateHeader/></span>
</h3>
</div>
</b:if>
<!-- post-date end-->
</b:if>
<!-- post-author -->
<div class='post-author'>
<b:if cond='data:top.showAuthor'>
<span>
<data:top.authorLabel/>
</span>
<b:if cond='data:i.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:i.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:i.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:i.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:i.author/></span>
</span>
</b:if>
</b:if>
</div>
<!-- post-author end -->
</div>
</header>
<!-- post-body -->
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
<div class='post-body' expr:id='&quot;post-body-&quot; + data:i.id' itemprop='description articleBody'>
<data:i.body/>
</div>
<b:else/>
<div class='post-body' expr:id='&quot;post-body-&quot; + data:i.id' itemprop='articleBody'>
<data:i.body/>
</div>
</b:if>
<b:if cond='data:i.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:i.url + &quot;#more&quot;' expr:title='data:i.title'><data:i.jumpText/></a>
</div>
</b:if>
<!-- post-body end -->
<!-- G+ comments -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='i' name='iframe_comments'/>
</b:if>
<!-- G+ comments end -->
<!-- social-buttons -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='social-buttons'>
<span class='g-plusone' data-align='right' data-annotation='bubble' data-size='medium' data-width='300' expr:data-href='data:i.canonicalUrl'/>
<a class='twitter-share-button' data-lang='de' data-size='medium' expr:data-url='data:i.canonicalUrl' href='https://twitter.com/share'>Twittern</a>
<script>
//<![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');//]]>
</script>
</div>
</b:if>
</b:if>
</b:if>
<!-- social-buttons end-->
</div>
</article>
</b:includable></code></pre><br />
neu:<br />
<br />
<i>new:</i><br />
<br />
<pre><code class="language-markup"><b:includable id='post' var='i'>
<article class='col'>
<div class='post' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:i.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:i.id' itemprop='postId'/>
<a expr:name='data:i.id'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Index Style -->
<a expr:href='data:i.url' expr:title='data:i.title'>
<div class='ar_container'>
<div class='ar_dummy'/>
<div class='ar_content'>
<img class='img' expr:src='data:i.firstImageUrl'/>
<span>
<h3><data:i.title/></h3>
<p><data:i.snippet/></p>
</span>
</div>
</div>
</a>
<b:else/>
<!-- Item/Static Page Style -->
<header>
<div class='post-header'>
<b:if cond='data:i.title'>
<!-- post-title -->
<div class='post-title'>
<h2 itemprop='name'>
<b:if cond='data:i.link'>
<a expr:href='data:i.link'><data:i.title/></a>
<b:else/>
<b:if cond='data:i.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:i.url'><data:i.title/></a>
<b:else/>
<data:i.title/>
</b:if>
<b:else/>
<data:i.title/>
</b:if>
</b:if>
</h2>
</div>
<!-- post-title end -->
<!-- post-date-->
<b:if cond='data:i.dateHeader'>
<div class='post-date'>
<h3 itemprop='date'>
<span><data:i.dateHeader/></span>
</h3>
</div>
</b:if>
<!-- post-date end-->
</b:if>
<!-- post-author -->
<div class='post-author'>
<b:if cond='data:top.showAuthor'>
<span>
<data:top.authorLabel/>
</span>
<b:if cond='data:i.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:i.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:i.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:i.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:i.author/></span>
</span>
</b:if>
</b:if>
</div>
<!-- post-author end -->
</div>
</header>
<!-- post-body -->
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
<div class='post-body' expr:id='&quot;post-body-&quot; + data:i.id' itemprop='description articleBody'>
<data:i.body/>
</div>
<b:else/>
<div class='post-body' expr:id='&quot;post-body-&quot; + data:i.id' itemprop='articleBody'>
<data:i.body/>
</div>
</b:if>
<b:if cond='data:i.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:i.url + &quot;#more&quot;' expr:title='data:i.title'><data:i.jumpText/></a>
</div>
</b:if>
<!-- post-body end -->
<!-- classic comments -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='i' name='comment_picker'/>
</b:if>
<!-- classic comments end -->
<!-- social-buttons -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='social-buttons'>
<span class='g-plusone' data-align='right' data-annotation='bubble' data-size='medium' data-width='300' expr:data-href='data:i.canonicalUrl'/>
<a class='twitter-share-button' data-lang='de' data-size='medium' expr:data-url='data:i.canonicalUrl' href='https://twitter.com/share'>Twittern</a>
<script>
//<![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');//]]>
</script>
</div>
</b:if>
</b:if>
</b:if>
<!-- social-buttons end-->
</b:if>
</div>
</article>
</b:includable></code></pre><br />
<h3>CSS</h3>Und jetzt kommt bloss noch die CSS.<br />
Weil ich mich nicht entscheiden konnte, ob mir hell oder dunkel besser gefällt, habe ich sie einfach abwechselnd eingefügt. Wollt ihr nur einer der beiden Looks, entfernt einfach jeweils <code class="language-css">:nth-of-type(odd)</code> bzw. <code class="language-css">:nth-of-type(even)</code> des Looks den ihr haben wollt und den kompletten Teil des jeweils anderen Looks.<br />
<br />
<i>Now there's only the CSS left.<br />
I couldn't decide if I liked light or dark better, so I just added them both alternating. If you just want one look remove either <code class="language-css">:nth-of-type(odd)</code> or <code class="language-css">:nth-of-type(even)</code> and the complete part of the other look.</i><br />
<br />
<pre><code class="language-css">.ar_dummy {
margin-top: 100%;
}
.ar_content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
.ar_container:hover, .ar_dummy:hover, .ar_dummy:hover{
border: 0;
}
.ar_container{
display: inline-block;
position: relative;
overflow: hidden;
width: 100%;
}
.ar_content img{
opacity: 0;
}
.ar_content{
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
transition: all 0.4s ease-in-out;
}
.ar_content span{
position: absolute;
top: 2%;
left: 2%;
right: 2%;
bottom: 2%;
width: 96%;
height: 96%;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
.ar_content span h3 {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 20px;
margin: 0 3%;
padding: 15% 0 0 0;
font-family: 'Open Sans', Arial, sans-serif;
}
.ar_content span p{
padding: 5% 5%;
font-style: italic;
margin: 0;
font-size: 14px;
opacity: 0;
transition: all .2s ease-in-out 0.4s;
width: 100%;
}
.ar_content:hover span{
transform: scale(1);
opacity: 1;
}
.ar_content:hover span p{
opacity: 1;
}
article:nth-of-type(even) .ar_content{
box-shadow: /* innerer Rahmen | inner border */
inset 0 0 0 16px rgba(255, 255, 255, .6);
}
article:nth-of-type(even) .ar_content:hover{
box-shadow: /* innerer Rahmen bei Hover | inner border while on hover */
inset 0 0 0 1px rgba(255, 255, 255, .1);
}
article:nth-of-type(even) .ar_content span {
background: rgba(255, 255, 255, .7); /* Hintergrund des Overlays | background of overlay */
}
article:nth-of-type(even) .ar_content span h3 {
color: #2e2e2e;
}
article:nth-of-type(even) .ar_content span p {
color: #2e2e2e;
border-top: 1px solid rgba(0, 0, 0, .5);
}
article:nth-of-type(odd) .ar_content {
box-shadow: /* innerer Rahmen | inner border */
inset 0 0 0 16px rgba(0, 0, 0, .6);
}
article:nth-of-type(odd) .ar_content:hover {
box-shadow: /* innerer Rahmen bei Hover | inner border while on hover */
inset 0 0 0 1px rgba(0, 0, 0, .1);
}
article:nth-of-type(odd) .ar_content span {
background: rgba(0, 0, 0, .7); /* Hintergrund des Overlays | background of overlay */
}
article:nth-of-type(odd) .ar_content span h3 {
color: ivory;
}
article:nth-of-type(odd) .ar_content span p {
color: ivory;
border-top: 1px solid rgba(255, 255, 255, .5);
}
article{
display: block;
}
.col {
float: left;
margin-left: 3.2%;
margin-bottom: 30px;
}
.grid .col {
width: 22.6%;
}
.grid .col:nth-of-type(4n+1) {
margin-left: 0;
clear: left;
}</code></pre><br />
<h3>Media Queries</h3>Und für die Spalten braucht es wieder Media Queries.<br />
<br />
<i>And for the collumns we need media queries.</i><br />
<br />
<pre><code class="language-css">/* von 4 auf 3 Spalten | from 4 to 3 collumns */
@media screen and (max-width: 1220px) {
.grid .col {
width: 31.2%;
}
.grid .col:nth-of-type(4n+1) {
margin-left: 3.2%;
clear: none;
}
.grid .col:nth-of-type(3n+1) {
margin-left: 0;
clear: left;
}
}
/* von 3 auf 2 Spalten | from 3 to 2 collumns */
@media screen and (max-width: 815px) {
.grid .col {
width: 48.4%;
}
.grid .col:nth-of-type(3n+1) {
margin-left: 3.2%;
clear: none;
}
.grid .col:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}
}
/* von 2 auf 1 Spalten | from 2 to 1 collumns */
@media screen and (max-width: 545px) {
.col {
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}</code></pre><br />
<h3>Done</h3>Und dann war's das schon.<br />
Ich hoffe ihr mögt diesen Look genauso wie ich und wenn ihr noch Fragen habt, einfach stellen. :)<br />
<br />
<i>And then you're done.<br />
I hope you like it just as much as I do and if there are still any questions, feel free to ask. :)</i><br />
<br />
<br />
<h3>More 'bout that</h3>0. <a href="http://bekreatief.blogspot.com/2013/08/blogger-magazine-look-without-js.html">Magazine Look Without JavaScript</a><br />
1. <a href="http://bekreatief.blogspot.com/2013/09/bhpps-part-i-looks-kinda-pinterest.html">Looks Kinda Pinterest</a><br />
2. <a href="http://bekreatief.blogspot.com/2013/09/bhpps-proper-columns.html">Column Style</a><br />
3. CurrentAnonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com1tag:blogger.com,1999:blog-1589905134039127183.post-47248191107691800652014-01-16T14:00:00.000+01:002015-10-26T15:14:54.196+01:00[GIMP] Cutout Images[CSS] ✤✤✤Hallo zusammen :)<br />
Heute möchte ich euch zeigen, wie ihr "Coutout Images" in Gimp erstellt und dann in euren Blog einfügt. Als Cutout Image bezeichne ich Bilder, die so aussehen, als wären sie ausgeschnitten worden. Das heisst in eurem Blog-Container habt ihr ein "Loch", das euren Hintergrund durchscheinen lässt.<br />
Um das ganze zu verbildlichen, habe ich ein Demo geschrieben.<br />
<br />
<i>Hello Everyone :)<br />
Today I want to show you how to create and implement cutout images in your blog. I call them cutout because that's what it looks liks. Inside of your container you'll have an image cut out. I wrote a demo so you can see the effect.</i><br />
<br />
<a class="buttonbg" href="https://googledrive.com/host/0Bz6HRVCs7oBaU0Z3MDRiZUVUNWs/index.html"><i class="fa fa-eye"></i> Demo </a><br />
<br />
<br />
<a name='more'></a><br />
<h3>Gimp</h3>Okay, um so etwas zu machen, öffnet ihr Gimp und erstellt ein neues Bild.<br />
Dann schreibt, zeichnet, erstellt ihr euer Bild, das ausgeschnitten werden soll. Das ganze macht ihr in Schwarz auf weissem Hintergrund (wenn euer Container-Hintergrund weiss ist) Wenn ihr gewisse Details nur halbtransparent haben wollt, dann verwendet ihr grau. Alles was sichtbar bleiben soll, bleibt weiss.<br />
Für mich sah das dann so aus:<br />
<br />
<i>Okay, to create something like this, open up gimp and create a new image.<br />
Then write, draw, create the image that you want to cut out. You are going to do this using black on white (if white is the background of your container). If you wish for some details to be just semi-transparent, use gray. Everything that should remain visible, stays white.<br />
That's what it looked like for me:</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji8lgZveINcdBhZnM-QQtQoX3_r6KAX3GolKmiXcAYy3haqhVHNEyBm8N_642vlAq-DMkPnnwR_2af5UbUbKpyZCJXFTekNT2Y09AwDAYoldzDi3YoKrprTU0w2PfvOnRpx-zENWuQRb2_/s1600/1.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji8lgZveINcdBhZnM-QQtQoX3_r6KAX3GolKmiXcAYy3haqhVHNEyBm8N_642vlAq-DMkPnnwR_2af5UbUbKpyZCJXFTekNT2Y09AwDAYoldzDi3YoKrprTU0w2PfvOnRpx-zENWuQRb2_/s1600/1.png" /></a><br />
<br />
Ich habe das ganze noch auf verschiedenen Ebenen gehabt, damit ich damit experimentieren soll, aber schlussendlich wollen wir nur eine Ebene haben, also müssen wir sie alle zusammenlegen.<br />
Das macht ihr mit <b>Image -> Merge Visible Layers</b><br />
<br />
<i>I had it all on different layers because I find it easier if I can move every element around. But in the end we need one layer. So we need to merge them. Choose <b>Image -> Merge Visible Layers</b></i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuwOpQA8gTGS_BGlKbalc3kVLnyRwEDrwK_K5yhPQOl6wI4eAPEIOfkQhlziFL9CyMloAtOWNBty-qtkFG6n8W6SMcWaBzPIdZ9C9_F9euT-5gXyP7f2jF8SuJSfbBRAMCWe9rtcymdS9r/s1600/2.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuwOpQA8gTGS_BGlKbalc3kVLnyRwEDrwK_K5yhPQOl6wI4eAPEIOfkQhlziFL9CyMloAtOWNBty-qtkFG6n8W6SMcWaBzPIdZ9C9_F9euT-5gXyP7f2jF8SuJSfbBRAMCWe9rtcymdS9r/s1600/2.png" /></a><br />
<br />
Eine einzige Ebene bleibt übrig. Jetzt wird das ganze ausgeschnitten. ^^<br />
Geht zu <b>Color -> Color to Alpha </b> und wählt dann schwarz als zu entfernende Farbe aus.<br />
Alles was schwarz war, wird transparent.<br />
<br />
<i>A single layer is left. Now we cut out. ^^<br />
Go to <b>Color -> Colot to Alpha</b> and choose black as the color to be removed.<br />
Everything that was black is now transparent.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHq_Fm6o7qCAJG_i81ijoHKPj7alhCKzxC34TOVHMhtTRQE_OCgP54dNrjBunTpqZ3FWiWcLg1uZUBZNtbe6pGCTM9_c_N0qVKtQUpbrjj0NrNRuhsl2HkaRVj7LfKHGYDXRXTzFwamhwM/s1600/3.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHq_Fm6o7qCAJG_i81ijoHKPj7alhCKzxC34TOVHMhtTRQE_OCgP54dNrjBunTpqZ3FWiWcLg1uZUBZNtbe6pGCTM9_c_N0qVKtQUpbrjj0NrNRuhsl2HkaRVj7LfKHGYDXRXTzFwamhwM/s1600/3.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipe1OWk1ZqP83KgXpiXTEPyfkbF61uJY1IhhKHzqoje6U6NE9pH8BYM-sFL_BbDhbcQ_SYARZvZKWNrvCI57Xb7vEUgTDV0rjXym1zBtqVdvBneRnzkfofeRTqYMKq93wq75W0EjweN4O_/s1600/4.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipe1OWk1ZqP83KgXpiXTEPyfkbF61uJY1IhhKHzqoje6U6NE9pH8BYM-sFL_BbDhbcQ_SYARZvZKWNrvCI57Xb7vEUgTDV0rjXym1zBtqVdvBneRnzkfofeRTqYMKq93wq75W0EjweN4O_/s1600/4.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJWlrBjsaYK_B5ocZRC2DW6REXc2oOsTPxGMi-cq-jZBTt0vN9N4GkW28uu8Zn4tz13GGhASf2mXF2RhmOmmGEceC-8CGO2aHXhm2SC5ouxXBExF893rsj0IGBmk-DBvxHzzMisd5EbfR_/s1600/5.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJWlrBjsaYK_B5ocZRC2DW6REXc2oOsTPxGMi-cq-jZBTt0vN9N4GkW28uu8Zn4tz13GGhASf2mXF2RhmOmmGEceC-8CGO2aHXhm2SC5ouxXBExF893rsj0IGBmk-DBvxHzzMisd5EbfR_/s1600/5.png" /></a><br />
<br />
Wenn ihr wollt, schneidet das Bild noch zurecht und dann könnt ihr es exportieren. Stellt sicher, dass ihr euer Bild als .png-Datei speichert.<br />
<br />
<i>If you want to, cut the image and then you are ready to export. Make sure you save your image as a .png-file.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwjOXyM0BFbp18G4KOgl1N6XuHroP7iph3H3hAiqR28LNYxsIxkxdfKBns9BTf7eap0n8d82uNv9eYbjwBq73bSeiMc8DzA5PtKytzqDjAE_H0XcZOGfZsl1I8s6xvEE2JE-viikynQFoN/s1600/6.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwjOXyM0BFbp18G4KOgl1N6XuHroP7iph3H3hAiqR28LNYxsIxkxdfKBns9BTf7eap0n8d82uNv9eYbjwBq73bSeiMc8DzA5PtKytzqDjAE_H0XcZOGfZsl1I8s6xvEE2JE-viikynQFoN/s1600/6.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6yV6Zl1e5oFqkNDKDadMphyphenhyphenCBcWtXBGuj0BlCxsYxw1RLqoPRxngS0VsdF1TC3f5NE5nVHotOOYs8eiAYFcdEEKT8g9uamjZ38MDdpdMrHd5iso34kGs0MDgp-q4v5QnO8xpyhUKVKE70/s1600/7.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6yV6Zl1e5oFqkNDKDadMphyphenhyphenCBcWtXBGuj0BlCxsYxw1RLqoPRxngS0VsdF1TC3f5NE5nVHotOOYs8eiAYFcdEEKT8g9uamjZ38MDdpdMrHd5iso34kGs0MDgp-q4v5QnO8xpyhUKVKE70/s1600/7.png" /></a><br />
<br />
Und dann seid ihr ready um das ganze hochzuladen :)<br />
<br />
<i>And then we are ready to upload.</i><br />
<br />
<h3>Add to Blog</h3>Okay, das ganze laden wir jetzt hoch. Ich verwende in meinem Beispiel mein <a href="http://kreatief-minimaresponsivetemplate.blogspot.ch/">Minima Responsive</a> Template. Wenn ihr das in einer anderen Vorlage hochladen wollt, müsst ihr evtl. noch ein paar Zeilen zusätzliche CSS schreiben.<br />
<br />
<i>Okay, we upload it now. I'm using my <a href="http://kreatief-minimaresponsivetemplate.blogspot.ch/">Minima Responsive</a> Template for this example. If you want to use it in a different layout you may need to add a little more CSS.</i><br />
<br />
<h4>Fix Background Image</h4>Damit der Effekt richtig gut aussieht, würde ich den Hintergrund fixieren. Das könnt ihr entweder über den Vorlagendesigner, oder direkt im HTML.<br />
Im Vorlagendesigner entfernt ihr einfach das Häkchen, dass der Hintergrund nicht mitscrollen soll.<br />
<br />
<i>For the effect to look best I'd fix the background. You can do this either in the template designer or directly inside the code.<br />
In the template designer just remove the tick for the background to not scroll.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOlR9_yoIi3epd0BX-Tkkkcnqaa83RhvGCmokPgmviRGksDsHNippYNZ73ES2V5-mFKSLOqNtM_VTnYqrnIdh9UHitHWNUatra9YkGwL5d_LjKnKNw7xXukGcek0l600D6wArS1DfUjjoG/s1600/8.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOlR9_yoIi3epd0BX-Tkkkcnqaa83RhvGCmokPgmviRGksDsHNippYNZ73ES2V5-mFKSLOqNtM_VTnYqrnIdh9UHitHWNUatra9YkGwL5d_LjKnKNw7xXukGcek0l600D6wArS1DfUjjoG/s1600/8.png" /></a><br />
<br />
Ansonsten fügt ihr einfach eine Zeile CSS bei body hinzu:<br />
<br />
<i>Otherwise just add this line to your body-CSS.</i><br />
<br />
<pre><code class="language-css">background-attachment:fixed; </code></pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAXdCG8cUROvNes9ZgpTgIk-H3oXBPTtN5whM8GX-XfxMY_XBEteZjJCfg_fyPzUjlpqjzFxCNnjowKxlFr4CnD_C2K26EG65UX4uNg3m8nVWNyioagP-O8mmixp0MibX4pFWnyK4EV27y/s1600/9.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAXdCG8cUROvNes9ZgpTgIk-H3oXBPTtN5whM8GX-XfxMY_XBEteZjJCfg_fyPzUjlpqjzFxCNnjowKxlFr4CnD_C2K26EG65UX4uNg3m8nVWNyioagP-O8mmixp0MibX4pFWnyK4EV27y/s1600/9.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT-F9_5o9W32BzTLJPqc0WVaq8Z_Zb3wc4Ewezt4pfoT4ChlzFbCCigTi22Ep3fipD_qhJwxSCQC2uoc78Ko8l9sk24fj4nskqBPmjdlQTt8zUUtWV9yIQB4ovrKpNWfmntKb9ZtzSbiud/s1600/10.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT-F9_5o9W32BzTLJPqc0WVaq8Z_Zb3wc4Ewezt4pfoT4ChlzFbCCigTi22Ep3fipD_qhJwxSCQC2uoc78Ko8l9sk24fj4nskqBPmjdlQTt8zUUtWV9yIQB4ovrKpNWfmntKb9ZtzSbiud/s1600/10.png" /></a><br />
<br />
Und damit der Container nicht so oben am Rand klebt, könnt ihr noch einen Rand hinzufügen. Dazu einfach nach folgender CSS suchen:<br />
<br />
<i>And so that the container does not stick to the top, you can add a margin by searching the following CSS</i><br />
<br />
<pre><code class="language-css">.container{
max-widh: 1300px;
background: $(container.background.color);
position: realtive;
margin: 0 auto;
}</code></pre><br />
Und bei der letzten Zeile das 0 von margin durch einen Wert ersetzen, der euch optisch gefällt. Ich habe mich für 100px entschieden, die dann oberhalb und unterhalb des Containers angezeigt werden.<br />
Meine Zeile lautet also:<br />
<br />
<i>And replacing the 0 in margin with the number you like best. for me it was 100px and my finished line looks like this:</i><br />
<br />
<pre><code class="language-css">margin: 100px auto;</code></pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAefYIHAs_AMrUo0Ug_eRAcw1V6lrWvHBCdrjtBnUElWsWkh4JvuG1-I7KIEf8v1ucGF0BfbhVF3pgtp7eKDfMehPCIdAxAmJCTpugyA51spqdUC3BECBoVf4L8-fAzd3zl_US_ypgKQJY/s1600/11.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAefYIHAs_AMrUo0Ug_eRAcw1V6lrWvHBCdrjtBnUElWsWkh4JvuG1-I7KIEf8v1ucGF0BfbhVF3pgtp7eKDfMehPCIdAxAmJCTpugyA51spqdUC3BECBoVf4L8-fAzd3zl_US_ypgKQJY/s1600/11.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhewWAjrrBNcLKKZR6dUU8vJF7d-o6sBZPhx2tdiVfQHeCBTSD_5eIPsrBd5HWQF1oWHrVopvXB45NS6G5WbHnwN64XActkcNcrsjWN2QdHaKZcksnNPfyxQwE0ik2mKOQ8Lk5Oq_lBkRU4/s1600/12.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhewWAjrrBNcLKKZR6dUU8vJF7d-o6sBZPhx2tdiVfQHeCBTSD_5eIPsrBd5HWQF1oWHrVopvXB45NS6G5WbHnwN64XActkcNcrsjWN2QdHaKZcksnNPfyxQwE0ik2mKOQ8Lk5Oq_lBkRU4/s1600/12.png" /></a><br />
<br />
Jetzt können wir das Bild einfügen.<br />
<br />
<i>Now we can add the image</i><br />
<br />
<h4>Version 1: Header Widget</h4>Hier öffnet ihr das Header-Widget und ladet das Bild hoch. Dazu wählt ihr die gleichen Einstellungen aus, wie auf dem Bild gezeigt. Dann speichern.<br />
<br />
<i>Open up the header widget and upload the image making sure to make he same adjustments I did. Then save.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGf_ePDxS30zoArrxIzgvcNRXSc004LfNsmZUnTj908UaNEf8V6typMK2uL5vhyphenhyphenNcFJIJRHeVVEy_2QscJvDnSp3NR994z580ojNepVo6w97Waw4NoEDcUUOvfa1XCiGjMP1Tndg1GJ_d/s1600/13.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGf_ePDxS30zoArrxIzgvcNRXSc004LfNsmZUnTj908UaNEf8V6typMK2uL5vhyphenhyphenNcFJIJRHeVVEy_2QscJvDnSp3NR994z580ojNepVo6w97Waw4NoEDcUUOvfa1XCiGjMP1Tndg1GJ_d/s1600/13.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuOgrqdDcMRCS1jrWqsWSuqRDpaQp0lHglmfyDWIk0oEZfEF23PFDZoBaxz9-bJ_SqQXR28CgIL3DKhqbeh79bNym6HGYJF6D1pg4_hxnY54v1b-wLGeY6nqqwaDPhWiPH_hY2vWB69fbK/s1600/14.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuOgrqdDcMRCS1jrWqsWSuqRDpaQp0lHglmfyDWIk0oEZfEF23PFDZoBaxz9-bJ_SqQXR28CgIL3DKhqbeh79bNym6HGYJF6D1pg4_hxnY54v1b-wLGeY6nqqwaDPhWiPH_hY2vWB69fbK/s1600/14.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjPeKVVAIyXWo2cayIdN7YcMNZfiAemY_gKAKCFBjlhd626fcoa77tJjptufYWCHMXWqnvRCh6ByXhLjiyUBxQd02m9I8udM6e6yTW5cvEz1WhbmqMLV2RbyjrDCearpB_18RVdzvBNRQq/s1600/15.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjPeKVVAIyXWo2cayIdN7YcMNZfiAemY_gKAKCFBjlhd626fcoa77tJjptufYWCHMXWqnvRCh6ByXhLjiyUBxQd02m9I8udM6e6yTW5cvEz1WhbmqMLV2RbyjrDCearpB_18RVdzvBNRQq/s1600/15.png" /></a><br />
<br />
Aussehen tut das ganze dann so:<br />
<br />
<i>I will look like this:</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOlApnGnxwz68dqwnM-6UUQu57B56jZi4AwuMsHs6asl71A1bBqKIzQOvKjQtv2HqyUD3fIcMP9N_qCnDZ1FvhUunfS3caGpuZa8wRAo_kNIYZgvXZ0zjXjw-tiOCbBevssvF23omvfLIU/s1600/16.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOlApnGnxwz68dqwnM-6UUQu57B56jZi4AwuMsHs6asl71A1bBqKIzQOvKjQtv2HqyUD3fIcMP9N_qCnDZ1FvhUunfS3caGpuZa8wRAo_kNIYZgvXZ0zjXjw-tiOCbBevssvF23omvfLIU/s1600/16.png" /></a><br />
<br />
Genau, man kann gar nichts sehen. Das ändern wir nun mit etwas CSS.<br />
Als erstes brauchen wir den Link unseres Hintergrundes. Das könnt ihr entweder im Code suchen, oder aber ihr lasst euch über Rechtsklick auf den Bloghintergrund das Bild anzeigen und könnt die URL aus der Adresszeile kopieren. Speichert euch die URL irgendwo ab.<br />
<br />
<i>Exactly, you can't see anything. We'll change that with a little bit of CSS.<br />
First you need the link of your backgkround. YOu can check in the code or just rightclick on the background, grab the image and get the link there. Save this URL somewhere.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpow4Fd6BB7fYmRmJ2aNqpJVGASKWmYEOOageGWrSC4iGwBGoaw9yNt1udr9LJJ3elXEPI_GqYul0v3HqcvSuIBgq2LN1LMZy8tApppcBgoc6pjwcDI2ap0RkUAbCbPrlwa-6H1Fvrd9eP/s1600/17.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpow4Fd6BB7fYmRmJ2aNqpJVGASKWmYEOOageGWrSC4iGwBGoaw9yNt1udr9LJJ3elXEPI_GqYul0v3HqcvSuIBgq2LN1LMZy8tApppcBgoc6pjwcDI2ap0RkUAbCbPrlwa-6H1Fvrd9eP/s1600/17.png" /></a><br />
<br />
Gut, jetzt kommen wir zur CSS, die wir einfügen.<br />
Die könnt ihr über den Vorlagendesigner hinzufügen, oder im Code.<br />
<br />
Ich mache es im Code.<br />
Dazu sucht ihr nach:<br />
<br />
<i>Okay, now for the CSS. you can add it in the template desinger or in the code. That's what I'm gonna do.<br />
Search for:</i><br />
<br />
<pre><code class="language-markup">]]></b:skin></code></pre><br />
Oberhalb davon fügt ihr folgendes ein. Das Bild wird mit diesem Code gleich noch zentriert. Falls ihr das nicht wollt, entfernt einfach die margin-Zeile.<br />
<br />
<i>Above that put the following. This CSS does center the header at the same time. If you don't want that, just remove the margin-line.</i><br />
<br />
<pre><code class="language-css">#Header1 img{
background: url(BG_URL) repeat fixed;
margin: 0 auto;
}</code></pre><br />
Speichern und der Cutout-Effekt ist fertig. :)<br />
<br />
<i>Save and the cutout-effect is done :)</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0B_ciroWpacgpINUwbXqCXPhFW1iTdzTyoKEtFDH7AYKtoGHnxmhGOdb17IWY2S3rvEHCDZNT6q4JJBrUlXOL5LQt70B7WWkmfFc_VQlFc4vcUqneY2v0yCblHu-fpuJnKRWk6gXYYIW4/s1600/18.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0B_ciroWpacgpINUwbXqCXPhFW1iTdzTyoKEtFDH7AYKtoGHnxmhGOdb17IWY2S3rvEHCDZNT6q4JJBrUlXOL5LQt70B7WWkmfFc_VQlFc4vcUqneY2v0yCblHu-fpuJnKRWk6gXYYIW4/s1600/18.png" /></a><br />
<br />
<h4>Version 2: HTML Widget</h4>Version 2, ziehe ich persönlich vor.<br />
Dafür müsst ihr zuerst das Header-Gadget entfernen.<br />
Am einfachsten ist es im HTML einfach das ganze Gadget zu löschen. Dank den neuen Klappen des Editors ist es alles auf einer Zeile zusammengefasst.<br />
<br />
<i>I personally prefer version 2.<br />
First you need to remove the header widget, by deleting the code in the HTML</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb8ETN_7eJLlmhNUsS3x-D0yPo1C6loQaBoBtmjgphBpojAZLhUtbkVhDP7qXQjY_oqYceRYQN7fONNZhJbC4sp8WHoyudOq1OdlZMdwVUGV2_TSp-JDx4gUSW269k_Qv4kTgx3xzRSZ2Z/s1600/19.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb8ETN_7eJLlmhNUsS3x-D0yPo1C6loQaBoBtmjgphBpojAZLhUtbkVhDP7qXQjY_oqYceRYQN7fONNZhJbC4sp8WHoyudOq1OdlZMdwVUGV2_TSp-JDx4gUSW269k_Qv4kTgx3xzRSZ2Z/s1600/19.png" /></a><br />
<br />
Sobald ihr das entfernt habt, speichert und wechselt zum Layout.<br />
<br />
An der Stelle des Headers fügt ihr ein HTML Gadget hinzu, mit folgendem Inhalt:<br />
<br />
<i>As soon as you did that, save and change to layout.<br />
<br />
Where the header used to be you want to add a html widget with the follwing content.</i><br />
<br />
<pre><code class="language-markup"><a href="BLOG_URL"><img src="HEADER_IMG" class="cutout"></a></code></pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjABhqmeBYee8s2-yINEl0JxXu9_WIHgRx-YOuixc2ZhyphenhyphenTEfI-HI4LpWkeIFgTxJrNGY_QP-P1DDclwFJBB_FxibRuon-jL-pGkQHxYtQeSnm8hWU9jQcYlzhKZ9sz7Caqj4HNUTQGdFL/s1600/20.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjABhqmeBYee8s2-yINEl0JxXu9_WIHgRx-YOuixc2ZhyphenhyphenTEfI-HI4LpWkeIFgTxJrNGY_QP-P1DDclwFJBB_FxibRuon-jL-pGkQHxYtQeSnm8hWU9jQcYlzhKZ9sz7Caqj4HNUTQGdFL/s1600/20.png" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQIxvIaV7D1pJAzTVx6Ih0btg-P-CkFpguQbabYU99w-jIYHzJFp5GXw_0I_X4zgFplpra7SmTciNVRcVV5uLXo-aog6VNJH6GX9BIsanUZp8SBVUH5-nM0_5bX79QBLnBYkMk40UbJqZE/s1600/21.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQIxvIaV7D1pJAzTVx6Ih0btg-P-CkFpguQbabYU99w-jIYHzJFp5GXw_0I_X4zgFplpra7SmTciNVRcVV5uLXo-aog6VNJH6GX9BIsanUZp8SBVUH5-nM0_5bX79QBLnBYkMk40UbJqZE/s1600/21.png" /></a><br />
<br />
Die CSS fügen wir hier direkt unterhalb ein:<br />
<br />
<i>We add the following CSS.</i><br />
<br />
<pre><code class="language-css">.cutout{
background: url(BG_URL) repeat fixed;
}</code></pre><br />
Der gesamte Inhalt des Gadgets ist also:<br />
<br />
<i>The complete content of the widget is this:</i><br />
<br />
<pre><code class="language-markup"><a href="BLOG_URL"><img src="HEADER_IMG" class="cutout"></a>
<style>
.cutout{
background: url(BG_URL) repeat fixed;
}
</style></code></pre><br />
Speichern und ihr seid fertig.<br />
<br />
<i>Save and you're done.</i><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzBIkCun_d9K9TnVIwKlGFY8GBvIFbgv7PCwgGqqQm-HH_tsZvROnZnfigXsvbEYCmd5CS_oSsaWR9qbR6TmaXCJeJBiC2j3gUCckh4D4OJvHfFPoJFx0AKdonAmwYRibRW1xGQjwRl0f/s1600/22.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzBIkCun_d9K9TnVIwKlGFY8GBvIFbgv7PCwgGqqQm-HH_tsZvROnZnfigXsvbEYCmd5CS_oSsaWR9qbR6TmaXCJeJBiC2j3gUCckh4D4OJvHfFPoJFx0AKdonAmwYRibRW1xGQjwRl0f/s1600/22.png" /></a><br />
<br />
<h3>Questions</h3>Wie immer, bei Fragen oder Anmerkungen, schreibt mir einen Kommentar.<br />
<br />
<i>As allways, if there are any questiosn left, write a comment.</i>Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com2tag:blogger.com,1999:blog-1589905134039127183.post-72138260453542533992014-01-08T15:58:00.000+01:002015-10-26T15:14:54.205+01:00Variabeln für Blogger Blogs ✤✤✤<i>To all the English Readers: There is no English Version of this Tutorial, because there are a lot of very detailed posts about writing variables for blogger in english, and since I usually follow the rule: "Do What You Do Best, Link To The Rest" I'm just gonna send you to the place where I learned it. <a href="http://bloggerillustrated.blogspot.ch/2012/07/how-to-add-support-for-blogger-template-designer-in-custom-templates.html" class="buttonbg">Link</a>. Still, if you have any questions, feel free to ask.</i><br />
<br />
Der Grund warum ich diesen Post schreibe ist der, dass ich bei meiner Suche nach Tutorials zu diesem Thema bloss uralte oder sehr unvollständige Posts (auf Deutsch) gefunden habe. Ich sage nicht, dass ich einen allumfassenden Post schreiben kann, aber zumindest einen Grossteil in abdecken möchte, für all diejenigen, die gerne eigene Variabeln in ihren Blog schreiben möchten, oder das Ziel haben Templates zu erstellendie mit dem Vorlagendesigner kompatibel sein sollen. Trotzdem befolge ich eigentlich immer den Spruch: "Do what you do best, link to the res" (tu, was du am besten kannst, verlinke den Rest) und verweise auch für alle unter euch, die mit English zurechtkommen auf den Link oben, denn dieser Post hat mir das Variabelnschreiben beigebracht.<br />
<a name='more'></a><br />
<h3>Variables - the basic</h3>Grundlegend sieht eine Variable so aus:<br />
<pre><code class="language-markup"><Variable name="variable.name" description="Variable Description in Designer" type="type" default="XXX" value="YYY"/></code></pre>Also was ihr tut ist die Variable mit einem Namen zu versehen, das ist der Name, den wir dann später verwenden müssen, um die Variable zu anzuwenden.<br />
<br />
Danach folgt eine Beschreibung der Variable, das ist der Text, der dann oberhalb der Auswahl angezeigt wird.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfv1nxM-_lBns3EA3tH1ZPTs5XrwIMpsM0O_iUFY4YhgrCoXwY5vu65JM12RRbgTOkcQhZDK7q-YxpQh1V1DVWHmFQU6HO4aF0g-KI64h2Xr4InMirKOfvVSnqjQgN3mOkg4rXQx7z9Od/s1600/template-designer.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfv1nxM-_lBns3EA3tH1ZPTs5XrwIMpsM0O_iUFY4YhgrCoXwY5vu65JM12RRbgTOkcQhZDK7q-YxpQh1V1DVWHmFQU6HO4aF0g-KI64h2Xr4InMirKOfvVSnqjQgN3mOkg4rXQx7z9Od/s1600/template-designer.png" /></a><br />
<br />
Als nächstes definieren wir dann den Typ der Variable, also was für eine Variable das ist und dann wird der Default-Wert gegeben, also das, was wir haben wollen, wenn die Variabeln auf Standart zurückgesetzt werden. Zum Schluss kommt der tatsächliche Wert der Variable.<br />
<br />
<h3>Variables - Types</h3>Es gibt verschiedene Variabel-Typen, die ich im folgenden kurz erklären möchte.<br />
<br />
<h4>Color</h4>ist wahrscheinlich die bekannteste Variable. Hier werden Farben geändert. Die Wertzuweisung funktioniert hier also mit HEX-Farben.<br />
Eine umgesetzte Colorvariable würde in normalen CSS also zum Beispiel so aussehen:<br />
<pre><code class="language-css">color: #2e2e2e;</code></pre><br />
<h4>Font</h4>Damit werden Schriften angegeben. Das Schema läuft auch hier so ab, wie in CSS geschrieben:<br />
<br />
<pre><code class="language-css">font: normal normal 16px Calibri;</code></pre><br />
wobei die beiden normals für nicht-kursiv und nicht-fett stehen. Dann die Schriftgrösse und Schriftart.<br />
<br />
<h4>Background</h4>Diese Variable ist für den Blog-Hintergrund zuständig, damit man ein Bild uploaden kann.<br />
Ein default würde hier wahrscheinlich so aussehen, da da noch kein Bild hochgeladen ist:<br />
<br />
<pre><code class="language-css">background: $(color) none repeat scroll top left;</code></pre><br />
Ihr seht, hier ist eine Variable in der Variable drin. Dazu werde ich noch spezifisch etwas sagen.<br />
<br />
<h4>String</h4>Die String-Variable wird nicht im Vorlagendesinger angezeigt, ich füge sie trotzdem ein, da ich sie echt praktisch finde, wenn Leute nicht gerne suchen.<br />
<br />
<h4>Length</h4>Und diese Variable wird verwendet, wenn ihr an nicht-responsiven Designs arbeitet und die Breiten mit Pixeln anpassen wollt.<br />
<br />
<h3>Variable Groups</h3>Wenn ihr den Vorlagendesigner anguckt, gibt es auf der Seite eine "grosse" Überschrift und die einzelnen Variabeln zu diesem Thema finden sich nebeneinander. Um das zu tun, müssen die Variabeln in eine Variabel-Gruppe eingefügt werden.<br />
Eine Gruppe könnte zum Beispiel so aussehen:<br />
<br />
<pre><code class="language-markup"><Group description="Backgrounds" selector="body">
<Variable name="body.background.color" description="Background" type="color" default="#fffff0" value="#fffff0"/>
<Variable name="container.background.color" description="Main Container Background" type="color" default="#fffff0" value="#fffff0"/>
<Variable name="content.background.color" description="Content Background" type="color" default="transparent" value="transparent"/>
<Variable name="sidebar.background.color" description="Sidebar Background" type="color" default="transparent" value="transparent"/>
</Group></code></pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyzyOkWbElwaVRfcFs8bqUaa6YXmilxtOo-fDY661Oybgzlh5S4vTx6dqJ7iLzZYRn6xb7F2d5h6RmkXz3iTsCgMXaW22S1LKNUb1Y5gMftW0Z_bGrkQE5aN_mh0pqdBJFFZj7jsN4S2m/s1600/group.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyzyOkWbElwaVRfcFs8bqUaa6YXmilxtOo-fDY661Oybgzlh5S4vTx6dqJ7iLzZYRn6xb7F2d5h6RmkXz3iTsCgMXaW22S1LKNUb1Y5gMftW0Z_bGrkQE5aN_mh0pqdBJFFZj7jsN4S2m/s1600/group.png" /></a><br />
<br />
<h3>Background-Upload-Variable</h3>Okay, die Farb und Font-Variabeln werde ich jetzt nicht noch spezifisch erklären, da sie eigentlich sehr logisch sind, jetzt kommt aber die Background-Variable, da sie eine Variable ist, die eine Variable in sich trägt.<br />
So könnte sie zum Beispiel aussehen:<br />
<br />
<pre><code class="language-markup"> <Variable name="body.background" description="Body Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipvTAXBEW9XkjlpQlU_sDKEVlemnrOfmMprjE0ZvKoYAIeMvegOD0SugedHyLMAQEColZCSDd8Gj1DybDRRTELd0XafET5IWecdF6s9DGJvj-QCbpia1kX23TOdENMKUkpJoOw50AqK1e4/s1600/mooning.png) repeat fixed top left"/></code></pre><br />
Ihr seht, hier ist die Farbe, die als <b>body.background</b> definiert ist, die Hintergrundfarbe, also wenn ich beispielsweise ein transparentes Bild als Hintergrund definiere, würde man diese Farbe durchscheinen sehen. Dann ist da noch die Angabe, ob das Bild gekachelt wird, oder nicht, ob fixiert oder scrollend und wo das Bild positioniert wird. Also eigentlich ganz simpel, für jeden, der CSS schreiben kann.<br />
<br />
<br />
<h3>Width-Adjustments (responsive)</h3>Eine responsive Lösung für die Breiten mit Variabeln habe ich gefunden. Sie erfordert zwar, dass der Benutzer die Variable im HTML ändert, da der Vorlagendesigner sie nicht anzeigt, aber man muss nicht die komplette CSS durchsuchen, sondern nur einen value-Wert anpassen. Es gibt theoretisch auch die Möglichkeit die Regler für die nicht-responsive Lösung unter der Breiten-Anpassung im Vorlagendesigner einzfügen, da diese Templates allerdings wahrscheinlich eh bald der Vergangenheit angehören, lasse ich diese Möglichkeit aus.<br />
<br />
Für die repsonsive Version habe ich folgende Variablen geschrieben.<br />
<br />
<pre><code class="language-markup"> <Variable name="content.width" description="Content Width Use %" type="string" default="67%" value="67%"/>
<Variable name="blog.width" description="Blog Width Use %" type="string" default="70%" value="70%"/>
<Variable name="sidebar.width" description="Sidebar Width Use %" type="string" default="30%" value="30%"/></code></pre><br />
Die Benutzer müssen also bloss nach Blog Width suchen und werden diese Variable finden, ohne dass sie die CSS durchforsten müssen.<br />
<br />
<h3>Application</h3>Okay, wo wird das ganze eingefügt.<br />
Als erstes braucht ihr die skin-tags eures Blogs.<br />
Wenn ihr Vorlagen wie Simple anseht, versteht ihr schnell wie es geht.<br />
<br />
<pre><code class="language-markup"><b:skin><![CDATA[*/
-----------------------------------------------
Blogger Template Style
Name: Template Title
Designer: Myriam KreaTief
URL: bekreatief.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
[VARIABLES]
*/
[CSS]
]]></b:skin></code></pre><br />
Die Variabeln befinden sich in einem Kommentar drin. Wenn das Template geladen wird, werden die implementierten Variabeln in der CSS durch den Value-Wert ersetzt.<br />
<br />
Um eine Variable zu verwenden, fügt ihr einfach ein Dollar-Zeichen und den Namen eurer Variable in der CSS ein.<br />
<br />
Habt ihr also eine Farbvariable die <b>body.text.color</b> heisst, verwendet ihr sie in der CSS:<br />
<br />
<pre><code class="language-css">body{ color: $(body.text.color)}</code></pre><br />
Und das wär schon alles.<br />
Dann lässt sich das alles über den Vorlagendesigner steuern.<br />
<br />
Ich hoffe das war hilfreich und wenn ihr Hilfe braucht oder noch Fragen offen sind, einfach bescheid geben :)Anonymoushttp://www.blogger.com/profile/00076106833019549292noreply@blogger.com0