Theme Twenty Seventeen anpassen

Das Stan­dard The­me der neu­en Word­Press Ver­si­on lässt sich pri­ma an die eige­nen Bedürf­nis­se anpas­sen und ist modern und sicher­lich das bis­her bes­te The­me was mit Word­Press aus­ge­lie­fert wird. Aller­dings in der Grund­ver­si­on etwas sper­rig zugäng­lich.

Um die Ein­stel­lun­gen zu ver­ein­fa­chen emp­feh­le ich das Plugin „Advan­ced Twen­ty Seven­te­en“.

Twen­ty Seven­te­en bie­tet vie­le Mög­lich­kei­ten, um z.b. eine benut­zer­de­fi­nier­te Far­be für Hea­der, Foo­ter oder eine benut­zer­de­fi­nier­te Schrift­art anpas­sen.

Die wichtigsten Merkmale :

  • Benut­zer­de­fi­nier­tes Lay­out : Vol­le Brei­te oder Boxed Lay­out
  • Benut­zer­de­fi­nier­te Schrift­art
  • Benut­zer­de­fi­nier­te Far­ben für fol­gen­de Berei­che : Hea­der, Site Bran­ding, Foo­ter Wid­get, Copy­right, u.v.m.
  • Kun­den­spe­zi­fi­sche Sti­le
  • Benut­zer­de­fi­nier­ter Code
  • Child-The­me mit einen Klick erstel­len

Hier noch ein paar Anpas­sun­gen, die im Opti­ons­punkt „zusätz­li­ches css“ im Cus­to­mi­zer hin­zu gefügt wer­den kön­nen :

Höhe des Hea­ders

.twentyseventeen-front-page.has-header-image .custom-hea­der-media,
.twentyseventeen-front-page.has-header-video .custom-hea­der-media,
.home.blog.has-header-image .custom-hea­der-media,
.home.blog.has-header-video .custom-hea­der-media {
height : 1200px ;
height : 100vh ;
max-height : 100%;
over­flow : hid­den ;
}

.admin-bar.twentyseventeen-front-page.has-header-image .custom-hea­der-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-hea­der-media,
.admin-bar.home.blog.has-header-image .custom-hea­der-media,
.admin-bar.home.blog.has-header-video .custom-hea­der-media {
height : calc(100vh — 32px);
}

vh ist in die­sem Fall die Höhe des Hea­ders in 100% und soll­te an bei­den Stel­len ange­passt wer­den (der zwei­te Ein­trag betrifft den Hea­der inkl. Admin-Bar).

Hin­ter­grund­far­be Main Back­ground
/*Change main back­ground color*/
.site-con­tent-con­tain {
back­ground-color : #0066CC ;
}

Damit ist nicht der Hin­ter­grund der Sei­te gemeint, son­dern der Hin­ter­grund der Posts, Sei­ten. Mit die­sem CSS-Schnip­sel lässt sich die­se bequem anpas­sen.

Brei­te des Inhalts
.wrap {
max-width : 1100px !important ;
}

Damit kann man bequem die Brei­te für den Sei­ten­in­halt anpas­sen, ein­fach den Wert „px“ ent­spre­chend ändern.

Infor­ma­tiv wei­ter­füh­ren­der Link
Wei­te­re Mög­lich­kei­ten mit CSS den Hea­der zu beein­flus­sen zeigt Inter­net Kur­se Köln auf.

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.