Astra thema aanpassen met CSS

Het gratis Astra thema is een prachtig thema. Out-of-the-box kan je er namelijk al ontzettend veel mee doen. Toch zijn er ook instellingen waarvoor je het thema zou moeten aanschaffen.
Voor de mensen die maar een paar tweaks missen heb ik daarom goed nieuws, want je kan met CSS het Astra thema vrij eenvoudig aanpassen.

Voordat je begint

Ook het Astra kan je natuurlijk aanpassen via de Customizer. Deze kan je bereiken via het onderdeel Dashboard > Weergave > Customizer of wanneer je naar de “voorkant” van de website gaat kan je de Customizer selecteren in de bovenbalk.
Hieronder staan verschillende CSS codes die je kan kopiëren en daarna in de Customizer bij het onderdeel Extra CSS kan plakken. Er staat bij elke code wat het doet en ook hebben we de indeling van de pagina aangehouden om de benodigde code makkelijker te vinden.

Wanneer je nog geen kleuren hebt voor je huisstijl kan je hier je hier de gewenste RGB kleurcodes maken. Schrijf de waarde op(die met de #), zodat je ze overal waar nodig kan gaan gebruiken.

Handige Astra thema CSS aanpassingen

Algemene Atra thema CSS
(tekst, kopjes, blog, etc.)

/* Tekst weg volgend en vorig bericht  */
.single .post-navigation a {
display: none;
}

/* schrijver en datum weg bij berichten */
.entry-meta{display:none;}

/* Achtergrondkleur, randdikte en ruimte  */
.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single {
background-color: #fff;
border-bottom: 1px solid #eee;
margin: 0;
padding: 1.34em 2.67em;
}
.ast-separate-container .ast-archive-description, .ast-separate-container .ast-author-box {
margin: 0;
padding: 0.9em 2.67em 0.6em;
background-color: #ff0000;
}
.ast-archive-description .ast-archive-title {
font-size: 1.3rem;
color: #ff0000;
}

/* Achtergrondkleur post content */
.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single {
background-color: none;
}

/* Kolommen breder op mobiel */
@media only screen and (min-width: 100px) and (max-width: 768px) {
.fl-col-small {  min-width: 100%;}
}
}

/* ---------------------------EIND------------------------------- */

Bovenkant website aanpassen (navigatiemenu, header)

/* Achtergrondkleur header veranderen */
.main-header-bar {
background-color: #ff0000;
}

/* CSS achtergrondkleur navigatiemenu aanpassen */
.main-header-menu{
background-color: #ff0000;
}
/* Achtergrondkleur gekozen menuknop aanpassen */
.current-menu-item{
background-color: #ff0000;
}
/* Omgekeerd dakje submenu veranderen of verwijderen */
.main-header-bar .menu-item-has-children>a:after,
.main-header-bar .page_item_has_children>a:after {
    content: none !important; /* gebruik bijvoorbeeld content: "▼" !important; om er een bolletje van te maken */
}

/* ---------------------------EIND------------------------------- */

Astra thema zijbalk aanpassen

/* Achtergrondkleur van de sidebar met marge */
.sidebar-main .widget {background-color: #ff0000; padding: 10px;}
 
/* Sidebar widget titels aanpassen */
.sidebar-main .widget .widget-title {color:#ff0000; font-size: 18px;}
 
/* Sidebar widgets grootte tekst aanpassen */
.sidebar-main .textwidget p, .sidebar-main .textwidget a{font-size: 25px;}

/* ---------------------------EIND------------------------------- */

Onderaan de pagina(Footer)

/* Hoogte en kleur footer aanpassen - activeren via customizer */
.footer-adv-overlay {
padding-top: 30px;
padding-bottom: 30px;
background-color: #ff0000;
}

/* Footer widget teksten aanpassen */
.footer-adv-overlay  .widget-title {color:#fff; font-size: 24px;}
.footer-adv-overlay .textwidget p {color: #ff0000;}
.footer-adv-overlay .textwidget a {color: #fff;}

/* Footer balk aanpassen (kleur kan ook via Customizer) */ 
.ast-footer-overlay{
background-color: #ff0000;
padding-top: 20px;
padding-bottom: 20px;
}

/* ---------------------------EIND------------------------------- */

Hier zijn nog meer handige tips van Astra zelf.

Meer leren over Astra thema en CSS?

Voor wie dat leuk vindt, zijn er verschillende gratis CSS-cursussen op internet te vinden. Een voorbeeld daarvan is de gratis coding for designers cursus van Aquent.
Natuurlijk heeft WeLoveTraffic.nl ook een HTML + CSS training waarmee je een goede basis krijgt om vrijwel elke website vorm te geven.
Tijdens onze WordPress cursus krijg je ook een vliegende start, zodat je zelfstandig verder kan bouwen.

Nawoord

De ontwikkelaar van het Astra thema heeft het thema natuurlijk niet alleen uit liefdadigheid gemaakt voor ons. Ze hopen dat je het aanschaft, want ook ontwikkelaars hebben een inkomen nodig om te eten. De investering voor de premium versie is rond de 50$ en je krijgt dan echt veel waar voor je geld. Je hoeft dan ook geen codes meer te kopiëren en plakken want in de betaalde(premium) versie is vrijwel alles via vinkjes en schuifjes in te stellen.

Wanneer je toch twijfelt over de aanschaf zal je met de code snippets van hierboven ook in staat zijn heel veel aan te passen. Kijk per onderdeel welke code je nodig hebt en probeer ze uit. Je leert er heel veel van om hiermee lekker aan de slag te gaan. Mis je nog codes, of je hebt zelf andere codes ontdekt? deel ze hieronder!