modifikationen

Mit den hier genannten Modifikationen lief mein WordPress Blog zuletzt und sah so aus:

Und so sah mein Blog in der Vergangenheit aus, siehe hier.

Ein Teil der hier aufgeführten Modifikationen sind fürs lokale Hosten der verwendeten Schriftart, Details dazu siehe hier.

Umgesetzt waren sie als sogenannten Child-Theme für WordPress. Hier findest du alle notwendigen Dateien. Diese waren im Verzeichnis wp-content/themes/twentyfourteen_child/.

Die fürs Aussehen einzig wichtige Datei ist style.css.

style.css

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready, editor-style
 Text Domain:  twenty-fourteen-child
*/

@import url("../twentyfourteen/style.css");
.site {
    margin:0 auto;
    background: #212730;
}

/* Volle Breite des Browserfensters nutzen */
/*.main-content {
   width: 100%;
}*/

/*.site-header {
  background-color: #000;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 4;
}*/

/* Bilder bei zwei Spalten mittig ausrichten */
.full-width .post-thumbnail img {
    display: block;
    margin: 0;
    border-bottom: 10px #fff solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}



.entry-title {
    font-size: 33px;
    font-weight: 300; 
    line-height: 1.0909090909;
    margin-bottom: 12px;
    margin: 0 0 12px 0;
    text-transform: none;
}

/* Blue shadow */
/*div#page.hfeed.site {
             box-shadow: 0px 0px 15px 5px #9AD3F2;
}*/                   

/* made by wordpress ausblenden */
div.site-info {
    display:none;
    } 


.site-navigation a {
    color: #fff;
    display: block;
    text-transform: none;
}

/* Artikelbilder verkleinern */
/*.post-thumbnail img {
    height: auto;
    width: auto;
    max-height: 350px;
    max-width: 350px;
}*/

/* Artikelbilder bei drei Spalten zentrieren */
.post-thumbnail img {
    position: relative;
    left: 50%;
    height: auto;
    width: auto;
/*    max-height: 280px;
    max-width: 280px; -webkit-transform: translateX(-50%);*/
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* https://core.trac.wordpress.org/ticket/28967 see diff */
/* Added FIXME px because of natenomglobaltopbar */           
.masthead-fixed .entry-content span[id*="more-"] { 
    display: block; 
    /*padding-top: 40px; */
    padding-top: 60px; 
    /*margin-top: -64px; */
    margin-top: -64px; 
} 
.admin-bar.masthead-fixed .entry-content span[id*="more-"] { 
    padding-top: 72px; 
    margin-top: -96px; 
} 




/* display full height of title images */

.entry-header {
     margin-top: 0px;
}




/*@media screen and (min-width: 1040px)
.site-content .has-post-thumbnail .entry-header {
    margin-top: 0px;
}
@media screen and (min-width: 846px)
.site-content .has-post-thumbnail .entry-header {
    margin-top: 0px;
}
@media screen and (min-width: 594px)
.site-content .has-post-thumbnail .entry-header {
    margin-top: 0px;
}
*/



/* search box richtig machen */
.search-box-wrapper {
        top: calc(48px + 30px);
    }


/* Artikelbilder, kleinere Balken oben ueber der Ueberschrift */
/* @media screen and (min-width: 1040px)
.site-content .has-post-thumbnail .entry-header {
        margin-top: -24px;
    }

    @media screen and (min-width: 846px)
    .site-content .has-post-thumbnail .entry-header {
            margin-top: -24px;
        }

@media screen and (min-width: 1008px)
.site-content .has-post-thumbnail .entry-header {
        margin-top: 0;
    }
*/


/* lato-100 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: url('/fonts/lato-v14-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Lato Hairline'), local('Lato-Hairline'),
       url('/fonts/lato-v14-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v14-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v14-latin-100.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v14-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v14-latin-100.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-100italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  src: url('/fonts/lato-v14-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
       url('/fonts/lato-v14-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v14-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v14-latin-100italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v14-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v14-latin-100italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/lato-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
       url('/fonts/lato-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v14-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/lato-v14-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Light Italic'), local('Lato-LightItalic'),
       url('/fonts/lato-v14-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v14-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v14-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v14-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v14-latin-300italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/lato-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('/fonts/lato-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v14-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/lato-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Italic'), local('Lato-Italic'),
       url('/fonts/lato-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v14-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/lato-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold'), local('Lato-Bold'),
       url('/fonts/lato-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v14-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/lato-v14-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
       url('/fonts/lato-v14-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v14-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v14-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v14-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v14-latin-700italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/lato-v14-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Lato Black'), local('Lato-Black'),
       url('/fonts/lato-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v14-latin-900.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v14-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  src: url('/fonts/lato-v14-latin-900italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Black Italic'), local('Lato-BlackItalic'),
       url('/fonts/lato-v14-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v14-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v14-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v14-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v14-latin-900italic.svg#Lato') format('svg'); /* Legacy iOS */
}


/* Start: 700 px Artikelbreite */
/*@media screen and (min-width: 1040px) {*/

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    margin: 0 auto;
    max-width: 700px;
}
/*}*/

/*img.size-full,
img.size-large,
.wp-post-image,
.post-thumbnail img {
    height: auto;
    max-width: 760px;
}*/

img.size-full, img.size-large {
    height: auto;
    max-width: 700px;
    margin: 0 auto;
}
.wp-post-image, .post-thumbnail img {
    height: auto;
    max-width: 760px;
}

/* End: 700 px Artikelbreite */

/* keine streifen mehr bei den Artikelbildern */
.post-thumbnail {
        background: #212730;
    display: block;
    position: relative;
/*  width: 100%;*/
    z-index: 0;
}

/* tags heller */
/* .entry-meta .tag-links a {
background-color: #2c323d;
}

.entry-meta .tag-links a::before {
border-right: 8px solid #2c323d;
}
*/









.post {
background: #212730;
padding: 0 0 40px 0;
max-width: 760px;
margin: 0 auto;
/*padding: 40px 0;*/
}


.site-content footer.entry-meta {
margin: 0 auto;
/*padding: 0px 0px 20px 0px;*/
padding: 0px 30px 20px 30px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.entry-meta .tag-links a::before, .entry-meta .tag-links a::after {display:none;}


.entry-meta .tag-links a {
background-color: #2c323d1a;
border-radius: 5px;
color: #999;
margin: 4px 4px 0 0px;
text-transform: none;
}

.site-content .entry-header {
padding: 30px 30px 10px 30px;
/*padding: 30px 0px 10px 0px;*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.list-view .site-content .hentry {
padding-top: 0px;
}

a.post-thumbnail:hover {
background: transparent;
}


.post-navigation {
background: #212730;
margin: 0 auto;
padding: 0px 144px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}



.comments-area {
color: #fff;
background: #212730;
margin: 0 auto 40px auto;
padding: 40px 144px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}


.site-content {
background: #212730;
}

.post-navigation a {
color: #fff;
}

.comment-author a {
color: #fff;
}

.paging-navigation {
color: #fff;
/*background: #fff;*/
/*margin: 0 auto;*/
margin: -10px auto 30px auto;
max-width: 760px;
/*border-radius: 0 0 10px 10px;*/
/*border-top-color: #286bc1;*/
}

.pagination.loop-pagination {
color: #fff;
}

.pagination.loop-pagination a {
color: #fff;
}

.pagination.loop-pagination a:hover {
color: #fff;
}


.content-area {
padding-top: 48px;
background: #212730;
}

/*.main-content {
background: #212730;
}*/



.archive-header {
color: #fff;
}


/*auf Miniseite soll Ueberschrift weiss sein, normal nicht */
@media only screen and (max-width: 320px) {
    body {
        padding-top: 0;
    }

    h1.entry-title a {
        color: #fff;
    }
}

@media only screen and (max-width: 400px) {
    body {
        padding-top: 0;
    }

    h1.entry-title a {
        color: #fff;
    }
}


/*.entry-content {
padding-bottom: 30px;
}*/

.entry-header, .entry-header {
padding: 30px;
}


@media screen and (max-width: 672px) {
.site-content .entry-header, .site-content footer.entry-meta {
/*padding: 30px 12px 10px 12px;*/
    padding: 0px 12px 12px 12px;
} }





/*Artikelbilder unterhalb einer gewissen Groesse nicht mehr auf 700px sondern 100%*/
@media screen and (max-width: 700px) {
img.size-full, .wp-post-image, .post-thumbnail img {
height: auto;
max-width: 100%;
}

img.size-large {
    max-width: calc(100% - 20px);
}

}

@media screen and (max-width: 593px) {
.site-content .has-post-thumbnail .entry-header {
margin-top: -10px;
}
}

.archive-header, .page-header {
margin: 0 auto 40px;
max-width: 760px;
}

.full-width .site-content .has-post-thumbnail .entry-header {
margin-top: -10px;
}

.full-width .site-content .hentry.has-post-thumbnail:first-child {
    margin-top: -28px;
}


.search-box-wrapper {
    top: calc(0px + 0px);
    right: 48px;
    width: calc(100% - 222px - 48px);
    padding-left: 0px;
}

.search-box {
    background-color: transparent;
    padding: 0px;
}

.search-box .search-field {
    font-size: 20px;
    padding: 4px 4px 4px 10px;
    height: 48px;
    width: 100%;
    border-radius: 0px;
}

.site-content .entry-summary {
     padding-bottom: 1px;
}

 .page-header {
     color: #fff;
 }

/*.full-width .site-content img.size-full.alignleft {
margin-left: 0px;
}*/

@media screen and (max-width: 400px) {
.full-width .post-thumbnail img {
border-bottom: 0px transparent solid;
border-radius: 4px;
}
.full-width .site-content .hentry.has-post-thumbnail:first-child {
margin-top: 12px;
}
}


@media screen and (max-width: 600px) {
.search-box-wrapper {
right: 96px;
width: calc(100% - 96px);
}
}

/* Abstand zwischen den Artikeln */
.post {
padding: 0 0 60px 0;
}

 .post-navigation {
padding: 10px;
}
.comments-area {
padding: 40px 10px;
}





/*
.video-wrapped {
max-width: 474px;
}*/


@media screen and (max-width: 400px) {
.content-area {
padding-top: 0px;
}
}

.search-toggle {
background: transparent !important;
}


.video-wrapped {
width: 100% !important;
height: 394px !important;
}
.video-wrapped iframe {
width: 100% !important;
height: 394px !important;
}
@media screen and (max-width: 400px) {
.video-wrapped, .video-wrapped iframe {
height: 214px !important;
}
}



.secondary-navigation {
border-bottom: 0px;
}
.secondary-navigation li {
border-top: 0px;
}
#menu-topmenu li a {
color: #b5b7ba;
padding: 10px 10px;
margin-left: 20px;
}
#menu-topmenu li:hover a {
color: #fff;
}
#menu-topmenu li .sub-menu li a {
margin: 0px;
}













/* Kategorien links als Widget etwas dunkler */
 .primary-sidebar h1 {
color: rgba(255, 255, 255, .8);
}
.primary-sidebar li {
color: rgba(255, 255, 255, .5);
}
.primary-sidebar a {
color: rgba(255, 255, 255, .7);
}





.related_post_title {
  color: #1a1f26;
  /*border-top: 4px solid #212730;*/
  margin: 0 -30px 0 -30px;
  padding: 20px 40px;
}
.related_post {
  list-style: disclosure-closed;
  color: #212730;
  padding: 15px 15px 15px 30px;
  margin: -10px 0 20px 0;
}
.related_post li {
  padding: 4px;
}
.related_post a {
  color: #212730;
  display: block;
}
.related_post a:hover {
  color: #4588de;
  text-decoration: underline;
}


/* Falls keine Tags unten angegeben sind, wird trotzdem abgerundet.*/
.entry-content {
    border-radius: 0px 0px 10px 10px;
    padding: 10px 30px !important;
}
.entry-meta {
    margin-top: -10px !important;
}



/* Artikelbilder bei sehr kleinen Displays nicht mittig positionieren */
@media screen and (max-width: 400px) {
    .list-view .site-content .post-thumbnail img {
        float: left;
        margin: 0 10px 3px 0;
        width: 84px;
        position: initial;
        left: initial;
        transform: initial;
     }


    /* Bilder richtig in die Spalte setzen, Text wird abgetrennt von Bildern angezeigt */
    .entry-header { 
        display: grid;
        margin-top: 0px !important;
    /*  margin-left: 94px !important;*/
    }

    .entry-content {
        border-radius: 0 !important;
    }
    .entry-meta {
            margin-top: 0px !important;
        }
}

![](tag>Twentyfourteen Thema Theme Blog Modifikationen Anpassungen CSS)

Zuletzt geändert: 2023-01-10 20:08:32 +0100 CET: init