Vielleicht erinnert sich noch wer an mich, ich bin Myri, die mit dem Datum im Kreis :D
Heute machen wir aber mehr als nur das. Heute schreiben wir ein Template "from scratch" wie man so schön sagt. Wir schreib das ganze Markup selbst und fügen dann nur noch ein paar Gadgets ein.
Ich hab vor einer Weile auf meinem eigenen Blog ein Tutorial geschrieben, wie ein responsives Template entsteht (hier). Da dieses Tutorial allerdings extrem ausführlich ist, dachte ich, ich schreibe noch eine etwas "kürzere" Version und lege das Tutorial nicht nur darauf aus, dass es responsiv wird. Ich möchte euch viel eher zeigen, wie man beim Schreiben eines eigenen Templates so vorgeht. Am einfachsten funktioniert das meistens mit einem Beispiel, also habe ich für euch den Prozess meines neusten Templates dokumentiert.
Die responsiven Sachen habe ich besonders gekennzeichnet.
Einführung
Ein eigenes Template. Man wünscht es sich oft, doch leider sind HTML und CSS für viele ein Buch mit sieben Siegeln. Ich sage nicht, dass ihr gar keine Kenntnisse braucht, um euch ein eigenes Template zu schreiben. Die braucht ihr. Aber es sollten auch Leute mit Basis-Wissen zu HTML und CSS in der Lage sein ein eigenes Template zu kreieren. Was euch aber im Vornherein klar sein sollte ist, dass es dennoch ein anspruchvolles Unterfangen ist und viel Zeit in Anspruch nehmen wird. Allerdings heisst ein eigenes Template auch, dass ihr nicht so eingeschränkt seid. Ihr müsst euer Template nicht in eine vorgefertigte Form pressen, sondern schreibt euer Template ganz alleine. Ich habe festgestellt, dass das Schreiben von neuen Templates bei mir weniger Zeit in Anspruch nimmt als das Anpassen eines bereits vorhandenen, also gibt es eigentlich nur Vorteile.Resultat
Das Resultat ist ein Template, das ich kostenlos zur Verfügung stelle. Falls ihr also keine Lust zu lernen habt, aber gerne ein responsives Template haben wollt, dürft ihr gerne einen Blick auf in die Demopage werfen.
Planung
Das erste (und wichtigste) was es zutun gibt ist die Planung. Ihr müsst euch die Grundoptik eures Blogs überlegen. Dabei geht es nicht um die spezifische Gestaltung sondern darum euch die einzelnen Container zu überlegen. Ihr müsst versuchen in HTML zu denken.Wollt ihr den Header innerhalb des Hauptcontainers oder soll der irgendiwe anders aussehen?
Soll es eine Sidebar geben oder doch lieber einen Footer?
Wie viel Breite soll das ganze einnehmen?
Mein Plan ist ein asymetrisches Layout, also soll der Hauptcontainer auf der Seite sein. Und der Header soll die ganze Breite abdecken, er muss also ausserhalb des Hauptcontainers sein. Ausserdem will ich einen Footer haben und eine Navigation, die sich im Header befindet.
Das wird im nächsten Schritt umgesetzt.
HTML Skizze
Dieser nächste Schritt ist nämlich, eine HTML-Skizze zu erstellen. Eine grobe Übersicht, wie euer Blog aussehen soll.Eine seriös geschriebene Skizze gibt euch bereits 75% des ganzen Layouts.
Was ihr dazu benötigt ist ein einfacher Editor und einen Browser.
Das ist die Skizze, die ich für mein Beispiel verwende und im folgenden erkläre
header
nav
maincontainer
wrapper
content
footer
credit
Wir schreiben nun eine einfache HTML-Datei, die wir uns dann mit dem Browser ansehen.
Öffnet also euren Editor und fügt folgendes ein.
<!DOCTYPE html>
<html lang="de">
<head>
</head>
<body>
</body>
</html>Im Body-Bereich fügen wir unsere Container ein, die wir uns eben schon etwas zurecht gelegt haben.
Für mein Beispiel sehen die Container folgendermassen aus:
<div id="header">
<div id="nav"></div>
</div>
<div id="maincontainer">
<div id="wrapper">
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
<div id="credit"></div>
Im Body-Bereich platzieren und dann als .html-Datei speichern und probeweise mit dem Browser öffnen.
Wenn wir das tun, schaut es noch lange nicht wie ein Template aus. Das Ergebnis ist nämlich leer und weiss.
Was wir brauchen ist CSS. Dafür öffnen wir style-tags. In diese kommt nun die ganze CSS, die ich im Folgenden erklären werde.
<!DOCTYPE html>
<html lang="de">
<head>
<style>
/* CSS
------------------ */
</style>
</head>
<body>
<div id="header">
<div id="nav"></div>
</div>
<div id="maincontainer">
<div id="wrapper">
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
<div id="credit"></div>
</body>
</html>Okay, als erstes gestalten wir den maincontainer. Das Ziel ist ein asymetrisches Template, also zentrieren wir diesen nicht.
Um das ganze sehen zu können, geben wir dem Container eine Hintergrundfarbe und eine Höhe. Diese ist nachher nicht mehr nötig, da sich die Höhe dem Inhalt anpasst, aber da unsere Container jetzt leer sind, brauchen wir sie um etwas sehen zu können.
RESPONSIVE
Zur Breite bleibt soviel zu sagen: gebt ihr in Prozent an, wird das ganze responsiv und reagiert auf die Grösse des Bildschirms. Gebt ihr's in px an, ist das ganze statisch und verändert sich nicht.
Ich empfehle also Prozent, da sich jeder über responsive Seiten freut, ist euch das aber suspekt, könnt ihr natürlich auch mit Pixeln arbeiten.
#maincontainer{
background: #ccc;
height: 1050px;
position: absolute;
right: 0;
width: 80%;
z-index: 1;
}Das ist jetzt einfach nur ein grauer Block.
Als nächstes platzieren wir den Header. Diesen platzieren wir auf der ganzen Breite, über dem maincontainer. Innerhalb davon platzieren wir die Navigation, in die später unser Menü kommt.
#header{
background: #aaa;
height: 300px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#nav{
background: #555;
height: 30px;
width: 80%;
position: absolute;
right: 0;
top: 200px;
}
Als nächstes fixieren wir den creditlink am unteren Rand und fügen den Wrapper mit unserem Contentcontainer und dem Footer hinzu. Im Content wird später unser Blog sein und im Footer platzieren wir unsere Gadgets.
#credit{
position: fixed;
width: 100%;
bottom: 0;
height: 20px;
left: 0;
background: #555;
z-index: 2;
}
#wrapper{
margin-top: 300px;
width: 75%;
height: 680px;
background: #aaa;
padding: 10px;
}
#content{
background: #555;
width: 100%;
height: 400px;
position: relative;
top: 0;
left: 0;
}
#footer{
background: #555;
width: 100%;
height: 200px;
position: relative;
top: 30px;
}Und dann ist die Skizze abgeschlossen. Die Basis unseres Codes und die GrundCSS ebenfalls.
Im nächsten Schritt wird das ganze etwas weniger Theoretisch und wir gehen zu Blogger über.
Blogger Skizze
Für ein Template braucht ihr selbstverständlich einen Blog. Macht das aber auf KEINEN FALL in eurem bereits vorhandenem Blog. Dazu müsst ihr auf jeden Fall einen Testblog haben.
In diesem Testblog sollten vorerst bloss Posts veröffentlicht worden sein. Diese füllt ihr mit irgendwelchem Text, zum Beispiel Lorem Ipsum. Von der Anzahl her, empfiehlt es sich immer mehr zu nehmen, als auf der ersten Seite angezeigt werden soll.
In der Blogger-Skizze bauen wir eigentlich unser Template. Das wird danach bloss noch mit mehr CSS gestaltet.
Das Grundgerüst sieht etwas aufwändiger aus, ist es aber eigentlich gar nicht.
Grunsätzlich baut Blogger eigene CSS in einen Blog ein, um den mehr oder weniger zu umgehen, halten wir Abstand vom Vorlagendesigner und dem Skin-Bereich des Templates. All unserer CSS kommt zwischen zwei Style-tags im Head-Bereich.
Damit aber dennoch schon ein wenig Gestaltung drin ist und wir nicht alles von Null schreiben müssen, binden wir die Bootstrap-CSS ein. Diese gibt uns schon ein Grundstyling und wir ändern dann nur noch, was uns nicht gefällt und/oder was noch nicht vorhanden ist.
Weiter binde ich immer auch gleich Font-Awesome ein, welches eine grandiose Icon-Schrift ist, sowie Bootstrap JavaScript und das JQuery framework. Für den Fall, dass noch irgendwelche Scripte eingebunden werden. Und dann natürlich noch die Webfonts, die wir verwenden wollen (falls wir welche verwenden wollen).
Der Content-Container wird mit dem Blog-Gadget ausgestattet.
Und den Footer teilen wir in drei Spalten auf, die jeweils Platz für Gadgets bieten sollen.
Es reicht wenn wir einfach nur den Rahmen des Gadgets einbinden, Blogger füllt das dann automatisch.
Achtet auf den Code im Footer. Dort wurden sogenannte Sections geschrieben. In diesee lassen sich Gadgets einbinden.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<!-- Bootstrap CSS -->
<link href='//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css' rel='stylesheet'/>
<!-- Font Awesome -->
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' rel='stylesheet'/>
<!-- Font: Playfair Display -->
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700' rel='stylesheet' type='text/css'/>
<!-- Font: Lobster Two -->
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic' rel='stylesheet' type='text/css'/>
<!-- BLOGGER CSS PART (necessarry) -->
<b:skin><![CDATA[*/
]]></b:skin>
<style>
/* CSS, if undisturbed from Blogger desired
------------------------------------------------*/
</style>
</head>
<!-- JQuery -->
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<!-- Bootstrap JavaScript -->
<script src='//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js'/>
<body>
<div id="header">
<div id="nav">
<!-- Navigation Menu -->
</div><!-- /#nav -->
</div> <!-- /#header -->
<div id="maincontainer">
<div id="wrapper">
<div id="content">
<b:section class='content' id='main' showaddelement='yes'>
<!-- Blog Widget -->
<b:widget id='Blog1' locked='false' title='Blogposts' type='Blog'>
</b:widget>
<!-- /Blog Widget -->
</b:section> <!-- /.content -->
</div> <!-- /#content -->
<div id="footer" class="grid3">
<div class="col">
<b:section class='footer' id='footer1' locked='false' showaddelement='yes'>
<!-- Footer Widgets -->
</b:section> <!-- /.footer -->
</div> <!-- /.col (1) -->
<div class="col">
<b:section class='footer' id='footer2' locked='false' showaddelement='yes'>
<!-- Footer Widgets -->
</b:section> <!-- /.footer -->
</div> <!-- /.col (2) -->
<div class="col">
<b:section class='footer' id='footer3' locked='false' showaddelement='yes'>
<!-- Footer Widgets -->
</b:section> <!-- /.footer -->
</div> <!-- /.col (3) -->
</div> <!-- /#footer -->
</div> <!-- /#wrapper -->
</div> <!-- /#maincontainer -->
<div id="credit">Blog Design and Content © by <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | 2013.</div><!-- /#credit -->
</body>
</html>Was wir als nächstes tun, ist jeden Container zu füllen. (Beim Header hab ich das nicht gemacht, dort belasse ich die Höhenangabe)
Also wird vor allem der Footer mit drei Gadgets gefüllt.
Das Füllen dient dazu, alle Container sichtbar zu machen, da die CSS keine Höhenangaben mehr enthalten wird.
Die erste CSS, die wir dann zwischen die Style-Tags packen, ist die die wir bereits in der HTML Skizze geschrieben haben. Die Höhenangaben werden entfernt, aber ansonsten ist alles identisch.
Hier nocheinmal alles zusammen:
#maincontainer{
background: #ccc;
position: absolute;
right: 0;
width: 80%;
z-index: 1;
}
#header{
background: #aaa;
width: 100%;
height: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#nav{
background: #555;
width: 80%;
position: absolute;
right: 0;
top: 200px;
height: 30px;
}
#credit{
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background: #555;
z-index: 2;
}
#wrapper{
margin-top: 300px;
width: 75%;
background: #aaa;
padding: 10px;
}
#content{
background: #555;
width: 100%;
position: relative;
top: 0;
left: 0;
}
#Blog1{
margin-top: -30px;
}
#footer{
width: 100%;
position: relative;
top: 30px;
}Wenn wir das eingefügt haben, sieht unser Blog so aus:
Die Gadgets liegen noch untereinander. Das verändern wir nun.
![](https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/temptut/3.png")
Wenn ihr euch den Code eben angesehen habt, habt ihr gesehen, dass ich Klassen hinzugefügt habe. Col und Grid verwenden wir nun um unsere Spalten zu erstellen.
RESPONSIVE
Da ich ein responsives Design baue, gehe ich von sich verkleinenden Spalten aus, da drei Spalten ab einer bestimmten Bildbreite nicht mehr möglich sind, schreibe ich media queries. Diese media queries helfen einem dabei gewisse CSS zu definieren, die nur dann angewendet wird, wenn der Bildschirm im Bereich liegt, den wir definiert haben.
Die CSS dafür sieht folgendermassen aus:
/* Column Style Footer
--------------------------*/
.col {
background: #eee;
float: left;
padding-left: 3.2%;
margin-bottom: 80px;
}
.grid3 .col {
width: 33.3%;
}
.grid3 .col:nth-of-type(3n+1) {
margin-left: 0;
clear: left;
}
/* reset cols to 2-column */
@media screen and (max-width: 800px) {
.grid3 .col {
width: 50%;
}
.grid3 .col:nth-of-type(3n+1) {
padding-left: 3.2%;
clear: none;
}
.grid3 .col:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}
}
/* reset cols to fullwidth */
@media screen and (max-width: 600px) {
.col {
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}Speichern und dann angucken.
Funktioniert alles.
![](https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/temptut/6.png")
Die Basis und der mühsame Teil der Arbeit ist getan.
Jetzt kann der Spass beginnen.
Mehr Planung
Für die Gestaltung muss natürlich auch geplant werden. Man kann keine CSS schreiben, ohne zu wissen, was am Ende dabei herauskommen soll.Planung ist das Geheimnis hinter einem schnell geschriebenen Template, also würde ich wirklich darin investieren.
Meine Grundidee ist es, ein Template zu gestalten, das sich an einem Template orientiert, das ich einmal auf meinem Blog hatte. Das sah damals so aus und war mühsam aus dem Simple Template herausgebastelt worden.
Für die Grundform ist es gut, wenn ihr das schon vor der HTML-Skizze habt. Den ganzen Rest könnt ihr auch erst zu diesem Zeitpunkt suchen, obwohl ich alle Materialien schon zu Beginn haben würde. Verkürzt die Zeit des Schreibens.
Was wir dann brauchen sind Fonts, Farben, Header und einen Hintergrund.
Für mich sieht das folgendermassen aus:
Fonts
Playfair Display & Lobster TwoFarben
Mein Farbschema ist von Design SeedsSeascape Hues
#b5a3b0 #4d4954 #6b94b8 #b8cce3 #f2dad3 #d6cfcf
Header
Hintergrund
Als Hintergrund verwende ich ein CSS3 Pattern. Das zeigt sich leider nicht auf allen mobilen Browsern, aber das ist für mich okay.background: fixed;
background-color:#f2dad3;
background-image: radial-gradient(#4d4954 15%, transparent 16%),
radial-gradient(#6b94b8 /* ersetzt */ 15%, transparent 16%);
background-size:20px 20px;
background-position: 0 0, 50px 0px;
background-color:#f2dad3;
background-image: radial-gradient(#4d4954 15%, transparent 16%),
radial-gradient(#6b94b8 /* ersetzt */ 15%, transparent 16%);
background-size:20px 20px;
background-position: 0 0, 50px 0px;
Eigene CSS
Und dann geht es los. Schreibt eure CSS und gestaltet was das Zeug hält :DNach der "Basis"-Gestaltung schaut das bei mir jetzt so aus:
Und dann geht es eigentlich nur noch darum die einzelnen Attribute des Tempaltes zu gestalten. Also das Menü, Header, Datum und was auch immer ihr noch für Dinge haben wollt. Ich hab das jetzt jeweils nur kurz erklärt, weil es natürlich für jeden variiert.
Menü
Das Menü ist eine einfache Liste, die wir mit etwas CSS gestalten.
<ul class="simple" >
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Contact</a></li>
</ul>Diesen Code platzieren wir im Navigations-container.
Dann die CSS im CSS-Bereich:
.simple{
text-align: center;
background: #d6cfcf;
}
.simple ul{
width: 100%;
list-style: none;
}
.simple li{
list-style: none;
display: inline;
padding-right: 15px;
text-align: center;
font-size: 190%;
font-family: Lobster Two;
}
Header
Kommen wir zum Header. Dafür verwenden wir einen Link, der den Blogtitel und den Homelink verlinkt und im Pseudoelement :after platzieren wir unser BildDa das Bild für mich nicht Pastell genug war, hab ich noch ein weisses Overlay drüber platziert. Sobald man aber im Header-Bereich hovert, wird das overlay etwas weniger weiss und das Bild etwas greller.
<h1><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1>
Und die CSS:
/* Header Style
---------------------*/
#header h1{
font-size: 500%;
position: absolute;
top: 55px;
right: 10%;
z-index: 2;
}
#header h1 a{
color: #d6cfcf;
text-shadow:
-1px -1px 0 ivory,
1px -1px 0 ivory,
-1px 1px 0 ivory,
1px 1px 0 ivory;
}
#header h1 a:hover{
color: #6b94b8;
font-style: normal;
}
#header:before{
content: '';
background: url(https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/cupcake.png);
width: 300px;
height: 300px;
position: absolute;
right: 80%;
margin-right: -150px;
z-index: 2;
border: 15px solid #d6cfcf;
-webkit-border-radius: 50em;
border-radius: 50em;
}
#header:after{
content: '';
background: rgba(255, 255, 255, .3);
width: 300px;
height: 300px;
position: absolute;
right: 80%;
margin-right: -150px;
z-index: 3;
border: 15px solid #d6cfcf;
-webkit-border-radius: 50em;
border-radius: 50em;
}
#header:hover:after{
background: rgba(255, 255, 255, .2);
}Ungehovert und gehovert
Datum
Als nächstes kommt das Datum dran. Wie ihr das macht, habe ich bereits hier erklärt. Das einzige was jetzt anders gemacht wird, ist die CSS.span.date-header{
position: absolute;
right: 98.5%;
padding:15px;
float:left;
font-family: 'Lobster Two';
text-align: center;
font-size: 17px;
color: #b5a3b0;
z-index: 5;
}
#date{
display:block;
line-height:1.3em;
text-align:center;
}
.day{
font-size:33px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom:3px;
letter-spacing:0px;
text-align: center !important;
color: #4d4954;
background-color: ivory;
border-left: solid 3px #d6cfcf;
border-right: solid 3px #d6cfcf;
}
.month {
padding-top:5px;
letter-spacing:3px;
background-color: #f2dad3;
padding-left: 5px;
padding-right: 5px;
border-left: solid 3px #d6cfcf;
border-right: solid 3px #d6cfcf;
border-top: solid 3px #d6cfcf;
}
.year {
padding-top:0px;
letter-spacing:2px;
padding-bottom: 5px;
background: ivory;
padding-left: 5px;
padding-right: 5px;
border-left: solid 3px #d6cfcf;
border-right: solid 3px #d6cfcf;
border-bottom: solid 3px #d6cfcf;
}
Kommentare, Autor und Labels unter Posttitel
Als nächstes kommt die kleine Bar unter den Post-Titel, die Autor, Labels und einen Kommentar-Link platziert, mit kleinen Icons. Wer mein Tutorial dazu sehen will klickt bitte hierZwei Schritte variieren allerdings vom Tutorial.
1. Wir löschen das alte Datum nicht.
2. Wir löschen das Datum aus dem Untertitel-Code. Dieser sieht also so aus:
<div class='undertitle'>
<i class='icon-user'></i> <data:post.author/> | <b:if cond='data:post.labels'>| <i class='icon-tags'></i>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=8"' rel='tag'> <data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>/</b:if>
</b:loop>
</b:if> | <span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'><i class='icon-comments'></i>
<a class='comment-link_top' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>Write A Comment<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment <b:else/><data:post.numComments/> Comments </b:if> </b:if></a>
</b:if>
</b:if>
</span></div>Und die CSS ist folgende:
.undertitle{
width: 101%;
text-align: center;
border-top: 5px solid #d6cfcf;
font-size: 14px;
padding-top: 3px;
margin-left: -1%;
margin-top: -5px;
}
.comment-link{
display: none;
}
Diese Untertiel-Bar entfernen wir als nächstes auf den statischen Seiten.
Und zwar vor dem startenden Body-Tag, mit diesem konditionalen Tag.
<!-- Static Page Style -->
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.undertitle{ display: none; }
</style>
</b:if>
Pagination
Als nächstes fügen wir nummerierte Seiten ein. Das hab ich hier beschrieben.Die CSS, die ich verwende ist folgende:
.pagenavi{
clear:both;
margin:10px auto;
text-align:center
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#d6cfcf;
font-family: Lobster Two;
}
.pagenavi a:hover,.pagenavi .current{
background:#f2dad3;
color:#6b94b8;
text-decoration:none;
font-style: italic;
}
.pagenavi .pages{
display: none;
}
.pagenavi .current{
font-style: italic;
}
.pagenavi .pages{
border:none
}
Suchfeld
Das letzte, was ich jetzt noch hinzufügen möchte, ist ein Suchfeld. Ein Suchfeld ist für mich essentiell in einem Blog. Das Suchfeld von Blogger selbst mag ich allerdings nicht. Die Entscheidung liegt natürlich bei euch. Ich bin ein grosser Fan von der benutzerdefinierten Suchmaschine, die man mit Google machen kann (wie das geht findet ihr hier) oder aber ihr macht ein Suchfeld, wie es Neele hier erklärt hat.Da ich mein Template so gestalten will, dass möglichst wenig Aufwand für die Personalisierung aufgewendet werden muss, werde ich die Version von Neele machen.
Sie kommt bei mir direkt über das Menü
<form action='/search' method='GET' class="searchfield" ><input name='q' type='text' placeholder="Search"/><i class="icon-search"></i></form>.searchfield{
position: absolute;
top: 90px;
left: 50%;
width: 20%;
margin-left: -10%;
}
.searchfield input{
background: #f2dad3;
color: #6b94b8;
font-family: Playfair Display;
font-size: 14px;
position: relative;
width: 100%;
border: 0;
padding: 10px;
}
.searchfield input:focus{
background: ivory;
font-weight: bold;
border: 3px solid #d6cfcf;
padding: 7px;
}
.searchfield i{
position: absolute;
right: 20px;
top: 30%;
color: #6b94b8;
}Responsive Design Media Queries
Und dann noch ein paar media queries, um das ganze responsiv zu machen.Ab einer bestimmten Breite (sobald es etwas knapp wird, mit dem Bild) wird die Grösse des Headers halbiert, das Suchfeld etwas nach oben geschoben, damit keine Konfusion mit dem Titel entsteht und dann soll der maincontainer noch etwas breiter werden.
@media screen and (max-width: 1070px){
#header:before, #header:after{
width: 150px;
height: 150px;
background-size: 150px 150px;
top: 150px;
margin-top: -75px;
margin-right: -75px;
}
.searchfield{
top: 20px;
}
}
@media screen and (max-width: 830px){
#maincontainer {
width: 85%;
}
#header:before, #header:after{
right: 85%;
}
}
@media screen and (max-width: 720px){
#header:before, #header:after{
display: none;
}
}
Fertig
Und dann ist das Template fertig. :)Für den Überblick jetzt noch einmal meine gesamte CSS, es kommt schon was zusammen, bei dem ganzen. :D
Responsive
Beachtet, dass ich auch noch eine maximale Breite bei den Bildern definiert habe, sie sollen schliesslich mitschrollen.
/* Basic Style
---------------------------------*/
body{
background: fixed;
background-color:#f2dad3;
background-image: radial-gradient(#4d4954 15%, transparent 16%),
radial-gradient(#6b94b8 15%, transparent 16%);
background-size:20px 20px;
background-position: 0 0, 50px 0px;
font-family: Playfair Display, Lobster Two, Times New Roman, Serif;
font-size: 16px;
color: #4d4954;
}
#maincontainer{
background: ivory;
position: absolute;
right: 0;
width: 80%;
z-index: 1;
}
#header{
width: 100%;
height: 300px;
position: absolute;
top: 10px;
left: 0;
z-index: 2;
}
#nav{
width: 100%;
position: absolute;
right: 0;
top: 150px;
}
#credit{
position: fixed;
width: 20%;
bottom: 0;
left: 0;
background: #f2dad3;
z-index: 0;
font-size: 80%;
}
#credit a{
color: #6b94b8;
}
#credit a:hover{
color: #4d4954;
}
#wrapper{
margin-top: 300px;
width: 75%;
padding: 10px;
text-align: justify;
}
#content{
width: 100%;
position: relative;
top: 0;
left: 0;
}
#footer{
width: 100%;
position: relative;
top: 30px;
}
/* Column Style Footer
--------------------------*/
.col {
float: left;
padding-left: 3.2%;
margin-bottom: 80px;
}
.grid3 .col {
width: 33.3%;
}
.grid3 .col:nth-of-type(3n+1) {
margin-left: 0;
clear: left;
}
/* reset cols to 2-column */
@media screen and (max-width: 800px) {
.grid3 .col {
width: 50%;
}
.grid3 .col:nth-of-type(3n+1) {
padding-left: 3.2%;
clear: none;
}
.grid3 .col:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}
}
/* reset cols to fullwidth */
@media screen and (max-width: 600px) {
.col {
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}
/*Text Styling
-------------------------*/
h1, h2, h3, h4, h5{
font-family: Lobster Two;
font-style: italic;
}
a:link{
text-decoration: none;
color: #6b94b8;
}
a:visited{
text-decoration: none;
color: #b5a3b0;
}
a:hover{
color: #b5a3b0;
font-style: italic;
}
h3.post-title{
font-family: Lobster Two;
color: #b5a3b0;
width: 100%;
font-weight: bold;
font-size: 34px;
text-align: center;
padding: 5px;
}
#footer .widget h2{
text-align: center;
padding: 5px;
color: #b5a3b0;
font-size: 30px;
font-weight: bold;
border-bottom: 5px solid #6b94b8;
}
.feed-links {
display:none !important;
}
/* Menu Style
------------------*/
.simple{
text-align: center;
background: #d6cfcf;
}
.simple ul{
width: 100%;
list-style: none;
}
.simple li{
list-style: none;
display: inline;
padding-right: 15px;
text-align: center;
font-size: 190%;
font-family: Lobster Two;
}
/* Header Style
---------------------*/
#header h1{
font-size: 500%;
position: absolute;
top: 55px;
right: 3%;
z-index: 2;
}
#header h1 a{
color: #d6cfcf;
text-shadow:
-1px -1px 0 ivory,
1px -1px 0 ivory,
-1px 1px 0 ivory,
1px 1px 0 ivory;
}
#header h1 a:hover{
color: #6b94b8;
font-style: normal;
}
#header:before{
content: '';
background: url(https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/cupcake.png);
width: 300px;
height: 300px;
position: absolute;
right: 80%;
margin-right: -150px;
z-index: 2;
border: 15px solid #d6cfcf;
-webkit-border-radius: 50em;
border-radius: 50em;
}
#header:after{
content: '';
background: rgba(255, 255, 255, .3);
width: 300px;
height: 300px;
position: absolute;
right: 80%;
margin-right: -150px;
z-index: 3;
border: 15px solid #d6cfcf;
-webkit-border-radius: 50em;
border-radius: 50em;
}
#header:hover:after{
background: rgba(255, 255, 255, .2);
}
/* Date Style
-------------------*/
span.date-header{
position: absolute;
right: 98.5%;
padding:15px;
float:left;
font-family: 'Lobster Two';
text-align: center;
font-size: 17px;
color: #b5a3b0;
z-index: 5;
}
#date{
display:block;
line-height:1.3em;
text-align:center;
}
.day{
font-size:33px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom:3px;
letter-spacing:0px;
text-align: center !important;
color: #4d4954;
background-color: ivory;
border-left: solid 3px #d6cfcf;
border-right: solid 3px #d6cfcf;
}
.month {
padding-top:5px;
letter-spacing:3px;
background-color: #f2dad3;
padding-left: 5px;
padding-right: 5px;
border-left: solid 3px #d6cfcf;
border-right: solid 3px #d6cfcf;
border-top: solid 3px #d6cfcf;
}
.year {
padding-top:0px;
letter-spacing:2px;
padding-bottom: 5px;
background: ivory;
padding-left: 5px;
padding-right: 5px;
border-left: solid 3px #d6cfcf;
border-right: solid 3px #d6cfcf;
border-bottom: solid 3px #d6cfcf;
}
/* Undertitle Style
---------------------------*/
.undertitle{
width: 101%;
text-align: center;
border-top: 5px solid #d6cfcf;
font-size: 14px;
padding-top: 3px;
margin-left: -1%;
margin-top: -5px;
margin-bottom: 5px;
}
.comment-link{
display: none;
}
/* Numbered Pages
--------------------------*/
.pagenavi{
clear:both;
margin:10px auto;
text-align:center
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#d6cfcf;
font-family: Lobster Two;
}
.pagenavi a:hover,.pagenavi .current{
background:#f2dad3;
color:#6b94b8;
text-decoration:none;
font-style: italic;
}
.pagenavi .pages{
display: none;
}
.pagenavi .current{
font-style: italic;
}
.pagenavi .pages{
border:none
}
/* Search Style
---------------------*/
.searchfield{
position: absolute;
top: 90px;
left: 50%;
width: 20%;
margin-left: -10%;
}
.searchfield input{
background: #f2dad3;
color: #6b94b8;
font-family: Playfair Display;
font-size: 14px;
position: relative;
width: 100%;
border: 0;
padding: 10px;
}
.searchfield input:focus{
background: ivory;
font-weight: bold;
border: 3px solid #d6cfcf;
padding: 7px;
}
.searchfield i{
position: absolute;
right: 20px;
top: 30%;
color: #6b94b8;
}
/* Responsive Media Queries
---------------------------------------*/
@media screen and (max-width: 1070px){
#header:before, #header:after{
width: 150px;
height: 150px;
background-size: 150px 150px;
top: 150px;
margin-top: -75px;
margin-right: -75px;
}
.searchfield{
top: 20px;
}
}
@media screen and (max-width: 830px){
#maincontainer {
width: 85%;
}
#header:before, #header:after{
right: 85%;
}
}
@media screen and (max-width: 720px){
#header:before, #header:after{
display: none;
}
}
img{
max-width: 100%;
}
Nachwort
Und das ist es auch schon.Ihr seht, der grösste Aufwand ist wirklich der Anfang, in dem man sich Gedanken machen muss, wie man das aufbaut. Ich denke das kommt mit der Zeit. Es ist Übungssache. Am einfachsten ist es wirklich, wenn ihr euch Inspiration sucht und versucht das umzusetzen, was ihr seht.
Und danach setzt ihr einfach Tutorials um und schreibt CSS. Ich denke das Wichtigste ist, nicht aufzugeben und einfach andere Möglichkeiten zu suchen, falls etwas nicht auf Anhieb klappen will.
Bei Fragen stehe ich wie immer hier in den Kommentaren zu Verfügung. Und sonst könnt ihr mich auch über mein Kontaktformular erreichen.
So und jetzt wünsche ich allen gutes Gelingen. :)
Keine Kommentare:
Kommentar veröffentlichen