les 5: Typografie
les 5: Typografie
Gebruik voor lettertypes bijvoorbeeld Google Fonts
Zie alle lettertypes op: https://fonts.google.com/
Plug-in voor Google Fonts in de Customizer = Fonts Plugin
Zie: https://wordpress.org/plugins/olympus-google-fonts/
Handleiding op: https://docs.fontsplugin.com/
CSS (handmatig opmaak aanpassen, dus zonder plug-in)
CSS is de afkorting voor Cascading Style Sheets. Met CSS kun je aangeven hoe HTML elementen weergegeven worden op het internet via de webbrowser. Hiermee kun je dus opmaak regelen, zoals kleuren, afstanden en lettertypes.
Het kan gebeuren dat een tekst vreemd wordt gestyled zonder dat dit je bedoeling is. Je kunt dan in de Tekst editor zoeken naar CSS styles die door de Visuele editor zijn toegevoegd, en de code ‘opschonen’ door bijvoorbeeld de span tags te verwijderen die om een stukje tekst heen staan. CSS is echt code, dus je moet wel weten wara je moet zijn, en wat je kunt aanpassen!
Thema Style Sheets
In WordPress wordt de styling van je teksten bepaald door het thema dat je hebt gekozen. Elk WordPress thema heeft een eigen CSS stylesheet genaamd Style.css. (kun je vinden onder Weergave -> Editor -> rechts helemaal onderin.
Als je in dit bestand iets aanpast, dan wordt de nieuwe opmaak door de hele website doorgevoerd (als het goed is.) En zo kun je ook je eigen opmaak toevoegen en/of opmaak proberen aan te passen.
Veel gebruikte CSS opmaak
belangrijkste kop
Opmaak:
Koppen H1 – H6
(Oranje zijn de alternatieve waarden deze mogen niet blijven staan in het style.css bestand)
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.55em; (getal of percentage )
font-style: normal; (italic – oblique)
font-weight: normal; (bold – lighter)& (100, 200, 300, 400, 500, 600, 700, 800, 900)
color: #6699CC; (# met 6 getallen)
font-variant:normal; (small-caps)
}
of bijvoorbeeld
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-style: normal;
line-height: 10px;
color: #FFFFFF;
}
Verschil pt – px – em – %
ZIE: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
Kleuren (# met 6 getallen):
http://www.handleidinghtml.nl/divers/kleuren/kleuren07.html
Standaard tekst
body,td,th {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12pt;
color: #CC0000;
}
of bijvoorbeeld
body,td,th {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12pt;
color: #CC0000;
}
Standaard tekst in WordPress = Alinea (p)
p {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12pt;
color: #CC0000;
}
of bijvoorbeeld
p {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12px;
background: #333;
color: #517aaa;
}
LINK (a)
a:link {
text-decoration: none; ( Line-through – Overline – Underline)
color: #DEE9F3;
font-size: 1.5em;
}
a:visited {
text-decoration: none;
color: #DEE9F3;
font-size: 1.5em;
}
a:hover {
text-decoration: underline;
color: #274F76;
font-size: 1.5em;
}
a:active {
text-decoration: none;
color: #DEE9F3;
font-size: 1.5em;
}
CSS opmaak aanpassen in WordPress theme Twentyseventeen
(2017) zie ook txt bestand voor code zonder opmaak (is veiliger.)
/* Footer een grijze kleur geven ipv wit */
.site-footer {
background: #999999;
}
/* Opmaak (bruin voor H1 */
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 29pt;
font-style: normal;
line-height: 29pt;
color: #cc6600;
}
/* De code om de credits te verwijderen in thema 2017 */
.imprint {
display: none;
}
/* Opmaak (Rood) voor links, werkt helaas niet */
a {
color: #da1201;
}
.colors-custom .entry-content a {
color: #da1201;
}
/* titel laten verdwijnen */
.entry-title {
display: none;
}
/* eigen CSS opmaak, met eigen class */
/* op website opmaak gebruiken in de codes <p class=”roze-tekst”>bla bla </p> */
.roze-tekst {
font-size: 11pt;
color: #f13290
}
/* eigen CSS opmaak voor een afbeelding */
/* zonder punt de naam border-thin-blue invoeren in veld CSS-klasse van de afbeelding */
.border-thin-blue {
border: #bccfde 1px solid;
}
Eigen CSS opmaak
Twee dingen nodig:
1.
Dit toevoegen aan de juiste tekst in de code (Tekst tab) in een bericht of pagina:
aparte opmaak bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
hi hi hi hihi hi
hi hi hihi hi hihi hi
2.
Deze code toevoegen aan de CSS (Style.css)
.roze-tekst {
font-size: 11pt;
color: #f13290
}
Eigen CSS opmaak 2
Voorbeeld Blauwe rand aan een afbeelding geven.
1.
Invullen bij CSS-klasse van een afbeelding = border-thin-blue
2.
Deze code toevoegen aan de CSS (Style.css)
.border-thin-blue {
border: #bccfde 1px solid;
}
Eigen CSS opmaak 3
De titel in Wp Thema twentysixteen uit zetten
De titel zit in de class = entry-title
2.
Deze code toevoegen aan de CSS (Style.css)
.entry-title {
display: none;
}
Ook in les 5. WordPress thema’s?:
Zie info hier: Voorbeelden van WP thema’s
Plugins voor inhoud van website:
Plugin Easy Google Fonts (werkt met twenty Sixeen in Customizer)
A simple and easy way to add custom google fonts to any WordPress theme without coding. This plugin integrates with the WordPress Customizer so you can preview google fonts on your site in realtime. It’s compatible with any theme.
https://wordpress.org/plugins/easy-google-fonts/
Meer Fonts (lettertypes)
Google Fonts
(Er zitten al Google Fonts in ons voorbeeld van Twenty Fourteen dankzij styles)
Styles plugin = https://nl.wordpress.org/plugins/styles-twentyfourteen/
Ouderwetse tabel: TablePress
Tabel plaatsen op pagina / bericht met shortcode
https://nl.wordpress.org/plugins/tablepress/ – https://tablepress.org/
Kolommen: WP Easy Columns
Niet alle tekst hoeft helemaal van links naar rechts te lopen op 1 webpagina of bericht.
https://wordpress.org/plugins/easy-columns/
Deze kolommen zijn zelf in te stellen met %.