.post-body blockquote {
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
border-left: 2px solid #ea808b;
}
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 10px;
border: 1px solid #ea808b;
}
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
}
.post-body blockquote:first-letter {
font-family: 'Great Vibes';
font-size: 35px;
}
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb1r1CMa2Fwh7Bg_gYOQDDZ3y08D56QctwdnLN9MY99OfV-FFqczhPyjagRMEHrksBnJQ-2SirCKqbfGwxbl2vAcOLyIXIG-Xpa92MIihR8mEy9keu5TdcaqvEaJ5UwTA52afDksRxuVL4/s320/squares4.jpg);
padding: 20px;
margin: 1em 0 1em 10px;
}
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
border-left: 2px solid #ea808b;
}
.post-body blockquote:before {
content: '" ';
}
.post-body blockquote:after {
content: ' "';
}
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPa5eUlIcfmUbVFxllop0DlY2_tInFM0pmb7rpiUeps2BTeAMnVAWAPOg4D1XWN0p2sEP9_a0nWTyyOMtG05so_nBHErGPznmd1Ax2REBgFHvXU4grrcqUANuNQPQ9t5kC1ezMhr615B6/s1600/quote.png) no-repeat;
background-position-x: left;
background-position-y: top;
}
body {}
|
Grundlegende Eigenschaften des Blogs
|
a:link {}
|
Eigenschaften der Links
|
a:visited {}
|
Eigenschaften der bereits besuchten Links
|
a:hover {}
|
Eigenschaften der Links, wenn man mit der Maus darüberfährt
|
a img {}
|
Eigenschaften der Bilder, die sich im Blog befinden und eine Verlinkung aufweisen
|
/* Header
-----------------------------------------------*/
|
/* Oberer Teil
-----------------------------------------------*/
|
#header-wrapper {}
|
Eigenschaften des Header-Bereichs
|
#header-inner {}
|
Eigenschaften für die Dinge, die sich im Header befinden
|
#header {}
|
Grundlegende Eigenschaften des Headers
|
#header h1 {}
|
Eigenschaften für Blogtitel im Header
|
#header a {}
|
Eigenschaften aller Links im Header (inkl. Blogtitel)
|
#header a:hover {}
|
Eigenschaften aller Links im Header (inkl. Blogtitel), wenn man mit der Maus darüberfährt
|
#header .description {}
|
Eigenschaften für die Blogbeschreibung unter dem Header
|
#header img {}
|
Eigenschaften für das Headerbild
|
/* Outer-Wrapper
----------------------------------------------- */
|
/* Hauptteil
----------------------------------------------- */
|
#outer-wrapper {}
|
Eigenschaften für den Gesamten Bereich (Sidebar+Haupbereich)
|
#main-wrapper {}
|
Eigenschaften für den Hauptbereich (Postbereich)
|
#sidebar-wrapper {}
|
Eigenschaften für den Sidebar-Bereich
|
/* Headings
----------------------------------------------- */
|
/* Überschriften
----------------------------------------------- */
|
h2 {}
|
Eigenschaften für Sidebartitel, Datum und “Überschrift” im Postbereich
|
/* Posts
-----------------------------------------------*/
|
/* Postbereich
-----------------------------------------------*/
|
h2.date-header {}
|
Eigenschaften für das Datum
|
.post {}
|
Eigenschaften für den Postbereich
|
.post h3 {}
|
Eigenschaften für Posttitel & Seitentitel auf der Startseite und (vor allem) auf der Postseite/Seite
|
.post h3 a, .post h3 a:visited, .post h3 strong {}
|
Eigenschaften für den Posttitel auf der Startseite
|
.post h3 strong, .post h3 a:hover {}
|
Eigenschaften für den Posttitel auf der Startseite, wenn man mit der Maus darüber fährt
|
.post-body {}
|
Eigenschaften für den einzelnen Postbereich
|
.post-body blockquote {}
|
Eigenschaften für Zitate
|
.post-footer {}
|
Eigenschaften für den unteren Teil des Posts
|
.comment-link {}
|
Eigenschaften für den Link zu den Kommentaren
|
.post img, table.tr-caption-container {}
|
Eigenschaften für die Bilder im Postbereich
|
.tr-caption-container img {}
|
Keine Angabe*
|
.post blockquote {}
|
Eigenschaften für die Zitate
|
.post blockquote p {}
|
Eigenschaften für Absätze in den Zitaten
|
/* Comments
----------------------------------------------- */
|
/* Kommentare
----------------------------------------------- */
|
#comments h4 {}
|
Eigenschaften für die Überschrift oberhalb des Kommentarbereichs
|
#comments-block {}
|
veraltet - keine Funktion**
|
#comments-block .comment-author {}
|
veraltet - keine Funktion**
|
#comments-block .comment-body {}
|
veraltet - keine Funktion**
|
#comments-block .comment-footer {}
|
veraltet - keine Funktion**
|
#comments-block .comment-body p {}
|
veraltet - keine Funktion**
|
.deleted-comment {}
|
Eigenschaften der gelöschten, sichtbaren Kommentaren
|
.feed-links {}
|
Keine Angabe*
|
#blog-pager-newer-link {
|
Eigenschaften für den Link "Neuere Posts" am Ende des Blogs
|
#blog-pager-older-link {}
|
Eigenschaften für den Link "Ältere Posts" am Ende des Blogs
|
#blog-pager {}
|
Eigenschaften für den Link "Startseite" am Ende des Blogs
|
/* Sidebar Content
----------------------------------------------- */
|
/* Sidebar
----------------------------------------------- */
|
.sidebar {}
|
Grundlegende Eigenschaften für die Sidebar
|
.sidebar ul {}
|
Eigenschaften für alle ungeordneten Listen der Sidebar
|
.sidebar li {}
|
Eigenschaften für alle Punkte in den Listen der Sidebar
|
.sidebar .widget. .main .widget {}
|
Eigenschaften für alle Gadgets in der Sidebar und im Postbereich
|
.main .Blog {}
|
Eigenschaften für den Postbereich
|
/* Profile
----------------------------------------------- */
|
/* Profilgadget
----------------------------------------------- */
|
.profile-img {}
|
Eigenschaften für das Bild im Profilgadget
|
.profile-data {}
|
Eigenschaften für die Überschrift im Profilgadget
|
.profile-datablock {}
|
Eigenschaften für die Überschrift im Profilgadget
|
.profile-textblock {}
|
Eigenschaften für den Text im Profilgadget
|
.profile-link { }
|
Eigenschaften für die Links im Profilgadget
|
/* Footer
----------------------------------------------- */
|
/* Unterer Teil des Blogs
----------------------------------------------- */
|
#footer {}
|
Eigenschaften für den unteren Teil des Blogs
|
b{
...
}
i{
...
}
u{
...
}
<b>Dein Text</b>
<u>Dein Text</u>
<i>Dein Text</i>
Der Text hier ist normal, aber ab <b>hier sieht es anders aus</b>. Jetzt ist es wieder normal.
Selektor {
Attribut: Wert;
}
width: 50px;
height: 5em;
width: 100%;
height: auto;
border-top: 1px solid #000000;
border-left: 3px dashed rgb(174, 255, 7);
border-right: 5px dotted #ffffff;
background-color: #ffffff;
background-color: rgb(0, 0, 0);
font-size: 5em;
font-size: 15px;
color: #ccdd66;
text-align: left;
text-transform: uppercase;
font-family: 'Verdana', sans-serif;
letter-spacing: 0.5em;
letter-spacing: 1px;
<b:skin><!-- Font Awesome -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css' rel='stylesheet'/></body><!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>
$(document).ready(function(){
$('a[href="#search"]').on('click', function(event) {
$('#search').addClass('open');
$('#search > form > input[type="search"]').focus();
});
$('#search, #search button.close').on('click keyup', function(event) {
if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
$(this).removeClass('open');
}
});
});
</script>
placeholder="Platzhaltertext")steht.<div id="search">
<span class="close">X</span>
<form role="search" id="searchform" action="/search" method="get">
<input value="" name="q" type="search" placeholder="type to search"/>
</form>
</div>
/* Search Style */
#search {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Hintergrundfarbe des Overlays */
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);
opacity: 0;
display: none;
}
#search.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
z-index: 106;
display: block;
}
/* Suchfeld Style */
#search input[type="search"] {
position: absolute;
top: 50%;
left: 0;
margin-top: -51px;
width: 60%;
margin-left: 20%;
color: rgb(255, 255, 255); /* Schriftfarbe */
background: transparent;
border-top: 1px solid rgba(255, 255, 255, .8); /* Rand oben */
border-bottom: 2px solid rgba(255, 255, 255, .5); /* Rand unten */
border-left: 0px solid transparent;
border-right: 0px solid transparent;
font-size: 40px; /* Schriftgrösse */
font-family: Josefin Sans; /* Schriftart */
text-align: center; /* Textausrichtung */
outline: none;
padding: 10px;
}
/* x-Link */
#search .close {
position: fixed;
top: 15px;
right: 15px;
opacity: 1;
font-size: 27px;
color: #fff;
}
#search .close:hover{
cursor: pointer;
}]]></b:skin> ein, oder im Vorlagendesigner bei CSS hinzufügen (oder in einem HTML-Gadget, dann aber die Style-Tags nicht vergessen).<a href="#search">
<i class="fa fa-search"></i>
</a>
