[WordPress] Theme ‚SIEBZEHN‘

2. Februar 2014 44.551 Aufrufe Web + Webdesign css + demo + html + internet + theme + wordpress 19 Antworten

Mein neues Theme ‚SIEBZEHN‘ steht ab sofort zum Download zur Verfügung. Das Theme ist responsiv, also angepasst für mobile Endgeräte und kleine Bildschirmauflösungen.

Mittels vielfältigen Theme-Optionen kannst du das Theme auf einfache Weise deinen Bedürfnissen anpassen. So kannst du beispielsweise die Farbgestaltung verschiedener Theme-Elemente über Color-Picker verändern und aus einer großen Auswahl vordefinierter Schriftarten (Google Web Fonts und Standard-Schriftarten) deine Lieblingsschriftart auswählen. Und wenn dir keine der von mir ausgesuchten Schriften gefällt, kannst du auch deine eigene Schriftart (s. FAQ’s) komfortabel einstellen.

Ich hoffe, dir gefällt das Theme.

Features

Layout ist komplett CSS-basiert (keine Grafiken)
Cross-Browser kompatibel (Chrome, Firefox, Internet Explorer 9 + 10, Android und iOS 6 getestet)
responsives Layout (CSS3 Media Queries) für optimale Darstellung auf mobilen Endgeräte (Navigation nutzt den Checkbox-Hack)
Post-Thumbnail-Funktion integriert
vorbereitetes Gästebuch-Template
vier widgetfähige Bereich im Fußbereich
vielfältige Theme-Optionen
Social Media-Profillinks (Twitter, Facebook, Google+, Xing, Tumblr, Picasa, flickr, Last.fm, Youtube und RSS-Feed)
integrierte „Teilen“-Buttons (Twitter, Facebook, Google+ und Pinterest)
Custom-Background- und Custom-Header-Funktion
Shortcodes für mehrspaltiges Layout, Info-Boxen und Buttons
Schriftartauswahl (Google Web Fonts und Standardfonts)
Einbindung von eigenen Schriftarten und -formatierungen
zwei vorbereitete Bereiche für individuelle WordPress-Menüs (Kopf- und Fußbereich)
zahlreiche Farbgestaltungsmöglichkeiten
„translation-ready“: englisch und deutsch sind dabei
Stylesheet für den visuellen Editor (Layout, Farben, Schriftarten des Themes im Editor)
Untersütztung für populäre Plugins (WP-Pagenavi, Syntaxhighlighter, Contact Form 7)
ab WordPress Version 3.4

Das responsive Layout auf einem Tablet:

Eine Live-Demo gibt es hier:

Ausprobieren

Den Download findest du unter folgendem Link:

Download

Und hier findest du eine Übersicht meiner WordPress-Themes:

Theme-Showcase

Ach übrigens: wenn dir meine ausgewählten Farben nicht gefallen sollten (was ich mir so gar nicht vorstellen kann), schau doch mal hier oder hier vorbei. Da findest du jede Menge Inspiration und tolle Farbzusammenstellungen, die du auch für das Theme nutzen kannst. Viel Spaß beim experimentieren.

Das Theme ist kostenlos und kann uneingeschränkt genutzt, verändert und weitergegeben werden. Einzige Voraussetzung: der Hinweis und Link auf den Theme-Autor im Fußbereich darf nicht gelöscht und das Theme nicht von Dritten vertrieben werden.

Frequently Asked Questions (FAQ)

F: Wo finde ich die Theme-Optionen bzw. die Theme-Vorschau?

A: Du findest die Theme-Vorschau mit den Optionen unter „Desgin“ -> „Themes“. Wähle dort das hochgeladene Theme aus und klick auf den Button „Anpassen“:

In der Theme-Vorschau kannst du jede Veränderung an Theme-Optionen live mitverfolgen. Nachdem du eine Option verändert hast, wird die Ansicht aktualisiert und du siehst sofort, wie deine Webseite nach der Änderung aussehen wird.

Die Beschreibung der einzelnen Optionen sollte selbsterklärend sein. Falls nicht, probier es einfach aus. Erst nachdem du die Änderung(en) gespeichert hast wird die Webseite auch für deine Besucher aktualisiert.

F: Wie installiere ich das Theme?

A: Lad dir diese Datei herunter. Anschließend loggst du dich im Backend deiner WordPress Installation ein und wählst aus dem Menü „Design“ den Punkt „Themes“. Dort wechselst du zum Register „Themes installieren“ und wählst über den Button „Datei auswählen“ die eben heruntergeladene Zip-Datei aus.

Ein Klick auf den Button „Jetzt installieren“ startet die Installation. Klick auf „Aktivieren“ und schon sieht deine Webseite heiß aus.

Ich habe dazu ein kurzes Video-Tutorial erstellt:

Nun solltest du dich an das Anpassen und Ausprobieren der Theme-Optionen machen. Dazu noch ein Hinweis: wer bereits eines meiner Themes genutzt hat und sich über Darstellung und Farbgebung des neuen Themes wundert, muss gegebenenfalls einige Theme-Optionen manuell anpassen, da die Optionen und Farbwerte aus dem früheren Theme noch in der Datenbank gespeichert sind.

F: Ich würde gerne ein anderes Hintergrundbild nutzen.

A: Im Menü „Design“ unter dem Punkt „Hintergrund“ hast du die Möglichkeit den Hintergrund nach deinem Geschmack anzupassen.

Du kannst entweder ein neues Hintergrundbild von deinem Rechner hochladen, oder ein Bild aus der Mediathek auswählen. Ebenso kannst du das Hintergrundbild komplett entfernen und stattdessen einen einfarbigen Hintergrund nutzen.

Auch hier habe ich ein Video vorbereitet:

F: Ich würde gerne ein anderes Logo nutzen.

A: Das Logo kann über die Theme-Vorschau („Desgin“ -> „Anpassen“) verändert werden. Hier hast du die Möglichkeit eine andere Bilddatei hochzuladen oder eine Datei aus der Mediathek auszuwählen.

F: Wie kann ich ein anderes Kopfzeilen-Bild nutzen?

A: Im Menü „Design“ unter dem Punkt „Kopfzeile“ hast du die Möglichkeit ein anderes Bild einzubinden.

Du kannst entweder ein neues Bild von deinem Rechner hochladen, oder ein Bild aus der Mediathek auswählen. Beachte bitte, dass die vordefinierte Größe 1680 x 500 Pixel beträgt.

Magst du lieber Video gucken?

F: Wie kann ich das Gästebuch-Template nutzen?

A: Erstelle eine neue Seite (Menü „Seite“ -> „Erstellen“), schreib eine nette Einleitung für deine Gäste und wähle als Template „Gästebuch“.

Fertig. Kommentare aktivieren nicht vergessen.

F: Welche Größe haben die Post-Thumbnails?

A: Die Artikel-Thumbnails haben eine Größe von 200 x 200 Pixel. Um die Größe der Thumbs musst du dich allerdings nicht kümmern. Sofern du im Artikel ein Bild einstellst, wird es automatisch auf die benötigten Größen zugeschnitten.

F: Wie kann ich eine eigene Schriftart- bzw. -formatierung verwenden?

A: Das Theme kommt mit einer Vielzahl vordefinierter Webstandardschriftarten sowie Google Web Fonts. Sollten dir die Schriftarten nicht gefallen, kannst du deine Lieblingsschriftart auf einfache Weise einbinden.

Wähle aus dem Menü „Design“ den Punkt „Anpassen“. Es öffnet sich die Theme-Vorschau. Im Reiter „Allgemeine Optionen“ findest du die Schriftoptionen. Du kannst sowohl für die Standardschrift als auch für Überschriften eine individuelle Schriftart einbinden.

Ändere zunächst die Schriftartauswahl auf die Option „individuell“.

Sofern du eine andere Webstandardschriftart (Web Safe Fonts) einbinden möchtest, lässt du das Text-Feld „HTML-Code (<link href=…>) für individuelle Standardschriftart“ leer. In das Text-Feld „CSS-Code (font-family:…;) für individuelle Standardschriftart“ trägst du deine Font-Deklaration ein, also z.B.

font-family: "Comic Sans MS", cursive, sans-serif;

In diesem Feld hast du auch die Möglichkeit weitere Deklarationen hinzuzufügen. Nur mal angenommen, du möchtest den Zeichenabstand vergrößern, gibst du ein:

font-family: "Comic Sans MS", cursive, sans-serif; letter-spacing: 0.1em;

Aber Vorsicht: mit dieser Deklaration änderst du die Standardschrift. Wenn du also weitere Schriftformatierungen hinzufügst, gelten diese für sämtliche Schriften (auch Überschriften).

Sofern du eine Schriftart eines speziellen Dienstes (z.B. Google Web Fonts) einbinden willst, gehst du wie folgt vor:

Such dir im Verzeichnis von Google Fonts deine Lieblingsschriftart und klick auf den Button „Quick-use“. Wähle nun unter den Punkten 1 und 2 die entsprechenden Schriftartoptionen. Nun markierst und kopierst den HTML-Link unter Punkt 3 in die Zwischenablage und fügst diesen in das Feld „HTML-Code (<link href=…>) für individuelle Standardschriftart“ ein.

Individuelle Schriftart am Beispiel eines Google Web Fonts

Kopiere nun den CSS-Code aus Punkt 4 und füge diesen in das Feld „CSS-Code (font-family:…;) für individuelle Standardschriftart“ ein.

Hast du alles richtig gemacht, siehst du in der Vorschau die neue Schriftart. Speichern nicht vergessen.

F: Darf ich das Template verändern?

A: Kein Problem. Lass deiner Kreativität freien Lauf. Einzige Voraussetzung: der Link und Hinweis auf den Theme-Autor (mich) im Fußbereich darf nicht entfernt werden. Wäre auch nicht fair, wenn du meine Arbeit als deine ausgeben würdest, oder?

F: Und wenn ich den Autor-Link doch entfernen möchte?

A: Wenn du den Hinweis unbedingt löschen möchtest, halte ich es für fair, wenn du mir eine kleine Spende in Höhe von 10 € für meine Kaffeekasse zukommen lassen würdest. Schreib mir bitte eine Nachricht mittels des Kontaktformulars. Ich werde dir dann die Bankverbindung für die Überweisung mitteilen.

F: Wie kann ich ein Favicon nutzen?

A: Schau dir mal diesen Artikel an.

Changelog

v1.0 – 02.02.2014

Release

v1.01 – 06.02.2015

Innenabstände des Elements #top geändert
Iframe des Facebook-Buttons wird nicht in voller Breite angezeigt
Übersetzung in der deutschen Sprachdatei angepasst

19 Gedanken zu “[WordPress] Theme ‚SIEBZEHN‘”

Enis sagt:

18. Februar 2014 um 15:03 Uhr

Sehr schönes Theme mit vielen Funktionen :-) Wünsche dir viel Erfolg! Werde es im Falle eines neuen WordPress Blogs mal ausprobieren.
Holger Beck sagt:

21. März 2014 um 14:51 Uhr

Hallo Oliver,

ich arbeite gerade an einem Redesign meiner Webseite und habe mich für dein Theme ‚Siebzehn‘ entschieden. Echt sehr geniale Arbeit!

Ein „Problem“ habe ich im Moment jedoch…

Warum kann ich das Bild in der Kopfzeile nicht größer als 1680 Pixel in der Breite machen? Würde gerne ein Bild von 1920 verwenden…

Viele Grüße
Holger

P.S.: Der Blog in meiner „Webseite“ ist das Redesign – die originale befindet sich auf http://www.lampertheim-digital.de
- Olli sagt:
  
  21. März 2014 um 15:06 Uhr
  Hallo Holger,
  
  Danke für dein positives Feedback. Freut mich :)
  
  Wenn du ein Header-Bild größer 1680 Pixel verwenden möchtest, musst du zwei Dinge anpassen:
  
  Öfffne die Datei „functions.php“ des Themes. Geht am einfachsten über den WordPress-Editor (Menü „Design“ -> „Editor“) und suche nach dem Eintrag
```
//------------- activate the custom-header-function and set the default header-image -------------//

$defaults = array(
	'random-default'         => false,
	'width'                  => 1680,
	'height'                 => 500,
	'flex-height'            => false,
	'flex-width'             => false,
	'header-text'            => false,
	'uploads'                => true,
);

add_theme_support( 'custom-header', $defaults );
```
  und ändere den Wert für die Breite von 1680 Pixel auf 1920 Pixel.
  
  Nun musst du noch einen Wert im Stylesheet ändern. Öffne mit dem Editor das Stylesheet (style.css) und suche nach dem Eintrag
```
.header-image {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -840px;
}
```
  Hier änderst du den Wert für den linken Außenabstand (margin-left) auf -960px.
  
  Das sollte es gewesen sein. Viel Spaß mit dem Theme.
  
  Gruß Olli
Holger Beck sagt:

22. März 2014 um 09:50 Uhr

Hi Olli,

perfekt! Vielen Dank! ;-)

LG
Holger
Holger Beck sagt:

23. März 2014 um 10:32 Uhr

Hallo Olli,

Ich hab da noch was ;-)

Wenn ich in einem Beitrag auf den „Gefällt mir“ Button drücke dann erscheint ja das Fenster in dem ich einen Kommentar abgeben kann bevor der Eintrag bei FB gepostet wird. Bei mir ist dieses Fenster nur so lang wie der Button selbst. Wenn ich Text eintippe dann verschiebt sich das Fenster und ich sehe, dass alles da ist aber halt nicht angezeigt wird. Das passiert bei mir im Google Chrome – im IE geht nur ein Fenster auf und gleich wieder zu. Ich kann auch gerne einen Screenshot schicken, wenn das zu unverständlich erklärt war ;-)

hier kannst du das mal ausprobieren: http://www.lampertheim-digital.de/mg/es-geht-endlich-weiter/ – die Seite ist wie gesagt im Redesign-Prozess.

Und dann noch eine Frage: Die Angaben unter einem Beitrag wie Kategorie, Autor und Antworten haben ja alle ein Symbol vor dem Text. Wäre es möglich bei einem – durch die Seitenbreite erzwungenen – Umbruch immer das Symbol und den Text gemeinsam umzubrechen? Es sieht doof aus wenn das Symbol noch in der oberen Zeile steht und der Text in der nächsten Zeile ganz links…

;-)

LG
Holger
- Olli sagt:
 
 24. März 2014 um 06:34 Uhr
 Hallo Holger,
 
 scheint so, als ob Facebook da kürzlich etwas umgestellt hat. Entferne aus dem Stylesheet mal folgenden Eintrag:
```
.post-share li.facebook {
	width: 130px;
}
```
 Dann solle das Fenster komplett angezeigt werden.
 
 Was deine zweite Frage betrifft, könnte man einen manuellen Zeilenumbruch im Quelltext einfügen, so dass Kategorien, Schlagworte, etc. in einer separaten Zeile stehen.
 
 Dazu musst du das Template „content.php“ und „single.php“ bearbeiten:
```
<div class="post-meta">

	<?php the_category(' + '); ?> 

	<?php if ($options['post_info_author'] == 1 ) { ?>

	<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author" title="<?php _e('View all posts of the author','og-siebzehn'); ?> <?php the_author(); ?>"><?php the_author(); ?></a> 

	<?php } ?>

	<?php comments_popup_link( __('leave a comment','og-siebzehn'), __('1 response','og-siebzehn'), __('% responses','og-siebzehn'), '', __('comments are closed','og-siebzehn') ); ?> 

	<?php edit_post_link(__('Edit this post','og-siebzehn'), ''); ?>

</div>
```
 Gruß Olli
Holger Beck sagt:

24. März 2014 um 16:11 Uhr

also das mit Facebook funktioniert nicht. Wenn ich den Eintrag ganz weg lasse dann bewirkt das nur, dass der Twitter Button direkt im Anschluss, ohne Zwischenraum, beginnt. Wenn ich den Wert vergrößere, vergrößert sich der Zwischenraum aber ohne Einfluß auf das FB Fenster

Das mit den wäre zwar eine Lösung aber nicht wirklich schön, da bleibe ich lieber beim jetzigen Zustand.

Ich hätte da noch so ein paar Dinge – aber ich wollte eigentlich nicht nerven… ;-)
- Olli sagt:
  
  24. März 2014 um 19:25 Uhr
  Hallo Holger,
  
  habe mich gerade nochmal mit dem Facebook-Button beschäftigt und weiß nun wo das Problem liegt. Wenn du im Stylesheet folgendes hinzufügst, wird das Fenster komplett angezeigt:
```
li.facebook iframe{
	max-width: none !important;
}
```
  Gruß Olli
  - Holger Beck sagt:
    
    24. März 2014 um 20:05 Uhr
    
    PERFEKT! ;-)
Holger Beck sagt:

24. März 2014 um 16:12 Uhr

da sollte eigentlich stehen „Das mit den …“ aber das hat nicht ganz hingehauen ;-)
Dominik sagt:

27. März 2014 um 22:56 Uhr

Hallo Olli, sehr schönes Theme! Wann können wir denn mit „18“ rechnen? ;) Bin doch schon so gespannt… :D
- Olli sagt:
  
  28. März 2014 um 06:31 Uhr
  
  Hallo Dominik,
  
  hatte zuletzt wenig Zeit, bin aber auf der Zielgeraden :)
  
  Gruß Olli
Holger Beck sagt:

15. April 2014 um 08:18 Uhr

Hallo Oliver,

könnte man das Gästebuch anders herum sortieren? Also so, dass die neuesten Einträge oben stehen?

LG
Holger
- Olli sagt:
  
  15. April 2014 um 09:55 Uhr
  
  Hallo Holger,
  
  schau dir mal diesen Kommentar von Steffen an.
  
  Gruß Olli
Holger Beck sagt:

18. April 2014 um 10:19 Uhr

Hallo Olli,

hab ich gerade gemacht – aber irgendwie seh‘ ich es nicht…

Die Zeile zum Ändern finde ich nicht im Quellcode und das liegt auch nicht am Theme-Namen ;-)

Grüße
Holger
- Olli sagt:
 
 18. April 2014 um 10:43 Uhr
 Hallo Holger,
 
 in der „guestbook-comments.php“ gibt es den Aufruf der Kommentare:
```
<?php wp_list_comments('type=comment&avatar_size=70'); ?>
```
 Diesen änderst du in
```
<?php wp_list_comments('type=comment&avatar_size=70&reverse_top_level=true'); ?>
```
 Gruß Olli
Holger Beck sagt:

18. April 2014 um 11:42 Uhr

Hi Olli,

Super! Danke!

Grüße
Holger
Volker sagt:

1. Oktober 2015 um 13:16 Uhr

Hallo,

ich nutze „17“ für meine neue Ferienwohnungs-Seite „BorkumSommer“. Mein erster Versuch, eine Seite selbst zu gestalten :)

Eine Frage habe ich: Gibt es eine Möglichkeit, die Fotos nach Anklicken vergrößert in einer Art Laufband/Filmstreifen mit Schaltflächen rechts und links anzuzeigen (so wie bei dem Portal „Traum-Ferienwohnungen.de“ ? Oder brauche ich dann ein anderes Theme?

Ansonsten finde ich „17“ super !! Konnte alles gut bedienen.

Gruß
Volker
- Olli sagt:
  
  5. Oktober 2015 um 06:34 Uhr
  
  Hallo Volker,
  
  dazu benötigst du ein zusätzliches Plugin. Such mal nach Image Slider oder Image Carousel. Ich glaube das Plugin Jetpack hat auch so was in der Art.
  
  Gruß Olli