Cursus WordPress: Twenty Eleven CSS

Op deze pagina vind je een aantal handige css-code waarmee je het uiterlijk van het Twenty Eleven WordPress thema kunt aanpassen.

Installeer de plugin Simple Custom CSS en ga naar Weergave – Custom CSS. Dan verschijnt er een vakje waar je de CSS codes kunt plaatsen.

Laat je niet afschrikken door deze programmeercode, gewoon kopiëren en plakken en kijken wat er gebeurt! Bevalt het niet, verwijder de code, klik op "Save Changes" en alles is weer zoals het was.

Teksthoogte aanpassen van de paginatekst:

p {font-size: 18px;}

Geen kader om afbeeldingen:

img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {border: 0px;}

Voettekst uitschakelen (Met trots ondersteund door WordPress):

#site-generator a {display: none;}

Menubalk van kleur veranderen:

#access {background: #0e1654 !important;}

Menubalk: uitklapmenu's van kleur veranderen:

#access ul ul a {background: #48a832 !important;}

Tekst in menubalk vet maken:

#access a {font-weight: bold;}

Tekst in menubalk groter maken:

#access a {font-size: 16px;}

Titels van pagina- en berichten aanpassen:

.entry-title, .entry-title a {font-size: 20px; color: #4C721D;}
.singular .entry-title, .singular .entry-header .entry-meta {font-size: 20px; color: #4C721D;}

Titel van widget in kleine letter en streep eronder:

.widget-title {text-transform: none; font-size: 14px; border-bottom:1px solid #000000; letter-spacing: 0; margin-bottom: 5px;}

Schaduwrandje onder menubalk verwijderen:

#access {box-shadow: #ffffff 0px 0px 0px;}

Reactieballonetje rechts naast blogberichten verwijderen:

.comments-link a {display: none;}

Zoekfunctie uit menubalk verwijderen:

#branding .with-image #searchform {display: none;}

Zoekfunctie rechtsboven kopafbeelding verwijderen:

#branding #s {display: none;}

Pagina zonder sidebar links laten uitlijnen

.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
margin: 0 auto;
width: 100%;
}

Grijze rand rondom afbeeldingen verwijderen

a:focus img[class*="align"],
a:hover img[class*="align"],
a:active img[class*="align"],
a:focus img[class*="wp-image-"],
a:hover img[class*="wp-image-"],
a:active img[class*="wp-image-"],
#content .gallery .gallery-icon a:focus img,
#content .gallery .gallery-icon a:hover img,
#content .gallery .gallery-icon a:active img {/* Add some useful style to those fancy borders for linked images … */
background: #ffffff !important;
border-color: #bbb;
}

Lettertype en letterhoogte van onderschrift  afbeeldingen wijzigen
wp-caption .wp-caption-text,
.gallery-caption {
color: #666;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 12px;
}

Marge bovenaan pagina verkleinen
.singular.page .hentry {
padding: 0.5em 0 0;
}