Cursus WordPress: GeneratePress CSS

wordpress-css-twenty-eleven

Op deze pagina vind je een aantal handige CSS codes waarmee je het uiterlijk van het GeneratePress WordPress thema kunt aanpassen zonder de Premium versie aan te schaffen.

Klik op Weergave > Customizer > Extra CSS en er verschijnt 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 "Publiceren" en alles is weer zoals het was.


Veel gebruikte CSS codes

/* Kleur van de menubalk */
.main-navigation {background: #f06424;}

/* Kleur van actieve pagina in de menubalk */

.main-navigation .main-nav ul li[class*="current-menu-"] > a {background-color: #005dff;}

/* Kleur menu-item bij mouse-over */

.main-navigation .main-nav ul li > a:hover {background-color: #008e17;}

/* Voettekst GeneratePress uitschakelen */
.site-info {display: none;}

/* Footer widgets achtergrondkleur */
.footer-widgets {background-color: #cccccc;}


En er kan nog veel meer:

/* Achtergrondkleur van de content */

.site-content {background: #e2e8ff;}

/* Achtergrondkleur van de sidebar */

.sidebar .widget {background-color: #e2e8ff;}

/* Achtergrondkleur van de header */

.site-header {background-color: #e2e8ff;}

/* Uitgelichte afbeelding over de hele breedte */

.page-header-image.grid-container {max-width: 100%;}
.page-header-image.grid-container img {width: 100%;}

/* Tekstkleur van de menu-items */

.main-navigation .main-nav ul li[class*="current-menu-"] > a {color: #000000;}
.main-navigation .main-nav ul li > a:hover {color: #000000;}
.main-navigation .main-nav ul li a {color: #000000;}
.main-navigation .main-nav ul ul li a {color: #000000;}
.main-navigation .main-nav ul ul li a:hover {color: #000000;}
.main-navigation .main-nav ul li a, .menu-toggle {color: #000000 !important;}

/* Achtergrondkleur uitklapmenu */

.main-navigation .main-nav ul ul li:hover > a, .main-navigation .main-nav ul ul li:focus > a, .main-navigation .main-nav ul ul li > a {background-color: #f06424;}

/* Achtergrondkleur uitklapmenu bij mouse-over */

.main-navigation .main-nav ul ul li:hover > a, .main-navigation .main-nav ul ul li:focus > a, .main-navigation .main-nav ul ul li.sfHover > a {background-color: #008e17;}

/* Website titel, letterhoogte en lettergrootte, tekst wijzigen bij Instellingen – Algemeen */
.main-title, .main-title a {font-size: 32px; color: #cccccc !important;}

/* Website ondertitel, letterhoogte en kleur, tekst wijzigen bij Instellingen – Algemeen*/
.site-description {font-size: 20px; color: #f09022;}

/* header achtergrondkleur */
.site-header {background-color: #c6d7ff;}

/* Koptekst 1 (=paginatitel), letterhoogte, vet, en kleur */
h1 {font-size: 32px; font-weight: bold; color: #f09022;}

/* Kopteksten op berichtenpagina, kleur */
.entry-title h2 a, h2 a:link {font-size: 32px; font-weight: bold; color: #f09022;}
h2 a:visited {color: #f09022;}
h2 a:hover, h2 a:active {color:#f09022;}

/* Koptekst 2, letterhoogte, vet, en kleur */
h2 {font-size: 32px; font-weight: bold; color: #f09022;}

/* Sidebar widget titels, kleur en lettergrootte */
.sidebar .widget .widget-title {color:#f09022; font-size: 18px;}

/* Footer widget titels, kleur en lettergrootte */
.footer-widgets .widget-title {color:#f09022; font-size: 18px;}

/* Sidebar widgets teksthoogte */
.sidebar .widget p {font-size: 15px;}
.sidebar .widget a {font-size: 15px;}

/* Kleur formulierknoppen */
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {background-color: #ff6702;}

/* Auteursvermelding boven berichten uitschakelen */
.byline {display: none !important;}


Zonder CSS te wijzigen via de Customizer

Het lettertype van de gewone tekst op de pagina's kun je wijzigen via Weergave > Customizer > Typografie.

De kleur van van de gewone tekst kun je wijzigen via Weergave > Customizer >Kleuren – Tekstkleur.

De kleur van de links kun je wijzigen via Weergave > Customizer >Kleuren – Linkkleur.


RGB kleurcodes

Kleurcodes kun je hier maken: Google RGB color picker »