Crimson Red WordPress Child Theme

Crimson Red Screenshot

Live Demo

Type: Blogger
Beans Child Theme
Released: July 2016

Theme Colors:


Download Child Theme

Download Demo Content


View Source On Github

Zur deutschen Beschreibung springen

Crimson Red – English Theme Description

Crimson Red is a Child Theme for the free theme framework Beans.

Size, color and font

Sidebar width: 250px
Content width: 705px
Image width: 705px
Content width – No Sidebar: 1046px
Content width – No Sidebar Centred: 800px
Content width – Two Sidebars: 478px
Text color: #666666 (Satans Gray)
Link color: #990000 (Crimson Red)
Complementary color: #009999 (Persian Green)

Font: „Helvetica Neue“, Helvetica, Arial, sans-serif

Preferred WordPress media settings

Thumbnail: 150 x 150 crop
Medium: 350 x 0
Big: 705 x 0

Features

A very lightweight and basic WordPress Theme, but with all needed features.

Four menus

  • Primary (header)
  • Secondary (below header – only visible if you have a menu assigned)
  • Social (for social media icons – above the header)
  • Footer (for privacy policy)

Five widget areas

  1. Primary
  2. Secondary
  3. Footer
  4. Hero
  5. Offpage-Navigation (Mobile devices)

External links

All external links (with target="_blank") get a (Unicode: f08e) icon
Example: uikit

Editor buttons and styles

Crimson Red - New editor buttons
Crimson Red – New editor buttons

TOC

Easily add a TOC to your article. Without any plugin or special code. Just plain HTML.

Result:

Code:

<div id="j0e_toc">
<span>Table of Contents</span>
<ul>
	<li><a href="#anchor">Title</a></li>
	<li><a href="#anchor2">Title 2</a></li>
</ul>
</div>

It’s really that easy.

Panel / Box

UIkit uses the word panel for it, but I would usually say box.

Result:
The panel:

The Panel

The primary panel:

The primary Panel

The secondary panel:

The secondary Panel

Code:

<div class="uk-panel uk-panel-box">The Panel</div>

Use the panels for special content like a very important message or a warning.

Columns

Columns like in the old fashioned newspaper.

Result:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Code:

<p class="uk-column-1-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Just change the „3“ to an other digit, to change the columns.

Grid

Grids are very important for design.

Result:

Grid 1
Grid 2
Grid 2

Code:

<div class="uk-grid uk-grid-medium">
    <div class="uk-width-1-3">Grid 1</div>
    <div class="uk-width-1-3">Grid 2</div>
    <div class="uk-width-1-3">Grid 2</div>
</div>

You can use the grids also for small tables.

Icons

Use the power of Font Awesome and all of it’s icons.

Result:

Code:

<i class="uk-icon-exclamation"></i>

The icons can be used in every part of your article.

Button

Buttons work very good for CTA.

Result:

My new Button!

Code:

<a class="uk-button uk-button-primary" href="https://j0e.org/">My new Button!</a>

Easy design elements for your blog post.

Crimson Red – Deutsche Theme Beschreibung

Crimson Red ist ein Child Theme für das kostenlose Theme Framework Beans.

Maße, Farben und Schrift

Sidebar Breite: 250px
Content Breite: 705px
Image Breite: 705px
Content Breite – Keine Sidebar: 1046px
Content Breite – Keine Sidebar Zentriert: 800px
Content Breite – Zwei Sidebars: 478px
Text Farbe: #666666 (Satans Gray)
Link Farbe: #990000 (Crimson Red)
Komplementäre #009999 (Persian Green)

Font: „Helvetica Neue“, Helvetica, Arial, sans-serif

WordPress Medien Einstellungen

Thumbnail: 150 x 150 crop
Medium: 350 x 0
Big: 705 x 0

Features

Ein sehr schlankes und einfaches WordPress Theme, mit allen notwendigen Funktionen.

Vier Menüs

  • Primär (Header)
  • Sekundär (Unter dem Header – nur sichtbar, wenn ein Menü aktiv ist)
  • Sozial (Für Social Media Icons – über dem Header)
  • Footer (Für Impressum)

Fünf Widget Bereiche

  1. Primär
  2. Sekundär
  3. Footer
  4. Hero
  5. Offpage-Navigation (Mobile Geräte)

Externe Links

Alle externen Links (mit target="_blank") bekommen ein (Unicode: f08e) Icon angehängt
Beispiel: uikit

Editor Buttons und Styles

Crimson Red - Neu Editor buttons
Crimson Red – Neue Editor Buttons

Inhaltsverzeichnis

Füge deinem Artikl auf ganz einfache Weise ein Inhaltsverzeichnis hinzu. Ohne zusätzliches Plugin, nur nacktes HTML.

Ergebnis:

Code:

<div id="j0e_toc">
<span>Inhaltsverzeichnis</span>
<ul>
	<li><a href="#anchor">Title</a></li>
	<li><a href="#anchor2">Title 2</a></li>
</ul>
</div>

Es ist wirklich so einfach. Mit nur einem Klick.

Panel / Box

UIkit verwendet den Name Panel dafür, ich würde normalerweise Box dazu sagen.

Ergebnis:
Das Panel:

Das Panel

The primary panel:

Das primäre Panel

The secondary panel:

Das sekundäre Panel

Code:

<div class="uk-panel uk-panel-box">Das Panel</div>

Nutze die Panles für speziellen Test wie sehr wichtige Informationen oder Warnungen.

Columns

Spalten in der alter Zeitung.

Ergebnis:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Code:

<p class="uk-column-1-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Zum Ändern der Spaltenanzahl musst du lediglich die Zahl „3“ auf dein gewünschtes Ergebnis ändern.

Grid

Aufteilungen in ein Raster sind sehr wichtige Designelemente.

Ergebnis:

Grid 1
Grid 2
Grid 2

Code:

<div class="uk-grid uk-grid-medium">
    <div class="uk-width-1-3">Grid 1</div>
    <div class="uk-width-1-3">Grid 2</div>
    <div class="uk-width-1-3">Grid 2</div>
</div>

Das Grid kannst du auch für kleine Tabellen nutzen.

Icons

Nutze die Vielfalt der Icons von Font Awesome in all deinen Artikeln und Seiten.

Ergebnis:

Code:

<i class="uk-icon-exclamation"></i>

Die Icons können in allen Bereichen deines Blogs genutzt werden.

Button

Buttons funktionieren sehr gut für Angebote und Aufforderungen, kurz CTA.

Ergebnis:

Mein neuer Button!

Code:

<a class="uk-button uk-button-primary" href="https://j0e.org/">Mein neuer Button!</a>

So einfach erstellst du aufregende Blogs Posts.