CSS Archieven - WPHulp.nl

[video] Logo in header van Twenty Eleven plaatsen

In deze video een tutorial over hoe je een logo plaatst in Twenty Eleven naar aanleiding van de vraag van Carlos (in de video CaPa genoemd). Als je vragen hebt, zet hieronder een reactie neer en verder zou ik het op prijs stellen als je deze video wilt delen.

De codes:

/* CSS voor logo */
#nieuwelogo {
	background-image: url('AFBEELDINGLINK');
	width:320px;
	height: 108px;
	margin-top: 10px;
}

#branding hgroup {
	height: 120px;
}

Heb jij ook een vraag waar je graag een video over zou willen zien, stuur dan een email via de contact pagina op WPHulp.nl.

Maak je eigen shortcode in WordPress

Tutorials

Vandaag een interessant artikel voor iedereen die met een simpele shortcode bijvoorbeeld een succesbox of waarschuwingsbox wilt oproepen. Om een shortcode te maken moet je wel met codes kunnen omgaan. In deze tutorial gaan wij een succesbox en waarschuwingsbox maken die je kunt oproepen met een shortcode.

Shortcode toevoegen aan functions.php

Eerst moeten we de functie oproepen. Dit moet je doen in functions.php. Maak je gebruik van een Child Theme, maak dan in de map van je Child Theme een nieuw php-bestand aan met de naam fuctions.php. Hier kun je dan gewoon de code invoegen en zal hij zelf de overige code van functions.php opzoeken van je basis-theme. Je kunt meer over Child Themes lezen in dit artikel.

Zet het volgende in functions.php:

Deze code roept de div class “succesbox” op als je [succesbox] gebruikt in een bericht of pagina.

Succesbox stylen in style.css

Nu kun je deze class eenvoudig stylen in style.css. Dit kun je het beste doen in de style.css van een Child Theme zodat je styling niet verdwijnt bij een update van jouw theme.

Voor de succesbox gebruiken wij de volgende code:

.succesbox {
    border: 1px solid #779457;
    background: #CBFF94;
    font-family:Helvetica,Verdana,Arial;
    font-size: 13px;
    line-height: 24px;
    padding: 10px 10px 10px 10px;
    margin-bottom: 20px;
    width: 90%;   
}

Als je dit opslaat zul je het volgende zien als je “[succesbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit ornare congue.[/succesbox]” intypt in een bericht of pagina.

Deze codes kun je nu voor veel verschillende boxen gebruiken. In dit artikel maken we ook nog een waarschuwingsbox.

Variaties maken op de succesbox

Als eerst voegen we de volgende code in functions.php. Je ziet dat ik alleen de “succesbox” heb veranderd heb in “waarschuwingsbox”. Dit kun je dus ook veranderen in bijvoorbeeld “errorbox” of “tipbox”.

Nu wordt de div class “waarschuwingsbox” opgeroepen als je [waarschuwingsbox] gebruikt in berichten en pagina’s. Nu hoeft alleen maar de class te stylen en je kunt [waarschuwingsbox] gebruiken.

.waarschuwingsbox{
    border: 1px solid #9C5C09;
    background: #FFC375;
    font-family:Helvetica,Verdana,Arial;
    font-size: 13px;
    line-height: 24px;
    padding: 10px 10px 10px 10px;
    margin-bottom: 20px;
    width: 90%;   
}

Er is evenals de code voor functions.php weinig verschil met de css code voor de succesbox. Je ziet dat de code nu opent met .waarschuwingsbox in plaats van .succesbox en dat de kleur codes (bijvoorbeeld: #FF0000) zijn veranderd. Bij succesbox waren deze kleurcodes voor een groene kleur, hier zijn deze kleurcodes oranje. Jouw gewenste kleurcodes kun je vinden op deze website.

De waarschuwingsboxziet er zo uit:

Je kunt oneindig veel variërende boxen maken. Denk bijvoorbeeld aan een infobox, notitiebox, errorbox, downloadbox, et cetera. Vond je dit een interessante tutorial en wil je meer tutorials over shortcodes? Plaats een reactie met je mening en subscribe voor onze nieuwsbrief om geen posts te missen.

http://codex.wordpress.org/Shortcode_API

Child Theme maken om je aanpassingen in te doen

Tutorials

In deze tutorial gaan we een Child Theme maken. Een Child Theme maken is niet lastig en kan je later een hoop ellende besparen. In dit artikel ga ik je eerst uitleggen wat een Child Theme is. Daarna gaan we er zelf een maken.

Wat is een Child Theme

Een Child Theme is een theme bovenop een andere theme. Stel je voor dat je Twenty Eleven gebruikt als theme voor je website en je wilt dat de tekst vergroot wordt naar 16px. Je kunt dan in de theme bestanden duiken en in style.css wat codes aanpassen. Probleem opgelost? Helaas, als je zo aanpassingen aanbrengt op je website zullen deze verdwijnen bij een update van de theme.

Om te voorkomen dat je aanpassingen verdwijnen bij een update kun je kiezen voor een Child Theme. Dit is een theme waarbij alleen de style.css verplicht is. In de style.css zet je dan de aangepaste codes. Deze zullen niet worden verwijderd als je de basistheme update.

Een Child Theme maken

Om een Child Theme te maken moet je toegang hebben tot je WordPress bestanden. Log in met bijvoorbeeld FTP en ga naar je wp-content folder. Ga in de folder ’themes’ en maak zelf een nieuwe folder aan. In dit voorbeeld gaan we een Child Theme maken voor Twenty Eleven. Geef je folder een herkenbare naam. Ik geef hem nu ’twentyeleven-child’.

Tip: Onthoud hoe je basistheme heet in de ’themes’ folder. Heet je theme op de WordPress dashboard bijvoorbeeld Twenty Eleven, in de folder ’themes’ heet hij ’twentyeleven’. Let hier dus goed op.

Nu moeten we een bestand toevoegen aan de twentyeleven-child folder. Open een text-bewerker (zoals Kladblok of een html-editor, géén Word of iets dergelijks) en voeg de volgende code toe:

/*
Theme Name:     Twenty Eleven Child
Theme URI:      https://www.wphulp.nl/
Description:    Child Theme voor Twenty Eleven 
Author:         Marijn Bent
Author URI:     https://www.wphulp.nl
Template:       twentyeleven
Version:        1.0
*/

Voordat je dit kunt gebruiken moet je nog een aantal dingen aanpassen. Als eerste kun je de naam veranderen. Het maakt niet uit wat je hier typt. Verder kun je de theme url, beschrijving, auteur en auteur url aanpassen. Let wel even op bij ‘Template’. Zet hier de naam neer van de theme die je in de map ’themes’ zag. Als je hier een typfout maakt dan werkt je child theme niet. Doet deze het dus niet aan het eind van dit artikel, check dit als eerst.

Nu je alles hebt aangepast kun je het bestand opslaan als style.css en uploaden naar je server. Je zult de theme nu kunnen activeren onder ‘Weergave’ –> ‘Thema’s’. Als je nu naar je website gaat zul je zien dat dit niet is zoals jij wilde. De opmaak is helemaal weg. Om je theme weer te laten functioneren zoals hij eerst deed moet je nog een regel code toevoegen aan je style.css.

@import url("../twentyeleven/style.css");

Weer geldt, verander ’twentyeleven’ met de naam van de theme die je onder ’themes’ zag en plak deze code onder de informatie van net. Je style.css ziet er nu zo uit:

/*
Theme Name:     Twenty Eleven Child
Theme URI:      https://www.wphulp.nl/
Description:    Child Theme voor Twenty Eleven 
Author:         Marijn Bent
Author URI:     https://www.wphulp.nl
Template:       twentyeleven
Version:        1.0
*/

@import url("../twentyeleven/style.css");

Als je dit bestand nu upload naar je server en naar je website gaat, zul je zien dat hij er nu weer uitziet zoals normaal.

Nu kunnen we beginnen met het toevoegen van je eigen CSS. Heb je weinig verstand van CSS? Download dan de browser Google Chrome. In de geanimeerde afbeelding hieronder zie je hoe je de browser kunt gebruiken om aan de goede code te komen.

Met CSS code kun je erg veel doen. Heb je hulp nodig, reageer hieronder of stuur een email via de contact pagina.