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;}
/* Marge boven omslagafbeelding verwijderen */
.home .site-content {padding-top: 0px !important;}
/* Letterhoogte en dikte van de menu-items */
.main-navigation .main-nav ul li a {font-size: 16px; font-weight: 600;}
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;}
/* Afbeelding op homepage sluit aan op menubalk */
.home .site-content {padding-top: 0px !important;}
/* 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;}
/* Witruimte boven en onder logo */
.inside-header {
padding-top: 15px;
padding-bottom: 15px;}
/* 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;}
/* Kader om sidebar widgets */
.sidebar .widget {
border: solid 1px #cccccc;
border-radius: 8px;
padding: 15px !important;
}
/* Footer widget titels, tekst, links: kleur en lettergrootte */
.footer-widgets .widget-title {color:#fff; font-size: 18px;}
.footer-widgets p {color: #fff;}
.footer-widgets a {color: #fff;}
/* 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;}
/* Categorie-link verwijderen */
.cat-links, .tags-links, .comments-link {display: none;}
/* Voettekst GeneratePress balkje andere kleur */
.site-info {background-color: #f06424;}
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 »