Neue Variablen und Styles - Dokumentation

Ich habe bei den Variablen so viel ergänzt, wie mir persönlich erforderlich erschien. Dazu gehörte, die separate Änderbarkeit des Font (Schriftart, Schriftgröße und Schriftgewicht) für jeden einzelnen Bereich sowie eine separate Hintergrundfarbe für die Page-Liste. Bei den Styles war mir vor allem wichtig, dass die Großbuchstaben des Blogtitels und die Einrückung der ersten Zeilen deaktiviert wird. Außerdem habe ich die Breitenangaben des Main-Containers und des Sidebar-Containers geändert und Außenabstände für sie festgelegt, so, dass die Sidebar in jeder Screen-Breite angezeigt wird. Bei sehr schmalem Screen ist der Inhalt dann nicht mehr gut lesbar und man schaltet besser auf "Mobil" um. Für die Mobilversion habe ich Kommandos eingetragen, die die Sidebar ausblenden und den Hauptbereich in voller Breite anzeigen. Wirken können die Mobil-Kommandos nur, wenn man seine Mobilvorlage auf "Benutzerdefiniert" gestellt hat.

Folgend habe ich den Variablen- und Stylebereich des HTML eingefügt, wie er nach meinen Änderungen aussieht, ohne die Styles, die ich zusätzlich für die Mobilvorlage und meine individuellen Bedarfe eingetragen habe.
Welche Änderungen ich bei den Variablen gemacht habe, kann man im Vergleich zum Original sehen. Ehemalige Variablen-Namen gibt es nicht mehr. Meine Variablen-Namen sind systematisch aufgebaut: FunktionOrt. Außerdem habe ich sie nach Funktion sortiert, so, dass im Vorlagendesigner zuerst alle Hintergrundfarben eingegeben werden können, dann alle Text- und Link-Farben und schließlich alle Font-Angaben gemacht werden können. Und ich habe bei den Variablen-Beschreibungen jeweils das selbe eingetragen wie beim Variablen-Namen, weil ich die Namen beschreibend genug finde. Welche Änderungen ich im Stylebereich gemacht habe, habe ich mit Hilfe von Kommentaren markiert. Änderungen von Variablen-Namen hinter Dollarzeichen habe ich jedoch nicht unbedingt erwähnt.

    <b:skin><![CDATA[
/*
 * Tekka
 * Style modified from glish: http://www.glish.com/css/
 * Updated by Blogger Team
 * Many Variables added and style modified by Ute Ziemes, http://utez.de/ (2014-12-29, 2016-01-30)
 */

/* Variable definitions

  <Variable name="BgColorBody" description="BgColorBody"
    type="color" default="#f5f5f5" value="#f5f5f5">
  <Variable name="BgColorPageList" description="BgColorPageList"
   type="color" default="#ffffff" value="#ffffff">
  <Variable name="BgColorSidebar" description="BgColorSidebar"
    type="color" default="#ffffff" value="#ffffff">

  <Variable name="ColorBody" description="ColorBody"
    type="color" default="#000000" value="#000000">
  <Variable name="ColorDateHeader" description="ColorDateHeader"
    type="color" default="#808080" value="#808080">
  <Variable name="ColorLink" description="ColorLink"
    type="color" default="#0000ff" value="#0000ff">
  <Variable name="ColorVisitedLink" description="ColorVisitedLink"
    type="color" default="#800080" value="#800080">
  <Variable name="ColorSidebar" description="ColorSidebar"
    type="color" default="#000000" value="#000000">
  <Variable name="ColorSidebarTitle" description="ColorSidebarTitle"
    type="color" default="#000000" value="#000000">
  <Variable name="ColorSidebarLink" description="ColorSidebarLink"
    type="color" default="#0000ff" value="#0000ff">
  <Variable name="ColorSidebarVisitedLink" description="ColorSidebarVisitedLink"
    type="color" default="#800080" value="#800080">

  <Variable name="FontHeaderTitle" description="FontHeaderTitle"
    type="font" default="normal normal 250% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 250% Nobile">
  <Variable name="FontHeaderDescription" description="Font HeaderDescription"
    type="font" default="normal normal 115% 'Courier New', Courier, FreeMono, monospace" value="normal normal 115% 'Courier New', Courier, FreeMono, monospace">
  <Variable name="FontPageList" description="FontPageList"
    type="font" default="normal normal 130% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 120% Nobile">
  <Variable name="FontDateHeader" description="Font DateHeader"
    type="font" default="normal normal 85% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 85% Arial, Tahoma, Helvetica, FreeSans, sans-serif">
  <Variable name="FontPostTitle" description="FontPostTitle"
    type="font" default="normal bold 150% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 150% Arial, Tahoma, Helvetica, FreeSans, sans-serif">
  <Variable name="FontPostBody" description="FontPostBody"
    type="font" default="normal normal 100% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 100% Arial, Tahoma, Helvetica, FreeSans, sans-serif">
  <Variable name="FontPostFooter" description="FontPostFooter"
    type="font" default="normal normal 87% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 87% Arial, Tahoma, Helvetica, FreeSans, sans-serif">
  <Variable name="FontBlogPager" description="FontBlogPager"
    type="font" default="normal normal 110% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 110% Arial, Tahoma, Helvetica, FreeSans, sans-serif">
  <Variable name="FontCommentsTitle1" description="FontCommentsTitle1"
    type="font" default="normal bold 100% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 100% Arial, Tahoma, Helvetica, FreeSans, sans-serif">
  <Variable name="FontCommentsTitle2" description="FontCommentsTitle2"
    type="font" default="normal bold 100% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 100% Arial, Tahoma, Helvetica, FreeSans, sans-serif">
  <Variable name="FontFooter" description="FontFooter"
    type="font" default="normal normal 82% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 82% Arial, Tahoma, Helvetica, FreeSans, sans-serif">
  <Variable name="FontSidebarTitle" description="FontSidebarTitle"
    type="font" default="normal bold 150% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 120% Arial, Tahoma, Helvetica, FreeSans, sans-serif">
  <Variable name="FontSidebar" description="FontSidebar"
    type="font" default="normal normal 100% Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 100% Arial, Tahoma, Helvetica, FreeSans, sans-serif">

  <Variable name="startSide" description="Start side in blog language"
            type="automatic" default="left" value="left">
  <Variable name="endSide" description="End side in blog language"
            type="automatic" default="right" value="right">
*/


body {
  margin-top: 0px;
  margin-$endSide: 0px;
  margin-bottom: 0px;
  margin-$startSide: 0px;
  font-size: normal;  /* utez - statt small - utez - */
  background-color: $BgColorBody;
  color: $ColorBody;
}


#content-wrapper {
  margin-top: 0px;
  margin-$endSide: 0px;
  margin-bottom: 0;
  margin-$startSide: 5px;
}


#main {
  float: $startSide;
  margin-right:1%; /* - utez - statt nichts - utez - */
  padding-bottom: 20px;
  padding: 0px;
  width: 65%; /* - utez - statt 67% - utez - */
/* font: $bodyFont; - utez - durch Kommentarzeichen deaktiviert - utez - */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}


h1 {
  font: $FontHeaderTitle; /* utez - statt font-size 400% - utez - */
  margin-top: 20px;  /* utez - statt nichts - utez - */
  margin-bottom: -20px;  /* utez - statt nichts - utez - */
  padding-$startSide: 15px;
  text-transform: none; /* utez - statt uppercase - utez - */
}
h1 a, h1 a:link, h1 a:visited {
  text-decoration: none;
  color: $ColorBody;
}
.description {
  font: $FontHeaderDescription; /* - utez - statt nichts - utez - */
  /* text-align: center; - utez - durch Kommentarzeichen deaktiviert - utez - */
  padding-top: 10px;
  padding-left: 15px;  /* utez - statt nichts - utez - */
}


.PageList { /* - utez - statt nichts - Eine Alternative wären die optional ergänzbaren Gradientfarben oder nichts - utez - */
background: $(BgColorPageList);
}
.PageList { /* - utez - statt nichts - utez - */
font: $FontPageList;
}



h2.date-header {
  border-bottom: none;
  font: $FontDateHeader; /* - utez - statt font-size 130% - utez - */
  text-align: $startSide;
  margin-top: 20px;
  margin-bottom: 14px;
  padding: 1px;
  padding-$startSide: 17px;
  color: $ColorDateHeader;
  font-weight: normal;
  font-family: Trebuchet MS, Verdana, Sans-serif;
}



.post h3 {
  font: $FontPostTitle; /* - utez - statt font-size 150% und font-weight bold - utez - */
}
.post h3 a,
.post h3 a:visited {
  color: $ColorBody;
}
.post {
  padding-$startSide: 20px;
  margin-bottom: 20px;
  text-indent: 0px; /* - utez - statt 10px - utez - */
  padding-$endSide: 20px;
  line-height: 22px;
  font: $FontPostBody;  /* utez - statt nichts - ehemals reguliert via ehemals aktivem bodyFont - utez - */
}
/* Jump-Link Anfang - utez - statt nichts - utez - */
.jump-link a {
margin-top: 0px;
line-height: 3.0;
padding: 5px;
border: 1px solid black;
color: inherit;
font-weight: bold;
}
.jump-link a:visited {
color: inherit;
border: 1px solid black;
}
/* Jump-Link Ende - utez - statt nichts - utez - */



.clear {
  clear: both;
}



.post-footer {
  margin-bottom: 15px;
  margin-$startSide: 0px;
  font: $FontPostFooter; /* - utez - statt font-size 87% - utez - */
}



.feed-links {
  clear: both;
  line-height: 2.5em;
  margin-$startSide: 20px;
}



#comments {
  margin-$startSide: 20px;
}
#comments h4 {
  font: $FontCommentsTitle1; /* - utez - statt nichts - utez - */
}
#comment-post-message {
  font: $FontCommentsTitle2; /* - utez - statt nichts - utez - */
}
.comment-footer {
  padding-bottom: 1em;
}



#blog-pager {
  text-align: center;
  font: $FontBlogPager; /* - utez - statt nichts - utez - */
}
#blog-pager-newer-link {
  float: $startSide;
  margin-$startSide: 20px;
}
#blog-pager-older-link {
  float: $endSide;
}



/* LINKS sonstige Anfang */
a img {
  border: 0;
}
a {
  text-decoration: none;
  color: $ColorLink;
}
a:hover,
a:visited {
  color: $ColorVisitedLink;
}
a:hover {
  border-bottom: dashed 1px red;
}
/* LINKS sonstige Ende */



/* SIDEBAR Anfang */
#sidebar {
  text-transform: none;
  background-color: $BgColorSidebar;
  color: $ColorSidebar;
  margin-left: 1%; /* - utez - statt nichts - utez - */
  padding-$startSide: 20px;
  padding-bottom: 50px; /* - utez - statt nichts - utez - */
  width: 25%; /* - utez - statt 30% - utez - */
  float: $endSide;
  font: $FontSidebar; /* - utez - statt ehemals aktivem bodyFont - utez - */
  border-$startSide: 2px dashed $ColorBody;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
.sidebar h2 {
  font: $FontSidebarTitle; /* - utez - statt font-weight (bold), font-size (150%) - utez - */
  color: $ColorSidebarTitle;
}
.sidebar .widget {
  padding-top: 0px; /* - utez - statt 4px - utez - */
  padding-$endSide: 1%; /* - utez - statt 8px - utez - */
  padding-bottom: 0;
  padding-$startSide: 0;
}
#sidebar a {
  color: $ColorSidebarLink;
}
#sidebar a:hover,
#sidebar a:visited {
  color: $ColorSidebarVisitedLink;
}
.profile-textblock {
  clear: both;
  margin-$startSide: 0;
}
.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
}
/* SIDEBAR Ende */



.footer {
  font: $FontFooter; /* - utez - statt nichts - utez - */
  margin-bottom: 50px; /* - utez - komplett neu - utez - */
  padding:0px 25px; /* - utez - konplett neu - utez - */
}

]]></b:skin>


Ute Ziemes, , vorlagetekka.blogspot.com
Labels:

0 Kommentare:

Kommentar veröffentlichen

Abonnieren Kommentare zum Post (Atom)