Custom CSS Save

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

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
}

/* 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: #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;
}

/* 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: 15px !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: ‘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. */

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;
}

.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;
}

/* 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 */

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;
}

/* 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 */

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;
}

/* 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 */

.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 #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. */

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;
}

/* 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 */

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;
}

/* 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 */

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;
}

/* 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;
}

/* 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: ‘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 */

.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 #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 */

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;
}

/* 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;
}

/* 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: ‘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;
}