Wir nutzen das Plugin “Custom CSS”, um unser WordPress-Theme etwas umzugestalten. Hier sind alte und aktuelle Versionen des Codes.

⊡

[ii] Twitch

[∷] Twitch

[∣∣]
[ll]
[∥]

ʠ TikTok

đ
ď
ƌ
Ƽ
ƽ
ɗ
ʆ
ʠ

Februar 2021

/* Toggle Menü im Web verschwinden lassen */

.menu-toggle svg, .search-toggle svg {
fill: #ffffff;
}

/* In der mobilen Ansicht die Studiobechreibung ausblenden */

@media only screen and (max-width: 768px) {

.loose-featured-slider {
display: none;
}
}

/* Das hier schaltet macht das Toggle Menü in den mobilen Ansichten wieder sichtbar */

@media only screen and (max-width: 768px) {

.menu-toggle svg, .search-toggle svg {
fill: #363636;
}

}

/* Stellt den Font dem Slider für den Zusammenfassungssatz ein. Ich hab die selbe Größe wie im Menü gewählt. */

.loose-featured-slider-title a {
font-size: 22.5px !important;
}

.loose-featured-slider-header a {
font-weight: 700;
}

/* HEADER */

/* Seitentitelfont 1 – Font für den Seitentitel – Startseite – APPLE SYSTEM FONT –> AUSKOMMENTIERT seit ich ein Logo hab

h1 a, .site-title a {
text-transform: none;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
font-weight: 400;
letter-spacing: 0em;
font-size: 58px;
color: #233;
}

/* Seitentitelfont 2 – Font für den Seitentitel – Startseite – HELVETICA */

h1 a, .site-title a {
text-transform: none;
font-family: Helvetica;
font-weight: 400;
letter-spacing: 0em;
font-size: 58px;
color: #000000;
}

/* Vergrößert den Abstand zwischen Seitentitel und Seitenslogan */

.site-description {
margin-top: 0.2em;
}

/* Code um Tagline “Design Studio …” anzuzeigen. Dafür musste ich auch unterm Logo noch Platz machen. Das macht der obere Code – AUSKOMMENTIERT

.site-title {
margin-bottom: 1.6rem;
}

.site-branding::after {
content: “Open Design vs Climage Change | A Circular Design Studio”;
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
letter-spacing: 0.1em;
font-weight: 200;
font-size: 20px;
color: #1c1c1c;
}

/* MENÜ */

/* Unterm Menü gab es früher eine Linie mit Schatten. Den Schatten hab ich entfernt . */

.navbar-navigation {
box-shadow: none !important;
}

/* Das Logo war nicht mit den Worten des Menüs auf einer Linie. Das hier fixt das (margin 1.8 ist neu) – AUSKOMMENTIERT – weil nicht mehr notwendig, nachdem ich das Menü etwas hochgerückt habe – siehe unten

.menu-logo img {
margin: 1.8rem 1rem;
}

/* Das hier bringt die Worte im Menü etwas nach oben, um sie mit dem Logo auf die selbe Linie zu packen 20px */

.navbar-navigation ul {
margin-top: 9px !important;
}

/* Font im Menü – oder auch: Wenn ich den Font in der Aufzählung ändere, dann ändert es auch den font im Menü. Darum hier ein Versuch es hinterher zu fixen. normaler font-weight: 400, font-size: 13px; */

.navbar-navigation ul {
font-family: ‘Helvetica’;
font-size: 23px;
font-weight: 600;
line-height: 1.6;
text-transform: none;
color: #026699 !important;
}

/* Menüleiste Padding */

.navbar-navigation ul a {
padding: 1em;
}

/* Ändert im Menü die Farbe der Hervorhebung auf den Seiten die aktiv sind */

Element {
}
.navbar-navigation .current_page_item > a, .navbar-navigation .current-menu-item > a, .navbar-navigation .current_page_ancestor > a, .navbar-navigation .current-menu-ancestor > a, .navbar-navigation .current_page_item > .expand-submenu, .navbar-navigation .current-menu-item > .expand-submenu, .navbar-navigation .current_page_ancestor > .expand-submenu, .navbar-navigation .current-menu-ancestor > .expand-submenu {
color: #026699;
}

/* Ändert im Menü den Hover */

Element {

}
.navbar-navigation a:hover, .navbar-navigation a:focus {

color: #026699;
}

/* Ändert im Menü die Font-Farbe */

Element {

}
.navbar-navigation a {

color: #026699;

}

/* STARTSEITE */

/*Abstand zwischen Seitenbeschreibung und top auf der Startseite verringert. */

.home .site-content {
padding-top: 1.5rem;
}

/* Auf der Startseite gab es rechts oben eine Lupe. Die muss weg */

.search-toggle {
display: none;
}

/* Font – Die Vorschautexte mussten einen kleinen Schritt kleiner werden für mehr Ausgewogenheit */

.blog .content-area p {
font-size: 20.5px !important;
}

/* Font – Auf der Startseite die Überschriften in den Kästen */

.blog .content-area .entry-title, .archive .content-area .entry-title, .search .content-area .entry-title {
font-size: 1.65rem !important;
}

/* Für weniger Luft zwischen Menü und Strich Padding beim Ausklappmenü ändern */

.menu-toggle, .search-toggle {
padding: 0.1rem 0.1rem 0.1rem;
}

/* Farbe der Kategorien auf der Startseite unter den Bildern */

Element {
}
.featured-image-cat a {
color: #000000;
}

/* Die Umrandungen der Boxen auf der Startseite */
.blog article {
padding: 1.25rem;
box-shadow: 0 0.5px 0.5px #ccc;
border: 1px dotted #ccc;
}

/* Hintergrundfabe der Boxen auf der Startseite – AUSKOMMENTIERT

.blog article {
background-color: #fefefe;
}

/* Die Umrandungen der Boxen auf den Kategorienseiten*/
.archive article {
padding: 1.25rem;
box-shadow: 0 0px 0px #dddbdb;
border: 1px solid #ccc;
}

/* Hintergrundfabe der Boxen auf den Kategorienseiten – AUSKOMMENTIERT

.archive article {
background-color: #fefefe;
}

/* Regelt die Abstände zwischen Seitentitel und oben und unten */

.site-branding {
position: relative;
padding: 1.7rem 0;
text-align: center;
}

.site-branding {
padding-bottom: 0.8rem;
}

/* Abastand zwischen Seitennamen und Slogan vergrößern */

.site-title a {
line-height: 85px;
}

/* Auf der Startseite – es ist zuviel Luft gewesen ober- und unterhalb von Latest Posts */

.loose-page-intro {
margin-bottom: 2.5rem;
padding: 1rem 0.5rem;
}

/* Auf der Startseite war zuviel Luft beim Logo im Scrollmenü */

.menu-logo .menu-blogname {
padding: 1.5em 0em;
}

/* Die Farbe der Schrift der Blogbeiträge in den Boxen auf der Startseite */

.blog .content-area .entry-title a {
color: #000000;
}

/* FONT */

/* Hier nur Meta. Weitere Festlegungen stehen jeweils in den einzelnen Unterbereichen. */

/* Bildunterschriften */

.wp-caption .wp-caption-text {
font-family: ‘Helvetica’;
font-size: 16px;
font-weight: 200;
color: #363636;
}

/*Font Smoothing – das hier macht die Fonts auf der ganzen Seite mehr crisp. Bei Roboto ist das eher doof. Aber bei Source Serif Pro ist das wichtig.*/

body {
-webkit-font-smoothing: antialiased;
}

/* Überschrift 6 – Die kleineste Überschrift ließ sich unter “Customize” nicht auf 200 stellen. Darum hier. */

element.style {
}
.single article h6, .page article h6 {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 80%;
font-family: Helvetica;
font-weight: 100;
line-height: 1.4em;
}

/* Überschrift 4 – Da wollte ich eine Zwischengröße */
h4 {
font-size: 24.5px !imgportant;
}

/* Font im Suchfeld auf der 404 Seite */

body, button, input, select, textarea {
font-family: ‘Helvetica’;
}

/* Font im Suchfeld oben rechts Widget Area */

.widget.widget_search .search-form .search-field {

font-family: Source Serif Pro !important;
}

/* Font auf den Buttons */

.btn-default {
font-family: ‘Helvetica’;
font-size: 1.3rem;
font-style: normal;
font-weight: 300;
line-height: 1.6;
}

/* Schriftart in den nummerierten Aufzählungen */

element.style {
}
ol {
font-family: ‘Source Serif Pro’;
font-size: 21px;
}

/* Das hier importiert die Fonts Major “Mono Display Font” und “Noto Sans KR” von Google in die Seite so dass Du ihn nutzen kannst. – AUSKOMMENTIERT

@import url(‘https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap’);

/* Font auf Cookie Consent */

.cookie-bar-block #catapult-cookie-bar span {
font-family: ‘Source Serif Pro’;
font-size: 20px;
color: #000000;

}

/* Font im Suchfeld */

Element {
}
.widget.widget_search .search-form .search-field {
font-family: ‘Roboto Slab’;
font-size: 1rem;
color: #000000;
}

/* Font unten bei “nächstes Post” ändern. */

Element {
}
div.loose-next-article {
font-family: ‘Helvetica’;
line-height: 2.3;
font-size: 0.8rem;
color: #000000;
}

Element {
}
div.loose-previous-article {
font-family: ‘Helvetica’;
line-height: 2.3;
font-size: 0.8rem;
color: #000000;
}

Element {
}
div.loose-next-article-title {
font-family: ‘Helvetica’;
font-size: 1.5rem;
color: #000000;
}

Element {
}
div.loose-previous-article-title {
font-family: ‘Helvetica’;
font-size: 1.5rem;
color: #000000;
}

/* Font in den Aufzählungen ändern. */

Element {
}
ul {
font-family: ‘Source Serif Pro’;
font-size: 21px;
font-style: normal;
font-weight: 300;
line-height: 1.7;
color: #000000;
}

/* Font der Kategoriennamen auf den Artikelseiten und in den Überschriften der Widgets */

.widget-title, .category-list, .comments-title, .comment-reply-title {
margin-bottom: 2.5rem;
color: #363636;
font-family: Helvetica;
letter-spacing: 0.15em;
text-transform: uppercase;
}

/* KATEGORIENSEITEN */

/* Zwischen Kategorientitel und Text etwas mehr Luft */

.loose-page-intro p {
margin-top: 1.5rem;
}

/* Kategorienseite – Die Schriftfarbe der Überschriften musste hier speziell angepasst werden */

.blog .content-area .entry-title a, .archive .content-area .entry-title a, .search .content-area .entry-title a {
color: #000000;
}

/* Auf den Kategorienseiten hätte ich gerne nicht den Einführungssatz zu Mifactori stehen der auf der Hauptseite per Widget eingblendet wird */

.archive .widget-area {
display: none;
}

/* Font auf den Kategorienseiten */

.loose-page-intro p {
margin-top: 1rem;
font-size: 21.5px;
margin-bottom: 0;
font-family: Helvetica;
letter-spacing: 0.1em;
font-weight: 100;
text-transform: none;
}

/* Auf den Kategorienseiten die Links unterstreichen */

Element {
}
.loose-page-intro a {
border-bottom: 1px dotted #000000 !important;
}

Element {
}
.loose-page-intro a:hover {
color: #a91e23;
}

/* Link Color Category Page */

.loose-page-intro a {
color: #000000 !important;
}

/* Color of Link Category on Front Page */

.featured-image-cat a {
color: #000000 !important;
}

/* Color Of Link On The Top Of Post Pages */

.category-list a {
color: #000000 !important;
}

/* ARTIKELSEITEN */

/* Bei den Posts oben die Metainformationen über Autor und Posting-Datum verbergen */

.entry-meta .byline, .entry-meta .cat-links { display: none; }
.entry-meta .posted-on { display: none; }

/* Die Schriftgröße von Next und Previous Posting anpassen */

div.loose-next-article-title {
font-size: 1.59rem !important;
}

div.loose-previous-article-title {
font-size: 1.59rem !important;
}

/* Font für Mifactori Seitentitel auf den Blog Artikel Seiten */

.menu-logo .menu-blogname {
font-family: Helvetica;
text-transform: uppercase;
font-size: 23px;
letter-spacing: 0.1em
}

/* Das hier ändert die Farbe des Mifactori Schriftzuges auf den Artikel-Seiten */

.menu-logo .menu-blogname a {
color: #000000;
}

/* “Mifactori” saß etwas zu weit oben. Das hier setzt es etwas runter, damit es mit dem Menü auf einer Linie sitzt */

.menu-logo .menu-blogname {
padding: 1.4em 0em;
}

/* SLIDER */

/* Bevor der Slider lud kam immer so ein schwarzer Hinergrund. Der musste weg */

.loose-featured-slider .featured-image {
background-color: #ffffff !important
}

/* Slider die Bilder nicht transparent machen (um an diesen Code per Analyse ranzukommen, musste ich erst in den Developer-Tools den Wrapper auf display none stellen. Dann hat er mir die Infos zum Bild gezeigt) */

.loose-featured-slider .featured-image {
opacity: 1;
}

/* Farbe des Textes auf dem Slider */

.loose-featured-slider-title a {
color: #000000 !important;
font-size: 21px;
text-transform: none !important;
}

/* Slider – kein Text auf dem Bild & kein Link – AUSKOMMENTIERT

.loose-featured-slider-title {
display: none;
}

/* FOOTER */

/* Footer Hintergrundfarbe */

* sfwa_footer, #sfwa_footer * {

background: #f8f8f8;
}

/* Footer Link-Farbe – im Über das Plugin hinzugefügten Footer! */

Element {
}
#sfwa_footer a {
color: #026699;
}

/* LINKS */

/* Change Link Hover */

.entry-content a:hover {
color: #026699 !important;
border-bottom: 1px dotted #026699 !important;
}

/* Change Link Color im Body von Posts auch bei Smartphones */

.single .entry-content a {
color: #00b2d2;
}

/* Link Color Seiten damit auch auf Smartphones die Linkfarbe stimmt */

.site-content a {
color: #00b2d2;
}

/* Widget Link Color – war notwendig, weil ich oben die Linkänderungen vorgenommen habe */

.widget-area a {
color: #000000 !important;
border-bottom: 1px dotted #000000 !important;
}

/* Color of Link on pages so it works also on smartphones

.page a {
color: #00b2d2;
text-decoration: none;
}

/* Add Underline to Links in Content */
.entry-content a {
border-bottom: 1px dotted #00b2d2;
}

/* Adjusts the links in the footer area
.site-footer .widget-area a {
outline:none;
font-weight: normal;
color: #464849;
}

.site-footer .widget-area a:hover {
outline:none;
font-weight: normal;
color: #777777;
}

/* Versuch die Hoverfabe bei den nächsten Posts unten zu ändern */

Element {

}
.nav-links a:hover > .loose-next-article-title, .nav-links a:hover > .loose-previous-article-title, .nav-links a:hover > .loose-next-article, .nav-links a:hover > .loose-previous-article {

color: #026699;
}

/* Den Font im Footer gleich zum Menü machen */

Element {
}
#sfwa_footer p {
font-family: Helvetica;
font-size: 0.9rem;
font-weight: 100;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #000000;
}

/* FOOTER – Bilder ein- und ausblenden */

Element {
}
#sfwa_footer img {
opacity: 0.7;
}

Element {
}
#sfwa_footer img:hover{
opacity: 1;
transition: 0.3s;
}

/* Diese beiden machen im Footer das Proudly presented by wordpress weiß in Link und Text */

Element {
}
.site-info p {
color: #ffffff;
}

Element {
}
.site-info a {
color: #ffffff;
}

/* Das hier entfernt die “Diese Seite ist von….” Informationen – */
Element {
}
.site-footer .site-info {
display:none !important;
}

/* Den Abstand zwischen den Fußzeilen und der Fußzeile zum Content verringern */

.site-footer {
padding: 1em 0em;
}

/* WIDGET AREA */

/* Font in der Widgetarea */
.widget-area p {
font-size: 20.5px !important;
}

/* AKKORDEON */

/* Das Herunterklappen in der FAQ zu Lizenzen – Easy Bootstrap Shortcodes – musste umgestaltet werden. */

/* Ändert die Schrift in den Boxen und wahrscheinlich nur da! ist im Vergleich zum Rest 1px kleiner */

.panel-default>.panel-heading+.panel-collapse>.panel-body {
font-size: 20px !important;
}

/* Hintergrund hinter den Akkordeon-Überschriften */

.panel-default>.panel-heading {
background-color: #ffffff;
}

/* Schrift in den Überschriften der einzelnen Boxen. Den Hover bekomme ich nicht weg leider, weil der schon auf !important in blau sitzt. Fontgröße reduziert – Standard ist H4 auf 24.5 */

.panel-title a {
color: #000000 !important;
border-bottom: 1px dotted #fff !important;
font-size: 24px !important;
}

Version Januar 2021 (vor Fontumstellung)

Im Januar habe ich den Font umgestellt. Vorher hatte ich Roboto (genaue Beschreibung siehe unten bei Juni 2020). Im Zuge der Fontumstellung, habe ich auch die Hintergrundfarbe der Seite geändert. Früher war alles einfach plain weiß.

/* FONT */

/*font smoothing – das hier macht die Fonts auf der ganzen Seite mehr crisp. Bei Roboto ist das eher doof. Aber bei Source Serif Pro vielleicht nicht
body {
-webkit-font-smoothing: antialiased;
}

/* MENÜ – Unterm Menü gab es früher eine Linie mit Schatten. Den Schatten hab ich entfernt . */

.navbar-navigation {
box-shadow: none;
}

/*STARTSEITE – Abstand zwischen Seitenbeschreibung und top verringern. */

.home .site-content {
padding-top: 1.5rem;
}

/* SCHRIFT – BILDUNTERSCHRIFTEN */

.wp-caption .wp-caption-text {
font-family: ‘Roboto’;
font-size: 16px;
font-weight: 200;
color: #363636;
}

/* KATEGORIENSEITE 2 */

/* Die Schriftfarbe der Überschriften musste hier speziell angepasst werden */

.blog .content-area .entry-title a, .archive .content-area .entry-title a, .search .content-area .entry-title a {
color: #000000;
}

/* AKKORDEON */

/* Das Herunterklappen in der FAQ zu Lizenzen – Easy Bootstrap Shortcodes – musste umgestaltet werden. */

/* Ändert die Schrift in den Boxen und wahrscheinlich nur da! ist im Vergleich zum Rest 1px kleiner */

.panel-default>.panel-heading+.panel-collapse>.panel-body {
font-size: 20px !important;
}

/* Hintergrund hinter den Akkordeon-Überschriften */

.panel-default>.panel-heading {
background-color: #ffffff;
}

/* Schrift in den Überschriften der einzelnen Boxen. Den Hover bekomme ich nicht weg leider, weil der schon auf !important in blau sitzt. Fontgröße reduziert – Standard ist H4 auf 24.5 */

.panel-title a {
color: #000000 !important;
border-bottom: 1px dotted #fff !important;
font-size: 24px !important;
}

/* KATEGORIENSEITEN */

/* Zwischen Kategorientitel und Text etwas mehr Luft */

.loose-page-intro p {
margin-top: 1.5rem;
}

/* POSTS */

/* Bei den Posts oben die Metainformationen über Autor und Posting-Datum verbergen */

.entry-meta .byline, .entry-meta .cat-links { display: none; }
.entry-meta .posted-on { display: none; }

/* SLIDER */

/* Bevor der Slider lud kam immer so ein schwarzer Hinergrund. Der musste weg */

.loose-featured-slider .featured-image {
background-color: #ffffff !important
}

.loose-featured-slider .featured-image {
opacity: 1;
}

/* Farbe des Textes auf dem Slider */

.loose-featured-slider-title a {
color: #000000 !important;
font-size: 21px;
text-transform: none !important;

}

/* Slider – kein Text auf dem Bild & kein Link – AUSKOMMENTIERT

.loose-featured-slider-title {
display: none;
}

/* Footer Hintergrundfarbe – AUSKOMMENTIERT */

* sfwa_footer, #sfwa_footer * {

background: #f8f8f8;
}

.menu-logo img {
margin: 1.8rem 1rem;
}

/* Das hier bringt die Worte im Menü etwas nach oben, um sie mit dem Logo auf die selbe Linie zu packen 20px */

.navbar-navigation ul {
margin-top: 9px !important;
}

.navbar-navigation ul {
font-family: ‘Roboto’;
font-size: 23.5px;
font-weight: 600;
line-height: 1.6;
text-transform: none;
color: #026699 !important;
}

/* WIDGET AREA – FONT */
.widget-area p {
font-size: 20.5px !important;
}

/* STARTSEITE – FONT */

/* Die Vorschautexte mussten einen kleinen Schritt kleiner werden für mehr Ausgewogenheit */

.blog .content-area p {
font-size: 20.5px !important;
}

/* ARTIKELSEITEN */

/* Die Schriftgröße von Next und Previous Posting anpassen */

div.loose-next-article-title {
font-size: 1.59rem !important;
}

div.loose-previous-article-title {
font-size: 1.59rem !important;
}

/* HAUPTSEITE */

/* Auf der Startseite gab es rechts oben eine Lupe. Die muss weg */

.search-toggle {
display: none;
}

/ * ÜBERSCHRIFTEN */

/* Die kleineste Überschrift ließ sich unter “Customize” nicht auf 200 stellen. Darum hier. */

element.style {
}
.single article h6, .page article h6 {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 80%;
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.4em;
}

/* */
h4 {
font-size: 24.5px !important;
}

/* Auf der Startseite die Überschriften in den Kästen */

.blog .content-area .entry-title, .archive .content-area .entry-title, .search .content-area .entry-title {
font-size: 1.65rem !important;
}

/* HEADER */

/* HEADLINE VERSION 2 – Ändert den Font im Seitentitel (text transform war uppercase) (font-weight: 400;) (Playfair Display Bold) (Faster One) /

.site-title {
text-transform: none;
font-family: Helvetica;
font-weight: 200;
line-height: 1.25;
font-size: 3.5rem;
}

/* Code um Tagline “Design Studio …” anzuzeigen. Dafür musste ich auch unterm Logo noch Platz machen. Das macht der obere Code – AUSKOMMENTIERT

.site-title {
margin-bottom: 1.6rem;
}

/* Auf den Artikelseiten hätte ich gerne, dass das Logo nicht zu sehen ist, dafür aber der alte Font, das ober macht das Logo weg – das da klappt, aber bringt nicht den Text zurück.

.menu-logo img {
display: none;
}

/* Font für den Seitentitel – Startseite – APPLE SYSTEM FONT –> AUSKOMMENTIERT seit ich ein Logo hab

/* Font für den Seitentitel – Startseite – Roboto */

h1 a, .site-title a {
text-transform: none;
font-family: Roboto;
font-weight: 400;
letter-spacing: 0em;
font-size: 58px;
color: #000000;
}

/* Font für Mifactori Seitentitel auf den Blog Artikel Seiten */

.menu-logo .menu-blogname {
font-family: Roboto;
}

/* Das hier ändern die Farbe des Mifactori Schriftzuges auf den Artikel-Seiten */

.menu-logo .menu-blogname a {
color: #333;
}

/* STARTSEITE */

/* Für weniger Luft zwischen Menü und Strich Padding beim Ausklappmenü ändern */

.menu-toggle, .search-toggle {
padding: 0.1rem 0.1rem 0.1rem;
}

/* Farbe der Kategorien auf der Startseite unter den Bildern */

Element {
}
.featured-image-cat a {
color: #000000;
}

/* Die Umrandungen der Boxen auf der Startseite – AUSKOMMENTIERT */
.blog article {
padding: 1.25rem;
box-shadow: 0 0.5px 0.5px #ccc;
border: 1px dotted #ccc;
}

/* Die Umrandungen der Boxen auf den Kategorienseiten – AUSKOMMENTIERT */
.archive article {
padding: 1.25rem;
box-shadow: 0 0px 0px #dddbdb;
border: 1px solid #ccc;
}

/* Regelt die Abstände zwischen Seitentitel und oben und unten */

.site-branding {
position: relative;
padding: 1.7rem 0;
text-align: center;
}

.site-branding {
padding-bottom: 0.8rem;
}

/* Abastand zwischen Seitennamen und Slogan vergrößern */

.site-title a {
line-height: 85px;
}

/* Auf der Startseite – es ist zuviel Luft gewesen ober- und unterhalb von Latest Posts */

.loose-page-intro {
margin-bottom: 2.5rem;
padding: 1rem 0.5rem;
}

/* Auf der Startseite war zuviel Luft beim Logo im Scrollmenü */

.menu-logo .menu-blogname {
padding: 1.5em 0em;
}

/* MENÜ */

/* Menüleiste Padding */

.navbar-navigation ul a {
padding: 1em;
}

/* Ändert im Menü die Farbe der Hervorhebung auf den Seiten die aktiv sind */

/* Auf den Kategorienseiten hätte ich gerne nicht den Einführungssatz zu Mifactori stehen der auf der Hauptseite per Widget eingblendet wird */

.archive .widget-area {
display: none;
}

/* Ändert im Menü den Hover */

Element {

}
.navbar-navigation a:hover, .navbar-navigation a:focus {

color: #026699;
}

/* Ändert im Menü die Font-Farbe */

Element {

}
.navbar-navigation a {

color: #026699;

}

/* LINKS */

/* Change Link Hover */

.entry-content a:hover {
color: #026699 !important;
border-bottom: 1px dotted #026699 !important;
}

/* Change Link Color im Body von Posts auch bei Smartphones */

.single .entry-content a {
color: #00b2d2;
}

/* Link Color Seiten damit auch auf Smartphones die Linkfarbe stimmt */

.site-content a {
color: #00b2d2;
}

/* Widget Link Color – war notwendig, weil ich oben die Linkänderungen vorgenommen habe */

.widget-area a {
color: #000000 !important;
border-bottom: 1px dotted #000000 !important;
}

/* Color of Link on pages so it works also on smartphones

.page a {
color: #00b2d2;
text-decoration: none;
}

/* Add Underline to Links in Content */
.entry-content a {
border-bottom: 1px dotted #00b2d2;
}

/* Adjusts the links in the footer area
.site-footer .widget-area a {
outline:none;
font-weight: normal;
color: #464849;
}

.site-footer .widget-area a:hover {
outline:none;
font-weight: normal;
color: #777777;
}

/* Versuch die Hoverfabe bei den nächsten Posts unten zu ändern */

Element {

}
.nav-links a:hover > .loose-next-article-title, .nav-links a:hover > .loose-previous-article-title, .nav-links a:hover > .loose-next-article, .nav-links a:hover > .loose-previous-article {

color: #026699;

}

/* KATEGORIENSEITEN */

/* Font auf den Kategorienseiten */

.loose-page-intro p {
margin-top: 1rem;
font-size: 20px;
margin-bottom: 0;
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
letter-spacing: 0.1em;
text-transform: none;
}

/* Auf den Kategorienseiten die Links unterstreichen */

Element {
}
.loose-page-intro a {
border-bottom: 1px dotted #000000 !important;
}

Element {
}
.loose-page-intro a:hover {
color: #a91e23;
}

/* Link Color Category Page */

.loose-page-intro a {
color: #000000 !important;
}

/* Color of Link Category on Front Page */

.featured-image-cat a {
color: #000000 !important;
}

/* Color Of Link On The Top Of Post Pages */

.category-list a {
color: #000000 !important;
}

/* Footer Link-Farbe – im Über das Plugin hinzugefügten Footer! */

Element {
}
#sfwa_footer a {
color: #026699;
}

/* FONT */

/* Font im Suchfeld auf der 404 Seite */

body, button, input, select, textarea {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
}

/* Font im Suchfeld oben rechts Widget Area */

.widget.widget_search .search-form .search-field {

font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
}

/* Den Font im Footer gleich zum Menü machen */

Element {
}
#sfwa_footer p {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #000000;
}

/* Font auf den Buttons */

.btn-default {
font-family: ‘Roboto’;
font-size: 1.3rem;
font-style: normal;
font-weight: 300;
line-height: 1.6;
}

/* Die Farbe der Schrift der Blogbeiträge in den Boxen auf der Startseite */
.blog .content-area .entry-title a {
color: #000000;
}

/* Schriftart in den nummerierten Aufzählungen */

element.style {
}
ol {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 21px;
}

/* Das hier importiert die Fonts Major “Mono Display Font” und “Noto Sans KR” von Google in die Seite so dass Du ihn nutzen kannst. */

@import url(‘https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap’);

/* Font auf Cookie Consent */

.cookie-bar-block #catapult-cookie-bar span {
font-family: ‘Roboto’;
font-size: 20px;
color: #000000;

}

/* Font im Suchfeld */

Element {
}
.widget.widget_search .search-form .search-field {
font-family: ‘Roboto Slab’;
font-size: 1rem;
color: #000000;
}

/* Font unten bei “nächstes Post” ändern. */

Element {
}
div.loose-next-article {
font-family: ‘Helvetica’;
line-height: 2.3;
font-size: 0.8rem;
color: #000000;
}

Element {
}
div.loose-previous-article {
font-family: ‘Helvetica’;
line-height: 2.3;
font-size: 0.8rem;
color: #000000;
}

Element {
}
div.loose-next-article-title {
font-family: ‘Helvetica’;
font-size: 1.5rem;
color: #000000;
}

Element {
}
div.loose-previous-article-title {
font-family: ‘Helvetica’;
font-size: 1.5rem;
color: #000000;
}

/* Font in den Aufzählungen ändern. */

Element {
}
ul {
font-family: ‘Roboto’;
font-size: 21px;
font-style: normal;
font-weight: 300;
line-height: 1.7;
color: #000000;
}

/* FOOTER */

/* FOOTER – Bilder ein- und ausblenden */

Element {
}
#sfwa_footer img {
opacity: 0.7;
}

Element {
}
#sfwa_footer img:hover{
opacity: 1;
transition: 0.3s;
}

/* Diese beiden machen im Footer das Proudly presented by wordpress weiß in Link und Text */

Element {
}
.site-info p {
color: #ffffff;
}

Element {
}
.site-info a {
color: #ffffff;
}

/* Das hier entfernt die “Diese Seite ist von….” Informationen – */
Element {
}
.site-footer .site-info {
display:none !important;
}

/* Den Abstand zwischen den Fußzeilen und der Fußzeile zum Content verringern */

.site-footer {
padding: 1em 0em;
}

Version August 2020

Nochmal Anpassungen. Jetzt sehr unübersichtlich. Muss mal aufgeräumt werden. Bei der Juni-Version gibt es Hinweise zu Fonteinsetllungen, die sich nicht geändert haben.

–

/* KATEGORIENSEITE 2 */

/* Die Schriftfarbe der Überschriften musste hier speziell angepasst werden */

.blog .content-area .entry-title a, .archive .content-area .entry-title a, .search .content-area .entry-title a {
color: #000222;
}

/* AKKORDEON */

/* Das Herunterklappen in der FAQ zu Lizenzen – Easy Bootstrap Shortcodes – musste umgestaltet werden. */

/* Ändert die Schrift in den Boxen und wahrscheinlich nur da! ist im Vergleich zum Rest 1px kleiner */

.panel-default>.panel-heading+.panel-collapse>.panel-body {
font-size: 20px !important;
}

/* Hintergrund hinter den Akkordeon-Überschriften */

.panel-default>.panel-heading {
background-color: #ffffff;
}

/* Schrift in den Überschriften der einzelnen Boxen. Den Hover bekomme ich nicht weg leider, weil der schon auf !important in blau sitzt. Fontgröße reduziert – Standard ist H4 auf 24.5 */

.panel-title a {
color: #000222 !important;
border-bottom: 1px dotted #fff !important;
font-size: 24px !important;
}

/* KATEGORIENSEITEN */

/* Zwischen Kategorientitel und Text etwas mehr Luft */

.loose-page-intro p {
margin-top: 1.5rem;
}

/* POSTS */

/* Bei den Posts oben die Metainformationen über Autor und Posting-Datum verbergen */

.entry-meta .byline, .entry-meta .cat-links { display: none; }
.entry-meta .posted-on { display: none; }

/* SLIDER */

/* Bevor der Slider lud kam immer so ein schwarzer Hinergrund. Der musste weg */

.loose-featured-slider .featured-image {
background-color: #ffffff !important
}

.loose-featured-slider .featured-image {
opacity: 1;
}

/* Farbe des Textes auf dem Slider */

.loose-featured-slider-title a {
color: #000222 !important;
font-size: 21px;
text-transform: none !important;

}

/* Slider – kein Text auf dem Bild & kein Link – AUSKOMMENTIERT

.loose-featured-slider-title {
display: none;
}

/* Footer Hintergrundfarbe – AUSKOMMENTIERT */

* sfwa_footer, #sfwa_footer * {

background: #f8f8f8;
}

.menu-logo img {
margin: 1.8rem 1rem;
}

/* Das hier bringt die Worte im Menü etwas nach oben, um sie mit dem Logo auf die selbe Linie zu packen 20px */

.navbar-navigation ul {
margin-top: 15px !important;
}

.navbar-navigation ul {
font-family: ‘Roboto’;
letter-spacing: 0.1em;
font-size: 21px;
font-weight: 600;
line-height: 1.6;
text-transform: none;
color: #026699 !important;
}

/* WIDGET AREA – FONT */
.widget-area p {
font-size: 20.5px !important;
}

/* STARTSEITE – FONT */

/* Die Vorschautexte mussten einen kleinen Schritt kleiner werden für mehr Ausgewogenheit */

.blog .content-area p {
font-size: 20.5px !important;
}

/* ARTIKELSEITEN */

/* Die Schriftgröße von Next und Previous Posting anpassen */

div.loose-next-article-title {
font-size: 1.59rem !important;
}

div.loose-previous-article-title {
font-size: 1.59rem !important;
}

/* HAUPTSEITE */

/* Auf der Startseite gab es rechts oben eine Lupe. Die muss weg */

.search-toggle {
display: none;
}

/ * ÜBERSCHRIFTEN */

/* Die kleineste Überschrift ließ sich unter “Customize” nicht auf 200 stellen. Darum hier. */

/* */
h4 {
font-size: 24.5px !important;
}

/* Auf der Startseite die Überschriften in den Kästen */

.blog .content-area .entry-title, .archive .content-area .entry-title, .search .content-area .entry-title {
font-size: 1.65rem !important;
}

/* HEADER */

/* HEADLINE VERSION 2 – Ändert den Font im Seitentitel (text transform war uppercase) (font-weight: 400;) (Playfair Display Bold) (Faster One) /

.site-title {
text-transform: none;
font-family: Helvetica;
font-weight: 200;
line-height: 1.25;
font-size: 3.5rem;
}

/* Code um Tagline “Design Studio …” anzuzeigen. Dafür musste ich auch unterm Logo noch Platz machen. Das macht der obere Code – AUSKOMMENTIERT

.site-title {
margin-bottom: 1.6rem;
}

/* Auf den Artikelseiten hätte ich gerne, dass das Logo nicht zu sehen ist, dafür aber der alte Font, das ober macht das Logo weg – das da klappt, aber bringt nicht den Text zurück.

.menu-logo img {
display: none;
}

/* Font für den Seitentitel – Startseite – APPLE SYSTEM FONT –> auskommentiert seit ich ein Logo hab */

/* Font für den Seitentitel – Startseite – Roboto AUSKOMMENTIERT

h1 a, .site-title a {
text-transform: none;
font-family: ‘Roboto’, monospace;
font-weight: 400;
letter-spacing: 0em;
font-size: 58px;
color: #233;
}

/* Font für Mifactori Seitentitel auf den Blog Artikel Seiten */

.menu-logo .menu-blogname {
font-family: ‘Roboto’, monospace;
}

/* Das hier ändern die Farbe des Mifactori Schriftzuges auf den Artikel-Seiten */

.menu-logo .menu-blogname a {
color: #333;
}

/* STARTSEITE */

/* Für weniger Luft zwischen Menü und Strich Padding beim Ausklappmenü ändern */

.menu-toggle, .search-toggle {
padding: 0.1rem 0.1rem 0.1rem;
}

/* Farbe der Kategorien auf der Startseite unter den Bildern */

Element {
}
.featured-image-cat a {
color: #000000;
}

/* Die Umrandungen der Boxen auf der Startseite – AUSKOMMENTIERT */
.blog article {
padding: 1.25rem;
box-shadow: 0 0.5px 0.5px #ccc;
border: 1px dotted #ccc;
}

/* Die Umrandungen der Boxen auf den Kategorienseiten – AUSKOMMENTIERT */
.archive article {
padding: 1.25rem;
box-shadow: 0 0px 0px #dddbdb;
border: 1px solid #ccc;
}

/* Regelt die Abstände zwischen Seitentitel und oben und unten */

.site-branding {
position: relative;
padding: 1.7rem 0;
text-align: center;
}

.site-branding {
padding-bottom: 0.8rem;
}

/* Abastand zwischen Seitennamen und Slogan vergrößern */

.site-title a {
line-height: 85px;
}

/* Auf der Startseite – es ist zuviel Luft gewesen ober- und unterhalb von Latest Posts */

.loose-page-intro {
margin-bottom: 2.5rem;
padding: 1rem 0.5rem;
}

/* Auf der Startseite war zuviel Luft beim Logo im Scrollmenü */

.menu-logo .menu-blogname {
padding: 1.5em 0em;
}

/* MENÜ */

/* Menüleiste Padding */

.navbar-navigation ul a {
padding: 1em;
}

/* Ändert im Menü die Farbe der Hervorhebung auf den Seiten die aktiv sind */

/* Auf den Kategorienseiten hätte ich gerne nicht den Einführungssatz zu Mifactori stehen der auf der Hauptseite per Widget eingblendet wird */

.archive .widget-area {
display: none;
}

/* Ändert im Menü den Hover */

Element {

}
.navbar-navigation a:hover, .navbar-navigation a:focus {

color: #026699;
}

/* Ändert im Menü die Font-Farbe */

Element {

}
.navbar-navigation a {

color: #026699;

}

/* LINKS */

/* Change Link Hover */

.entry-content a:hover {
color: #026699 !important;
border-bottom: 1px dotted #026699 !important;
}

/* Change Link Color im Body von Posts auch bei Smartphones */

.single .entry-content a {
color: #00b2d2;
}

/* Link Color Seiten damit auch auf Smartphones die Linkfarbe stimmt */

.site-content a {
color: #00b2d2;
}

/* Widget Link Color – war notwendig, weil ich oben die Linkänderungen vorgenommen habe */

.widget-area a {
color: #000222 !important;
border-bottom: 1px dotted #000222 !important;
}

/* Color of Link on pages so it works also on smartphones

.page a {
color: #00b2d2;
text-decoration: none;
}

/* Add Underline to Links in Content */
.entry-content a {
border-bottom: 1px dotted #00b2d2;
}

/* Adjusts the links in the footer area
.site-footer .widget-area a {
outline:none;
font-weight: normal;
color: #464849;
}

.site-footer .widget-area a:hover {
outline:none;
font-weight: normal;
color: #777777;
}

/* Versuch die Hoverfabe bei den nächsten Posts unten zu ändern */

Element {

}
.nav-links a:hover > .loose-next-article-title, .nav-links a:hover > .loose-previous-article-title, .nav-links a:hover > .loose-next-article, .nav-links a:hover > .loose-previous-article {

color: #026699;

}

/* KATEGORIENSEITEN */

/* Font auf den Kategorienseiten */

/* Auf den Kategorienseiten die Links unterstreichen */

Element {
}
.loose-page-intro a {
border-bottom: 1px dotted #000222 !important;
}

Element {
}
.loose-page-intro a:hover {
color: #a91e23;
}

/* Link Color Category Page */

.loose-page-intro a {
color: #000222 !important;
}

/* Color of Link Category on Front Page */

.featured-image-cat a {
color: #000222 !important;
}

/* Color Of Link On The Top Of Post Pages */

.category-list a {
color: #000222 !important;
}

/* Footer Link-Farbe – im Über das Plugin hinzugefügten Footer! */

Element {
}
#sfwa_footer a {
color: #026699;
}

/* FONT */

/* Font im Suchfeld auf der 404 Seite */

body, button, input, select, textarea {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
}

/* Font im Suchfeld oben rechts Widget Area */

.widget.widget_search .search-form .search-field {

font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
}

/* Den Font im Footer gleich zum Menü machen */

Element {
}
#sfwa_footer p {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #000222;
}

/* Font auf den Buttons */

.btn-default {
font-family: ‘Roboto’;
font-size: 1.3rem;
font-style: normal;
font-weight: 300;
line-height: 1.6;
}

/* Die Farbe der Schrift der Blogbeiträge in den Boxen auf der Startseite */
.blog .content-area .entry-title a {
color: #000222;
}

/* Schriftart in den nummerierten Aufzählungen */

element.style {
}
ol {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 21px;
}

/* Das hier importiert die Fonts Major “Mono Display Font” und “Noto Sans KR” von Google in die Seite so dass Du ihn nutzen kannst. */

@import url(‘https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap’);

/* Font auf Cookie Consent */

.cookie-bar-block #catapult-cookie-bar span {
font-family: ‘Roboto’;
}

/* Font im Suchfeld */

Element {
}
.widget.widget_search .search-form .search-field {
font-family: ‘Roboto Slab’;
font-size: 1rem;
color: #000222;
}

/* Font unten bei “nächstes Post” ändern. */

Element {
}
div.loose-next-article {
font-family: ‘Helvetica’;
line-height: 2.3;
font-size: 0.8rem;
color: #000222;
}

Element {
}
div.loose-previous-article {
font-family: ‘Helvetica’;
line-height: 2.3;
font-size: 0.8rem;
color: #000222;
}

Element {
}
div.loose-next-article-title {
font-family: ‘Helvetica’;
font-size: 1.5rem;
color: #000222;
}

Element {
}
div.loose-previous-article-title {
font-family: ‘Helvetica’;
font-size: 1.5rem;
color: #000222;
}

/* Font in den Aufzählungen ändern. */

Element {
}
ul {
font-family: ‘Roboto’;
font-size: 21px;
font-style: normal;
font-weight: 300;
line-height: 1.7;
color: #000222;
}

/* FOOTER */

/* FOOTER – Bilder ein- und ausblenden */

Element {
}
#sfwa_footer img {
opacity: 0.7;
}

Element {
}
#sfwa_footer img:hover{
opacity: 1;
transition: 0.3s;
}

/* Diese beiden machen im Footer das Proudly presented by wordpress weiß in Link und Text */

Element {
}
.site-info p {
color: #ffffff;
}

Element {
}
.site-info a {
color: #ffffff;
}

/* Das hier entfernt die “Diese Seite ist von….” Informationen – */
Element {
}
.site-footer .site-info {
display:none !important;
}

/* Den Abstand zwischen den Fußzeilen und der Fußzeile zum Content verringern */

.site-footer {
padding: 1em 0em;
}

–

Version Juni 2020

Hinweis:

In den Einstellungen haben wir eine Änderung hier vorgenommen, damit die Boxen auf der Startseite größer werden, generell das Boxing größer wird.

Neues Typeface

Paragraph – Roboto. 200. #1c1c1c, 21x (war 20)

H1 – Helvetica, 400, #1c1c1c, 52x (war 50)

H2 – Helevetica, 400, #1c1c1c 42x (war 40)

H3 – Helevetica, 400, #1c1c1c 33x (war 31)

H4 – Helevetica, 400, #1c1c1c 24x (aber per Custom CSS auf 24.5 hochgezogen ↓)

H5 – Helevetica, 400, #1c1c1c 19x (war 18)

H6 – Helevetica, 400, #1c1c1c Theme Default (= Caps) (ist unten geregelt ↓)

–

Version Mai 2020 (Roboto Typeface)

(Typeface siehe unten)

Custom CSS

/ * ÜBERSCHRIFTEN */

/* Die kleineste Überschrift ließ sich unter “Customize” nicht auf 200 stellen. Darum hier. */

/* HEADER */

/* HEADLINE VERSION 2 – Ändert den Font im Seitentitel (text transform war uppercase) (font-weight: 400;) (Playfair Display Bold) (Faster One) /

.site-title {
text-transform: none;
font-family: Helvetica;
font-weight: 200;
line-height: 1.25;
font-size: 3.5rem;
}

/* Code um Tagline “Design Studio …” anzuzeigen. Dafür musste ich auch unterm Logo noch Platz machen. Das macht der obere Code */

.site-title {
margin-bottom: 1.5rem;
}

.site-branding::after {
content: “Open Design Vs. Climage Change | a design studio”;
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
letter-spacing: 0.1em;
font-weight: 200;
font-size: 20px;
color: #1c1c1c;
}

/* Auf den Artikelseiten hätte ich gerne, dass das Logo nicht zu sehen ist, dafür aber der alte Font, das ober macht das Logo weg – das da klappt, aber bringt nicht den Text zurück.

.menu-logo img {
display: none;
}

/* Font für den Seitentitel – Startseite – APPLE SYSTEM FONT –> auskommentiert seit ich ein Logo hab */

/* Font für den Seitentitel – Startseite – Roboto AUSKOMMENTIERT

h1 a, .site-title a {
text-transform: none;
font-family: ‘Roboto’, monospace;
font-weight: 400;
letter-spacing: 0em;
font-size: 58px;
color: #233;
}

/* Font für Mifactori Seitentitel auf den Blog Artikel Seiten */

.menu-logo .menu-blogname {
font-family: ‘Roboto’, monospace;
}

/* Das hier ändern die Farbe des Mifactori Schriftzuges auf den Artikel-Seiten */

.menu-logo .menu-blogname a {
color: #333;
}

/* STARTSEITE */

/* Für weniger Luft zwischen Menü und Strich Padding beim Ausklappmenü ändern */

.menu-toggle, .search-toggle {
padding: 0.1rem 0.1rem 0.1rem;
}

/* Farbe der Kategorien auf der Startseite unter den Bildern */

Element {
}
.featured-image-cat a {
color: #000000;
}

/* Die Umrandungen der Boxen auf der Startseite */
.blog article {
padding: 1.25rem;
box-shadow: 0 0.5px 0.5px #ccc;
border: 1px dotted #ccc;
}

/* Die Umrandungen der Boxen auf den Kategorienseiten */
.archive article {
padding: 1.25rem;
box-shadow: 0 0px 0px #dddbdb;
border: 1px solid #ccc;
}

/* Verringert die Luft zwischen Seitentitel und oben und unten */

.site-branding {
position: relative;
padding: 1.9rem 0;
text-align: center;
}

.site-branding {
padding-bottom: 0rem;
}

/* Abastand zwischen Seitennamen und Slogan vergrößern */

.site-title a {
line-height: 85px;
}

/* Auf der Startseite – es ist zuviel Luft gewesen ober- und unterhalb von Latest Posts */

.loose-page-intro {
margin-bottom: 2.5rem;
padding: 1rem 0.5rem;
}

/* Auf der Startseite war zuviel Luft beim Logo im Scrollmenü */

.menu-logo .menu-blogname {
padding: 1.5em 0em;
}

/* MENÜ */

/* Menüleiste Padding */

.navbar-navigation ul a {
padding: 1em;
}

/* Ändert im Menü die Farbe der Hervorhebung auf den Seiten die aktiv sind */

/* Auf den Kategorienseiten hätte ich gerne nicht den Einführungssatz zu Mifactori stehen der auf der Hauptseite per Widget eingblendet wird */

.archive .widget-area {
display: none;
}

/* Ändert im Menü den Hover */

Element {

}
.navbar-navigation a:hover, .navbar-navigation a:focus {

color: #026699;
}

/* Ändert im Menü die Font-Farbe */

Element {

}
.navbar-navigation a {

color: #026699;

}

/* Auf den Post-Seiten hatte ich gerne oben beim Menü noch etwas Platz über den Menü-Items */

.navbar-navigation ul {
margin-top: 20px;
}

.navbar-navigation ul {
font-family: ‘Roboto’;
font-size: 0.8rem;
font-size: 16.5px;
font-weight: 600;
line-height: 1.6;
color: #026699 !important;
}

/* LINKS */

/* Change Link Hover */

.entry-content a:hover {
color: #026699 !important;
border-bottom: 1px dotted #026699 !important;
}

/* Change Link Color im Body von Posts auch bei Smartphones */

.single .entry-content a {
color: #00b2d2;
}

/* Link Color Seiten damit auch auf Smartphones die Linkfarbe stimmt */

.site-content a {
color: #00b2d2;
}

/* Widget Link Color – war notwendig, weil ich oben die Linkänderungen vorgenommen habe */

.widget-area a {
color: #000 !important;
border-bottom: 1px dotted #000 !important;
}

/* Color of Link on pages so it works also on smartphones

.page a {
color: #00b2d2;
text-decoration: none;
}

/* Add Underline to Links in Content */
.entry-content a {
border-bottom: 1px dotted #00b2d2;
}

/* Adjusts the links in the footer area
.site-footer .widget-area a {
outline:none;
font-weight: normal;
color: #464849;
}

.site-footer .widget-area a:hover {
outline:none;
font-weight: normal;
color: #777777;
}

/* Versuch die Hoverfabe bei den nächsten Posts unten zu ändern */

Element {

}
.nav-links a:hover > .loose-next-article-title, .nav-links a:hover > .loose-previous-article-title, .nav-links a:hover > .loose-next-article, .nav-links a:hover > .loose-previous-article {

color: #026699;

}

/* KATEGORIENSEITEN */

/* Font auf den Kategorienseiten */

/* Auf den Kategorienseiten die Links unterstreichen */

Element {
}
.loose-page-intro a {
border-bottom: 1px dotted #000 !important;
}

Element {
}
.loose-page-intro a:hover {
color: #a91e23;
}

/* Link Color Category Page */

.loose-page-intro a {
color: #000000 !important;
}

/* Color of Link Category on Front Page */

.featured-image-cat a {
color: #000000 !important;
}

/* Color Of Link On The Top Of Post Pages */

.category-list a {
color: #000000 !important;
}

/* Footer Link-Farbe – im Über das Plugin hinzugefügten Footer! */

Element {
}
#sfwa_footer a {
color: #026699;
}

/* FONT */

/* Font im Suchfeld auf der 404 Seite */

body, button, input, select, textarea {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
}

/* Font im Suchfeld oben rechts Widget Area */

.widget.widget_search .search-form .search-field {

font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
}

/* Den Font im Footer gleich zum Menü machen */

Element {
}
#sfwa_footer p {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #1c1c1c;
}

/* Font auf den Buttons */

.btn-default {
font-family: ‘Roboto’;
font-size: 1.3rem;
font-style: normal;
font-weight: 300;
line-height: 1.6;
}

/* Die Farbe der Schrift der Blogbeiträge in den Boxen auf der Startseite */
.blog .content-area .entry-title a {
color: #333;
}

/* Schriftart in den nummerierten Aufzählungen */

element.style {
}
ol {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 20px;
}

/* Das hier importiert die Fonts Major “Mono Display Font” und “Noto Sans KR” von Google in die Seite so dass Du ihn nutzen kannst. */

@import url(‘https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap’);

/* Font auf Cookie Consent */

.cookie-bar-block #catapult-cookie-bar span {
font-family: ‘Roboto’;
}

/* Font im Suchfeld */

Element {
}
.widget.widget_search .search-form .search-field {
font-family: ‘Roboto Slab’;
font-size: 1rem;
color: #1c1c1c;
}

/* Font unten bei “nächstes Post” ändern. */

Element {
}
div.loose-next-article {
font-family: ‘Helvetica’;
line-height: 2.3;
font-size: 0.8rem;
color: #1c1c1c;
}

Element {
}
div.loose-previous-article {
font-family: ‘Helvetica’;
line-height: 2.3;
font-size: 0.8rem;
color: #1c1c1c;
}

Element {
}
div.loose-next-article-title {
font-family: ‘Helvetica’;
font-size: 1.5rem;
color: #333;
}

Element {
}
div.loose-previous-article-title {
font-family: ‘Helvetica’;
font-size: 1.5rem;
color: #333;
}

/* Font in den Aufzählungen ändern. */

Element {
}
ul {
font-family: ‘Roboto’;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 1.7;
color: #1c1c1c;
}

/* FOOTER */

/* FOOTER – Bilder ein- und ausblenden */

Element {
}
#sfwa_footer img {
opacity: 0.5;
}

Element {
}
#sfwa_footer img:hover{
opacity: 1;
transition: 0.5s;
}

/* Diese beiden machen im Footer das Proudly presented by wordpress weiß in Link und Text */

Element {
}
.site-info p {
color: #ffffff;
}

Element {
}
.site-info a {
color: #ffffff;
}

/* Das hier entfernt die “Diese Seite ist von….” Informationen – */
Element {
}
.site-footer .site-info {
display:none !important;
}

/* Den Abstand zwischen den Fußzeilen und der Fußzeile zum Content verringern */

.site-footer {
padding: 1em 0em;
}

–

Version Januar 2020 (Roboto Typeface)

HEADINGS

Paragraph – Roboto. 200. #1c1c1c, 20x

H1 – Helvetica, 400, #1c1c1c, 50x

H2 – Helevetica, 400, #1c1c1c 40x

H3 – Helevetica, 400, #1c1c1c 31x

H4 – Helevetica, 400, #1c1c1c 24x

H5 – Helevetica, 400, #1c1c1c 18x

H6 – Helevetica, 400, #1c1c1c Theme Default (= Caps)

CUSTOM CSS

/* HEADER */

/* HEADLINE VERSION 2 – Ändert den Font im Seitentitel (text transform war uppercase) (font-weight: 400;) (Playfair Display Bold) (Faster One) /

.site-title {
text-transform: none;
font-family: Helvetica;
font-weight: 200;
line-height: 1.25;
font-size: 3.5rem;
}

/* Font für den Seitentitel – Startseite */

h1 a, .site-title a {
text-transform: none;
font-family: ‘Roboto’, monospace;
font-weight: 400;
letter-spacing: 0em;
font-size: 58px;
color: #333;
}

/* Font für Mifactori Seitentitel auf den Blog Artikel Seiten */

.menu-logo .menu-blogname {
font-family: ‘Roboto’, monospace;
}

/* Das hier ändern die Farbe des Mifactori Schriftzuges auf den Artikel-Seiten */

.menu-logo .menu-blogname a {
color: #333;
}

/* STARTSEITE */

/* Für weniger Luft zwischen Menü und Strich Padding beim Ausklappmenü ändern */

.menu-toggle, .search-toggle {
padding: 0.1rem 0.1rem 0.1rem;
}

/* Farbe der Kategorien auf der Startseite unter den Bildern */

Element {
}
.featured-image-cat a {
color: #000000;
}

/* Die Umrandungen der Boxen auf der Startseite */
.blog article {
padding: 1.25rem;
box-shadow: 0 0.5px 0.5px #ccc;
border: 1px dotted #ccc;
}

/* Die Umrandungen der Boxen auf den Kategorienseiten */
.archive article {
padding: 1.25rem;
box-shadow: 0 0px 0px #dddbdb;
border: 1px solid #ccc;
}

/* Verringert die Luft zwischen Seitentitel und oben und unten */

.site-branding {
position: relative;
padding: 1.9rem 0;
text-align: center;
}

.site-branding {
padding-bottom: 0rem;
}

/* Abstand zwischen Seitennamen und Slogan vergrößern */

.site-title a {
line-height: 65px;
}

/* Auf der Startseite – es ist zu viel Luft gewesen ober- und unterhalb von Latest Posts */

.loose-page-intro {
margin-bottom: 2.5rem;
padding: 1rem 0.5rem;
}

/* Auf der Startseite war zuviel Luft beim Logo im Scrollmenü */

.menu-logo .menu-blogname {
padding: 1.5em 0em;
}

/* MENÜ */

/* Menüleiste Padding */

.navbar-navigation ul a {
padding: 1em;
}

/* Ändert im Menü die Farbe der Hervorhebung auf den Seiten die aktiv sind */

/* Auf den Kategorienseiten hätte ich gerne nicht den Einführungssatz zu Mifactori stehen der auf der Hauptseite per Widget eingblendet wird */

.archive .widget-area {
display: none;
}

/* Ändert im Menü den Hover */

Element {

}
.navbar-navigation a:hover, .navbar-navigation a:focus {

color: #026699;
}

/* Ändert im Menü die Font-Farbe */

Element {

}
.navbar-navigation a {

color: #026699;

}

/* Auf den Post-Seiten hatte ich gerne oben beim Menü noch etwas Platz über den Menü-Items */

.navbar-navigation ul {
margin-top: 20px;
}

.navbar-navigation ul {
font-family: ‘Roboto’;
font-size: 0.8rem;
font-size: 16px;
font-weight: 600;
line-height: 1.6;
color: #026699 !important;
}

/* LINKS */

/* Change Link Hover */

.entry-content a:hover {
color: #026699 !important;
border-bottom: 1px dotted #026699 !important;
}

/* Change Link Color im Body von Posts auch bei Smartphones */

.single .entry-content a {
color: #00b2d2;
}

/* Link Color Seiten damit auch auf Smartphones die Linkfarbe stimmt */

.site-content a {
color: #00b2d2;
}

/* Widget Link Color – war notwendig, weil ich oben die Linkänderungen vorgenommen habe */

.widget-area a {
color: #000 !important;
border-bottom: 1px dotted #000 !important;
}

/* Color of Link on pages so it works also on smartphones

.page a {
color: #00b2d2;
text-decoration: none;
}

/* Add Underline to Links in Content */
.entry-content a {
border-bottom: 1px dotted #00b2d2;
}

/* Adjusts the links in the footer area
.site-footer .widget-area a {
outline:none;
font-weight: normal;
color: #464849;
}

.site-footer .widget-area a:hover {
outline:none;
font-weight: normal;
color: #777777;
}

/* Versuch die Hoverfabe bei den nächsten Posts unten zu ändern */

Element {

}
.nav-links a:hover > .loose-next-article-title, .nav-links a:hover > .loose-previous-article-title, .nav-links a:hover > .loose-next-article, .nav-links a:hover > .loose-previous-article {

color: #026699;

}

/* Auf den Kategorienseiten die Links unterstreichen */

Element {
}
.loose-page-intro a {
text-decoration: underline;
}

Element {
}
.loose-page-intro a:hover {
color: #a91e23;
}

/* Link Color Category Page */

.loose-page-intro a {
color: #000000 !important;
}

/* Color of Link Category on Front Page */

.featured-image-cat a {
color: #000000 !important;
}

/* Color Of Link On The Top Of Post Pages */

.category-list a {
color: #000000 !important;
}

/* Footer Link-Farbe – im Über das Plugin hinzugefügten Footer! */

Element {
}
#sfwa_footer a {
color: #026699;
}

/* FONT */

/* Font im Suchfeld auf der 404 Seite */

body, button, input, select, textarea {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
}

/* Font im Suchfeld oben rechts Widget Area */

.widget.widget_search .search-form .search-field {

font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
}

/* Den Font im Footer gleich zum Menü machen */

Element {
}
#sfwa_footer p {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #1c1c1c;
}

/* Font auf den Buttons */

.btn-default {
font-family: ‘Roboto’;
font-size: 1.3rem;
font-style: normal;
font-weight: 300;
line-height: 1.6;
}

/* Die Farbe der Schrift der Blogbeiträge in den Boxen auf der Startseite */
.blog .content-area .entry-title a {
color: #333;
}

/* Schriftart in den nummerierten Aufzählungen */

element.style {
}
ol {
font-family: “Roboto”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 20px;
}

/* Das hier importiert die Fonts Major “Mono Display Font” und “Noto Sans KR” von Google in die Seite so dass Du ihn nutzen kannst. */

@import url(‘https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap’);

/* Font auf Cookie Consent */

.cookie-bar-block #catapult-cookie-bar span {
font-family: ‘Roboto’;
}

/* Font im Suchfeld */

Element {
}
.widget.widget_search .search-form .search-field {
font-family: ‘Roboto Slab’;
font-size: 1rem;
color: #1c1c1c;
}

/* Font unten bei “nächstes Post” ändern. */

Element {
}
div.loose-next-article {
font-family: ‘Helvetica’;
line-height: 2.3;
font-size: 0.8rem;
color: #1c1c1c;
}

Element {
}
div.loose-previous-article {
font-family: ‘Helvetica’;
line-height: 2.3;
font-size: 0.8rem;
color: #1c1c1c;
}

Element {
}
div.loose-next-article-title {
font-family: ‘Helvetica’;
font-size: 1.5rem;
color: #333;
}

Element {
}
div.loose-previous-article-title {
font-family: ‘Helvetica’;
font-size: 1.5rem;
color: #333;
}

/* Font in den Aufzählungen ändern. */

Element {
}
ul {
font-family: ‘Roboto’;
font-size: 19px;
font-style: normal;
font-weight: 300;
line-height: 1.7;
color: #1c1c1c;
}

/* FOOTER */

/* Diese beiden machen im Footer das Proudly presented by wordpress weiß in Link und Text */

Element {
}
.site-info p {
color: #ffffff;
}

Element {
}
.site-info a {
color: #ffffff;
}

/* Das hier entfernt die “Diese Seite ist von….” Informationen
Element {
}
.site-footer .site-info {
display:none !important;
}