Webmaster’s Reference

(Link naar corryderek)

Referentie info voor webmasters. De oorspronkelijke webmaster (Derek) gaat er vanuit dat de nieuwe webmaster is redelijk bekend met WordPress, Neve, HTML, CSS enz.

Ik (Derek) hou van eenvoud, goed zichtbaar navigatie, niet te veel kleuren, leesbare lettertypes.

Kleuren

  • Koptext-bruin: #ec2507 (kleur van das op ons logo)
  • Link-blauw: #0366d6 (default kleur van WordPress/Neve)
  • Zwart (#000000) en wit (#ffffff)

Beelden

De volgende beelden zijn gebruikt op systeemniveau:

  • Logo512.png; ons logo van 512×512 pixels; gebruikt voor SitePictogram
  • BSD_logo_red.png; ons logo plus site naam; 576×512 pixels, gebruikt voor Header
  • Logo320.png; gecropped (320×512) versie van Logo512 gebruikt voor Header
  • bsd_email.png; screengrab van onze email-adres; voorkomt dat onze email worst “geschraapt” voor spam
  • webmaster.png; idem voor webmaster

Links

Als je beelden invoeg, gaat WP een beeldadres maken in de vorm: https://www.binnenstadduurzaam.nl/wp-content/bla/bla/beeldnaam.jpg; ik vervang dit door ../wp-content/bla enz. Dit voorkomt dat bijvoorbeeld “duurzaam” wordt overal gevonden in een zoek actie. Dit geldt ook voor links binnen de website. Ja, dit is monnikenwerk!

Installatie procedure

  1. Install WP en Neve
  2. Verwijder alle pagina’s, plugins (behalve Akismet), berichten, themes (behalve nieuwste theme (2021), anders gaat WP zeuren)
  3. Gereedschap>Importeren: van inhoud
  4. Installeer plugin Chronological Posts en activeer het
  5. Activeer plugin Akismet (email van webmaster); nu (nov ’20) krijg ik 5–10 spammetjes per dag; Aksimet spaart mij dus 5–10 emails per dag!
  6. Instelligen>Algemeen: voor tijdzone en -notatie
  7. Instellingen>Privacy: privacybeleidspagina=OverOns
  8. Weergave>Menu’s: zet “Primary” als primair, verwijder alle andere menu’s (je mag Social bewaren, ik gebruik het niet op dit moment)
  9. Weergave>Customizer>Layout>Inhoud/Zijbalk: geen zijbalk overal
  10. Weergave>Customizer>Layout>Homepage: Homepage=BinnenstadDuurzaam; Berichten=Blog
  11. Weergave>Customizer>Layout>Blog/Archief>Layout: LIJST
  12. Weergave>Customizer>Layout>Blog/Archief>Sorteren: Title/Meta – Samenvatting
  13. Weergave>Customizer>Layout>Blog/Archief>BerichtMeta: alles uit
  14. Weergave>Customizer>Layout>EnkelBericht: Titel-Navigatie-Inhoud-Reacties
  15. Weergave>Customizer>Header>Logo>Algemeen>Weergave: Titel-Logo. Logo=Logo320, niet cropped; Sitetitel & Ondertitel (Tagline) aan; Breedte-logo=70-60-50 (breed-middel-smal); Pictogram=Logo512
  16. Weergave>Customizer>Header>Logo>Layout: alles centreren
  17. Gebruik Header Builder voor Logo-Menu-Zoek (breed) en Logo-MenuIcoon-ZoekIcoon (middel en smal). Zoekicoon-gedrag: Minimaal; Zoekicoon-grootte 25.
  18. Weergave>Customizer>Header>Stijl>TextKleur: #36ab3e
  19. Weergave>Customizer>Header>Menu: Layout=gecentreerd; Stijl=Onderstreep en altijd menu-blauw (#0366d6)
  20. Weergave>Customizer>Footer>Copyright als volgt (kopie-plak, want je kan geen “&” intikken):
    <p>© {current_year} {site_title} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a id="bottom" style="color:#0366d6" href="#">Naar&nbsp;boven</a></p>

    (dat zijn tien nbsp’s); dit zorgt voor een goede layout ook op kleine schermen
  21. Weergave>Customizer>Footer>Kleur: zwart-op-wit
  22. Weergave>Customizer>Kleuren: Afbeelding kerkbrugje_vaal; schermvullend
  23. Weergave>Customizer>Typografie>Koptext>Familie: Mogra (mijn enige ‘onleesbare’ lettertype; wordt omgezet voor andere koptexten in ExtraCSS.)
  24. Weergave>Customizer>Typografie>Koptext>h1>FontSize : 2.5 – 2.0 – 1.5 (breed-middel-smal)
  25. Weergave>Customizer>Typografie>Algemeen>FontSize: 16-15-13 (breed-middel-smal)
  26. Weergave>Customizer>Typografie>Algemeen>LineHeight: 1.6-1.5-1.3 (breed-middel-smal)
  27. Weergave>Customizer>ExtraCSS: als volgt (kopie-plak is goed):
    h1 { color: #36ab3e; }
    h2, h3, h4, h5, h6 {
      color: #810923;
      font-family: serif;
    }
    a { font-weight: 700; }
    .big { font-size: 1.3em; }
    .author { text-transform: none!important; }
    .site-title {
      line-height: 1.0;
      font-family: Mogra!important;
      font-size: 1.8em!important;
    }
    .entry-content { color: #000000; }

Oud (nov’20) versie

(Link naar corryderek)

Referentie info voor webmasters. De oorspronkelijke webmaster (Derek) gaat er vanuit dat de nieuwe webmaster is redelijk bekend met WordPress, Neve, HTML, CSS enz.

Ik (Derek) hou van eenvoud, goed zichtbaar navigatie, niet te veel kleuren, leesbare lettertypes—behalve de pagina-titel (want niemand leest dat).

Kleuren

  • BSD-groen: #36ab3e (een kleur Derek vindt leuk)
  • Koptext-bruin: #810923 (idem)
  • Link-blauw: #0366d6 (default kleur van WordPress/Neve)
  • Zwart (#000000) en wit (#ffffff)

Beelden

De volgende beelden zijn gebruikt op systeemniveau:

  • Logo512.png; ons logo van 512×512 pixels; gebruikt voor SitePictogram
  • Logo320.png; gecropped (320×512) versie van Logo512 gebruikt voor Header
  • kerkbrugje_vaal.jpg gebruikt voor achtergrond. Een mooi afbeelding lichter gemaakt in PictureManager
  • bsd_email.png; screengrab van onze email-adres; voorkomt dat onze email worst “geschraapt” voor spam
  • webmaster.png; idem voor webmaster

Links

Als je beelden invoeg, gaat WP een beeldadres maken in de vorm: https://www.binnenstadduurzaam.nl/wp-content/bla/bla/beeldnaam.jpg; ik vervang dit door ../wp-content/bla enz. Dit voorkomt dat bijvoorbeeld “duurzaam” wordt overal gevonden in een zoek actie. Dit geldt ook voor links binnen de website.

Installatie procedure

  1. Install WP en Neve
  2. Verwijder alle pagina’s, plugins, berichten, themes (behalve theme 2020, anders gaat WP zeuren)
  3. Gereedschap>Importeren: van inhoud
  4. Installeer plugin Chronological Posts en activeer het
  5. Installeer plugin Akismet en activeer het (email van webmaster); nu (nov ’20) krijg ik 5–10 spammetjes per dag; Aksimet spaart mij dus 5–10 emails per dag!
  6. Instelligen>Algemeen: voor tijdzone en -notatie
  7. Instellingen>Privacy: privacybeleidspagina=OverOns
  8. Weergave>Menu’s: zet “Primary” als primair, verwijder alle andere menu’s (je mag Social bewaren, ik gebruik het niet op dit moment)
  9. Weergave>Customizer>Layout>Inhoud/Zijbalk: geen zijbalk overal
  10. Weergave>Customizer>Layout>Homepage: Homepage=BinnenstadDuurzaam; Berichten=Blog
  11. Weergave>Customizer>Layout>Blog/Archief>Layout: LIJST
  12. Weergave>Customizer>Layout>Blog/Archief>Sorteren: Title/Meta – Samenvatting
  13. Weergave>Customizer>Layout>Blog/Archief>BerichtMeta: alles uit
  14. Weergave>Customizer>Layout>EnkelBericht: Titel-Navigatie-Inhoud-Reacties
  15. Weergave>Customizer>Header>Logo>Algemeen>Weergave: Titel-Logo. Logo=Logo320, niet cropped; Sitetitel & Ondertitel (Tagline) aan; Breedte-logo=70-60-50 (breed-middel-smal); Pictogram=Logo512
  16. Weergave>Customizer>Header>Logo>Layout: alles centreren
  17. Gebruik Header Builder voor Logo-Menu-Zoek (breed) en Logo-MenuIcoon-ZoekIcoon (middel en smal). Zoekicoon-gedrag: Minimaal; Zoekicoon-grootte 25.
  18. Weergave>Customizer>Header>Stijl>TextKleur: #36ab3e
  19. Weergave>Customizer>Header>Menu: Layout=gecentreerd; Stijl=Onderstreep en altijd menu-blauw (#0366d6)
  20. Weergave>Customizer>Footer>Copyright als volgt (kopie-plak, want je kan geen “&” intikken):
    <p>© {current_year} {site_title} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a id="bottom" style="color:#0366d6" href="#">Naar&nbsp;boven</a></p>

    (dat zijn tien nbsp’s); dit zorgt voor een goede layout ook op kleine schermen
  21. Weergave>Customizer>Footer>Kleur: zwart-op-wit
  22. Weergave>Customizer>Kleuren: Afbeelding kerkbrugje_vaal; schermvullend
  23. Weergave>Customizer>Typografie>Koptext>Familie: Mogra (mijn enige ‘onleesbare’ lettertype; wordt omgezet voor andere koptexten in ExtraCSS.)
  24. Weergave>Customizer>Typografie>Koptext>h1>FontSize : 2.5 – 2.0 – 1.5 (breed-middel-smal)
  25. Weergave>Customizer>Typografie>Algemeen>FontSize: 16-15-13 (breed-middel-smal)
  26. Weergave>Customizer>Typografie>Algemeen>LineHeight: 1.6-1.5-1.3 (breed-middel-smal)
  27. Weergave>Customizer>ExtraCSS: als volgt (kopie-plak is goed):
    h1 { color: #36ab3e; }
    h2, h3, h4, h5, h6 {
      color: #810923;
      font-family: serif;
    }
    a { font-weight: 700; }
    .big { font-size: 1.3em; }
    .author { text-transform: none!important; }
    .site-title {
      line-height: 1.0;
      font-family: Mogra!important;
      font-size: 1.8em!important;
    }
    .entry-content { color: #000000; }

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.