GeneratePress aanpassen met CSS

Met de gratis versie van het GeneratePress thema kan je natuurlijk al ontzettend veel instellen en aanpassen. Toch zijn er ook dingen die je niet kan aanpassen omdat de bouwer hoopt dat je het thema juist voor die extra dingen gaat aanschaffen.
Het grootste deel van die dingen kan je ook met GeneratePress CSS code-stukjes(snippets) bereiken.

Voordat je begint

Net als bij de meeste andere thema´s kan je bij GeneratePress ook de vormgeving van het thema instellen via de Customizer. Je kan deze bereiken via Dashboard > Weergave > Customizer of wanneer je de bezoekerskant van de website bekijkt kan je op het penseeltje klikken in de bovenbalk.
Om de onderstaande CSS voor het GeneratePress thema te kunnen gebruiken zal je de gewenste snippets moeten kopiëren en pakken bij het onderdeel Extra CSS.

We hebben hieronder geprobeerd de code logisch in te delen en erbij gezet wat elke snippet doet. Wanneer je zelf nog geen huisstijl hebt, kan je hier alle mogelijke kleurcodes maken. Uiteindelijk heb je de kleurwaardes nodig als hexadecimale kleur(met een # ervoor). Bewaar je kleurcodes goed, want je hebt ze waarschijnlijk nog vaker nodig. Bij onderstaande snippets kan je naar wens de kleurcodes vervangen door jouw eigen kleurcodes.

GeneratePress thema CSS code snippets

Algemene thema aanpassingen

/* Veranderen achtergrondkleur teksten */
.site-content {background: #e2e8ff;}

/* Ruimte boven bovenste afbeelding verwijderen */
.home .site-content {padding-top: 0px !important;}

/* Uitgelichte afbeelding volledige breedte maken */
.page-header-image.grid-container {max-width: 100%;}
.page-header-image.grid-container img {width: 100%;}

/* Paginatitel(H1), gewicht en kleur */
h1 {font-size: 32px; font-weight: bold; color: #f09022;}

/* Kopteksten berichtenoverzicht pagina aanpassen */
.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, lettergrootte, gewicht en kleur */
h2 {font-size: 32px; font-weight: bold; color: #f09022;}

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

/* Auteur boven berichten weghalen */
.byline {display: none !important;}

/* Categorie en tag links verwijderen */
.cat-links, .tags-links, .comments-link {display: none;}

--------------------------------------------------------------------

Header aanpassen(navigatiemenu en bovenkant)

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

/* Kleur aanpassen actieve pagina in de menubalk */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {background-color: #005dff;}

/* Kleur menu-item zwevende muis */
.main-navigation .main-nav ul li > a:hover {background-color: #008e17;}

/* Achtergrondkleur van de header aanpassen */
.site-header {background-color: #e2e8ff;}

/* Afbeelding op homepage zonder tussenruimte tegen menubalk */
.home .site-content {padding-top: 0px !important;}

/* Kleur menu-items aanpassen */
.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;}

/* Aanpassing achtergrondkleur dropdown menu */
.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 dropdown menu bij zwevende muis */
.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;}

/* Aanpassen tekst website titel naast logo */
.main-title, .main-title a{font-size: 40px; font-weight: bold; color: #003ac2 !important;}

/* Aanpassen tekst slogan */
.site-description {font-size: 20px; font-weight: bold; color: #003ac2 !important;}

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

/* Witruimte boven en onder logo aanpassen */
.inside-header {
padding-top: 15px;
padding-bottom: 15px;}

--------------------------------------------------------------------

Sidebar aanpassen(zijbalk)

/* Achtergrondkleur van de sidebar */
.sidebar .widget {background-color: #e2e8ff;}

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

/* Sidebar widgets grootte tekst aanpassen */
.sidebar .widget p, .sidebar .widget a{font-size: 15px;}

--------------------------------------------------------------------

Footer aanpassen(onderaan de pagina)

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

/* Achtergrond Footer widgetgebieden aanpassen */
.footer-widgets {background-color: #ff0000;}

/* Footer widget teksten aanpassen */
.footer-widgets .widget-title {color:#fff; font-size: 18px;}
.footer-widgets p {color: #fff;}
.footer-widgets a {color: #fff;}

--------------------------------------------------------------------

Verticaal navigatiemenu (linkerkant pagina)

@media (min-width: 1000px) {
    body {
        margin-left: 300px;
    }

    .site-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 300px;
        z-index: 300;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-overflow-scrolling: touch;
        transition: .1s ease;
    }

    .admin-bar .site-header {
        top: 32px;
    }

    .site-header .main-navigation li {
        float: none;
    }
}

.inside-header {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

.site-branding,
.site-logo {
    order: 1;
}

.header-widget {
    order: 3;
}

.nav-float-right .inside-header .main-navigation {
    order: 2;
    float: none;
    margin-top: 30px;
    margin-bottom: 50px;
}

.nav-float-right .header-widget {
    float: none;
    top: auto;
    max-width: 100%;
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

.main-navigation.toggled .main-nav li {
    text-align: center !important;
}

--------------------------------------------------------------------

Meer weten over GeneratePress thema CSS?

Wanneer je meer wil leren over het gebruik van CSS kan je bijvoorbeeld deze gratis online CSS cursus volgen of anders die van W3schools. Daar leer je de grondbeginselen en kan je zelfstandig de rest uitvinden.

Wil je juist een cursus onder begeleiding, zodat je direct vragen kan stellen aan een professionele trainer? dan hebben wij naast onze gratis WordPress handleiding natuurlijk ook een hele mooie HTML en CSS cursus die ook perfect aansluit op het GeneratePress CSS aanpassen. Hierbij leer je dan buiten de basis ook een aantal hele handige gereedschappen kennen die het werken met CSS nog makkelijker maakt. Hierdoor kan je redelijk eenvoudig vrijwel alle websites in de wereld aanpassen, ook die niet met WordPress zijn gemaakt.

Conclusie

Met de codes van hierboven kan je ontzettend veel meer aanpassen dan het gratis Astra thema normaal toelaat. Kijk dus per onderdeel welke code je nodig hebt en probeer ze uit. Je leert ontzettend veel door met CSS aan de slag te gaan.
Wanneer je nog andere codes hebt ontdekt, deel ze dan hieronder. Dan kan iedereen er wat mee.
De bouwer van GeneratePress is een hele sympathieke persoon, dus wanneer je toch het budget hebt in de toekomst koop het dan gewoon. Op deze manier krijg je nog veel meer mogelijkheden en kan hij het thema door blijven ontwikkelen. De investering van rond 50$ hiervoor is eigenlijk helemaal niet zo hoog wanneer je het zo bekijkt.