Hallo zusammen
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 schreiben 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.
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.
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 :before 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 mitschrumpfen.
/* 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. :)
Wow, ich mag deine Tutorials einfach!
AntwortenLöschenAber ich muss gerade kein neues Template basteln, denn das habe ich erst bei deinem Tutorial zu responsiven Templates gemacht ;)
Liebe Grüße
oh wow danke ** ich bin derzeit so unzufrieden und wollt mal selber etwas schaffen mit so einem "leitfaden" werde ich es definitiv versuchen **
AntwortenLöschenDas freut mich :)
LöschenIch wünsche viel Glück :D
Ich neuling hätte mal eine ganz blöde Frage: Wenn ich das ganze beim Editor eingebe, wie öffne ich das denn im Browser?
LöschenDu speicherst die Datei ja als .html-Datei, am einfachsten auf den Desktop. Dann kannst du die Datei entweder mit Doppelklick öffnen, oder Rechtsklick öffnen mit und dann deinen Browser auswählen. Kommt drauf an, was als Standart für html-Dateien eingestellt ist. Meistens ist es aber schon der Browser.
LöschenHi :) Ich denke selber basteln, so weit bin ich nicht, aber ich wollte mal danke sagen weil dieses Tutorial hier sicher einige Arbeit für dich war :3
AntwortenLöschenAch, so schlimm war's nicht ^^
LöschenIch schreib ja gern Tutorials, also hat's Spass gemacht :D
Bitte gerngeschehen
Ein dickes DANKESCHÖÖÖN!!!
AntwortenLöschenDa komm ich BastelTante bestimmt noch drauf zurück!
VG
Anke
Wow, super Tutourial! War sicher totaaal viel Arbeit!
AntwortenLöschenKlasse!
Svea :)
WOOW! Du hast es echt drauf :)
AntwortenLöschenLiebe Grüße
strawberryred
Dankeschön ^^
LöschenEinfach klasse dass du dir sooviel Zeit genommen hast uns das alles mal zu erklären. Ich wollte es sofort ausprobieren. Bis jetzt ist alles toll erklärt aber ich hänge nun etwas. Ich konnte es nicht speicher da immer die Meldung aufkam 'More than one section was found with id: footer1. Section IDs should be unique.' Also benannte ich den 2. Footer 'footer2 und den 3. dann auch dem entsprechend. Darf man das?
AntwortenLöschenUnd nun zu meinem 2. Probl: bei mir sind dann irgendwie gar keine Gadgets mehr zu sehen. Also es sieht genauso aus wie es aussehen soll nachdem man die Basic erstellt hat nur einfach ohne Gadgets. Würde mich total über Hilfe freuen weil ich unheimlich gerne die Anleitung hier fertig machen möchte.
Liebst, Hannah ♥
Danke für den Hinweis! Das ist tatsächlich ein Fehler, dass da drei Mal footer1 steht. Das muss sogar so sein, wie du es gemacht hast. Klassen darf man mehrmals verteilen, IDs nur einmal, deswegen auch die Fehlermeldung. War ich etwas zu schnell beim Korrekturlesen.
LöschenNun zu deinem Problem.
Lösung steht hier:
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 Gadgets sind nicht im Code drin, die musst du selbst einfügen. Einfach unter Layout die Gadgets platzieren, die du haben willst und dann sollten sie erscheinen. :)
Grüsse
Myri
Edit
LöschenHab das jetzt im Code korrigiert. Hätt ich selbst wahrscheinlich nie gesehen. :)
Liebe Myriam,
AntwortenLöschendas ist der Wahnsinn, vielen lieben Dank für das tolle Tutorial! Ich trau mich dieses Wochenende mal dran =)
Wow, da hast du dir ja mega viel Mühe gegeben! Vielen, vielen Dank Myri :) Ich werde mich dann mal an die Planung setzen, bin nämlich schon länger nicht mehr zufrieden mit meinem eintönigen Blog Design.
AntwortenLöschenLG <3
kann mir bitte wer helfen ?:-/
AntwortenLöschenich schaffe es nicht einmal die vorlage für den maincontainer zu erstellen ...
selbst wenn ich die css und so genauso mache wie hier beschrieben steht ...
/* CSS
------------------*/
#maincontainer{
background: #ccc;
height: 1050px;
position: absolute;
right: 0;
width: 80%
z-index: 1;
}
so hab ich das gemacht ...
kann mir wer sagen was daran falsch ist??
LG
wenn du das genauso kopiert hast, fehlt dir wohl hinter:
Löschenwidth: 80% der Strichpunkt. Am besten überprüft du nochmal ob da wirklich width: 80%; steht. :)
Hy,
AntwortenLöschenich habe null Plan von HTML oder CSS und mich jetzt doch mal getraut. Ich nutze das Notepad und komme ganz gut mit klar. Leider habe ich das setzen von den Containern noch nicht gefunden, sind die in dem Progi drin? Was ich allerdings erst einmal wissen möchte, wie bekomme ich das alles in meinen Blog? Das ganze HTLM geschreibsel is ja nu nicht mal in 10min gemacht und ich wollte nicht daran verzweifeln wie ich es denn auf meinen Blog sichtbar machen kann.
Wollte euer Template reinsetzen, aber ging nicht, deshalb auch gleich die Frage wie ich es in den Blog bekomme.
Alle anderen 1000 Probleme fasse ich dann irgendwann zusammen, lach.
By Frau Verwirrt
Das Setzen von containern wird alles manuell gemacht.
LöschenIn den Blog bekommst du es dann, wenn du einfach die HTML einfügst.
Aber - ganz ehrlich - bei Null Plan, würde ich dir dieses Tutorial echt nicht empfehlen. Ich würde ein Minimales Verständnis von HTML und CSS voraussetzen.
Grüsse
Myri
Super Tutroial, werd ich mal ausprobieren bzw. jetzt weiß ich einigermaßen welche Taginhalte im HTML-Teil rein müssen. Denn das CSS kann ich, wusste nur nicht, was Blogspot alles braucht um den inhalt richtig darzustellen.
AntwortenLöschenLG Katjana
Wenn du CSS kannst und selbst schreiben willst, würde ich dir empfehlen vielleicht die etwas "kompliziertere" Version anzusehen, die komplett ohne eigenen Blogger-Code läuft und weniger Zeilen benötigt: link
LöschenIch finde das eine super Anleitung! Wirklich gut für alle, die es leid sind, sich immer mit Blogger herumzuschlagen. :D
AntwortenLöschenIch habe allerdings eine Frage:
Wie funktioniert das mit einer Sidebar? Ich hätte gern rechts eine Sidebar und links daneben den Content mit den Blogposts (beides im Verhältnis zur gesamten Seite zentriert). Dazwischen sollte möglichst ein kleiner Spalt bleiben, in dem man das Hintergrundbild sieht. Das würde dann doch bedeuten, dass Wrapper und Maincontainer den selben Platz wie der Content einnehmen, oder? Denn sonst könnte man das Hintergrundbild ja nicht sehen. Ich hab deshalb Maincontainer und Wrapper rausgelassen im Code, aber ich befürchte, dass das auch nicht ganz funktioniert. Denn momentan ist mein Gebilde aus grauen Feldern extrem durcheinander. ^^
Bitte hilf mir. Ich verzweifle immer gleich, wenn es nicht so geht, wie ich will. :D
Liebst, Lisa
Hallo Lisa,
LöschenSieh dir mal dieses Tutorial an. Das habe ich etwas später geschrieben und auf diese Art schreibe ich meine Templates heute, damit hast du etwas mehr Freiraum. Ausserdem erkläre ich dort wie es mit einer Sidebar geht. Du musst nicht jedem Container einen Hintergrund geben, der Mainwrapper ist allerdings empfehlenswert. Darin dann container für den Inhalt und die Sidebar, die du dann mit margins auseinanderpacken kannst.
Hallo Myri,
AntwortenLöschenerstmal tausend Dank für dein super ausführliches Tutorial Einige HTML und CSS Kentnisse hatte ich vorher schon, aber so richtig tolle Designs habe ich einfach nicht hinbekommen. Lange habe ich also mit Artisteer gearbeitet und mir dort meine Templates erstellt. Großer Haken daran: Es läuft einfach nicht stabil, der Code ist mehr als zugemüllt und man hat eigentlich keine Ahnung wo was ist. Furchtbar. Besonders als es daran ging, ein ganz einfaches Widget von "Rezeptefinden" einzubauen, das hinten und vorne nicht funktioniert hat und ständig meinen Blog gesprengt hat.
Richtig genervt war ich also über meinen mangelnden Durchblick. Aber die Rettung kam. Beim stöbern habe ich dein Tutorial gefunden und hätte NIE gedacht, dass es SO verdammt einfach ist. Jetzt habe ich mein Template selbst nachgebaut, und es sieht tausendmal besser aus, alles funktioniert und vor allem ICH habe den Überblick!
Wunderbar.
Mir hast du mehr als geholfen und ich freue mich richtig über einen stabil laufenden und schnell ladenden Blog!
Viele Grüße,
Behyflora
Hi :)
AntwortenLöschenHabe grade dein Tutorial angewendet, wollte aber rechts noch eine Sidebar dazu einfügen. Wie mach ich das denn? Hab dazu noch einen container eröffnet, so wie das auf einem anderen Tutorial von dir erklärt ist und die sidebar wird auch auf dem blog angezeigt aber leider nicht im layout :(
Liebe Grüße
Liebe Grüße
Doch, die Sidebar ist im Layout wahrscheinlich einfach unterhalb des Hauptcontainers, weil wenn du den Bildschirm kleiner machst, rutscht die Sidebar ja runter, sobald du keinen Platz mehr für hast, also ist es im Layout auch unten.
LöschenDanke :) Hab sie gefunden, so wie du gesagt hast. Nur kann ich aber jetzt im footer nichts mehr einfügen...
LöschenDas sollte eigentlich nicht sein...
LöschenHallo Myriam!
AntwortenLöschenErst einmal: vielen Dank, dass du dir so viel Mühe mit dem Tutorial gegeben hast.
Ich war auch sehr stolz auf mich, als mein html-Text aus dem Editor so vom Browser angezeigt wurde, wie es beabsichtigt war! :D
Aber eine Frage, habe ich jetzt doch noch. Und zwar hast du ja bei "Blogger Skizze" ein Bild von ganz vielen Tags und Befehlen gepostet. Sollen diese Befehle dann direkt in die Blogger-Html-Vorlage oder kommt das auch noch in unseren Texteditor?
Ich hoffe, ich habe mich nicht zu umständlich ausgedrückt. ^^''
Viele liebe Grüße
Lara
Hallo Lara
LöschenFreut mich, dass es geklappt hat mit der Skizze!
Alles was nach Blogger Skizze kommt, muss schon in den Blogger-Editor. Jetzt geht's um XML und nicht mehr einfaches HTML :D
Ich wünsch dir viel Glück, dass du zum Ziel kommst ^^
Grüsse
Myri
Hallo!
AntwortenLöschenErst einmal großes Lob für dieses Tutorial, hat mir echt geholfen! :D
Ich habe dennoch eine Frage, denn ich möchte gern ein eigenes Bild/Pattern verwenden...
Wenn ich auf eine Datei in meinen eigenen Dateien verweise, sehe ich jedoch nur einen leeren Kreis... Ich habe gesehen, dass das Cupcake-Bild auf Google Drive gehostet wurde, aber irgendwie krieg ich das nicht hin! :/
Hoste ich es woanders (z.B. bei direct upload), kann es nicht angezeigt werden...
Ich hoffe, du kannst mir helfen! :-)
LG, Ninjo
Vergiss, was ich gesagt habe! :-)
LöschenHatte nur den falschen Link von directupload.net kopiert! Jetzt hat alles geklappt! ;D
Vielen Dank nochmals für das Tut! :)
LG
Hallo,
AntwortenLöschendanke für die Anleitung! Die ist echt super aber einiges verstehe ich noch nicht. wie z.B.
-wie verlinke ich denn für die Menü's auch wirklich die Seite (z.B. habe ich die Menüpunkte Galerie, Home und Rezepte)? Also wo kann ich die bearbeiten?
-dann will ich das Datum ändern so wie du aber ich habe in der HTML ja nur das was du oben geschrieben hast, also habe ich vorher von der Vorlage alles rausgelöscht
-und wie bekomme ich die Blogger-Leiste wieder in der man auch die Schrift usw. verändern konnte?
Ich hoffe du kannst mir helfen :)
Liebe Grüße
Hey ich denke damit kann man echt was anfangen. Ich hab aber mal ne frage wegen header. Da ist jetzt ein Kreis...kann man auch eine andere Form machen bzw. in auf die rechte Seite des Blogges transverieren, Wo gibt man das in den Codes an...das hab ich noch nicht ganz gecheckt?
AntwortenLöschenlg
Hallo Mira - ich habe gerade nach einem Tutorial gesucht, in dem es um ein Menü aus Posts geht. Beispielsweise ruft man eine Seite auf und es kommen viele Bilder mit dem Posttitel und einer kleinen Einführung - ganz ähnlich wie auf deinem Blog hier! Wie funktioniert das? Ich meine, geht das nicht auch mit HTML und CSS?
AntwortenLöschenWürde mich wahnsinnig freuen, wenn Du dazu eine Antwort weißt
GLG
Marian von GeoMarian
Gestalten Sie Ihren eigenen Blog, indem Sie eigene Templates für Blogspot erstellen. Wie das geht, zeigen wir Ihnen uerwenden TemplateToaster.
AntwortenLöschen