Meer ruimte tussen widgets en widget centreren

== == == tussenruimte widgets

.side-widget {
  padding: 1px 2px 0 20px;
  margin-bottom: 40px;/*pas aan naar wens*/
}

== == == centreren ‘inschrijven’-widget

form#subscribe-blog-blog_subscription-2 {
    text-align: center;
}

== == == WAT NU TE DOEN MET DEZE CODE…

Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

Alternatief: Voeg bovenstaande code toe aan style.css van je CHILDtheme.
Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.

Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

== == == Heb je nog geen childtheme?

1. installeer en activeer ‘one click childtheme’-plug-in
2. activeer de originele theme
3. Dashboard > weergave > child theme
4. beantwoordt de vragen op het scherm
   >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
5. Activeer het childtheme.

==

6. om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
   – Maak je aanpassingen in style.css van het childtheme;

• Gebruik een FTP-programma bijvoorbeeld filezilla om je site te benaderen
• open de map van je childtheme
• gebruik een code-editor bijv. ‘NOTEPAD++’ [gratis] om het bestand ‘style.css’ van je childtheme te bewerken
• voeg bovenstaande code toe aan ‘style.css’ van je childtheme > sla alle wijzigingen op
• UPload de aangepaste ‘style.css’ naar de map van je childtheme [en overschrijf]
• browser: druk <CTRL-F5> om je browser te verversen
• bekijk het resultaat

– mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.

== == == Extra

Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen,rechtsklik en kies ‘element inspecteren’.

Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren, layout etc. aanpassen.

== == == ik wil echt GEEN childtheme [en begrijp het probleem van het aanpassen van het originele theme…]
Zet de bovenstaande code dan ONDERAAN het bestand ‘style.css’ van je thema. Ververs je browser <CTRL-F5>.
== == ==

Deze code is uitgeprobeerd op jouw site en zou moeten werken…;-)
== == == aandachtspunten

• Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.

— — —

• plaats de code in ‘style.css’van je childtheme

— — —

• gebruik je geen childtheme, plaats de code ONDERAAN de ‘style.css’ van je [parent]theme

— — —

• werkt ’t nog niet…? Pas ’t dan als volgt aan….

  .side-widget {
    padding: 1px 2px 0 20px;
    margin-bottom: 40px !important;/*pas aan naar wens*/
  }

  == == == centreren ‘inschrijven’-widget

  form#subscribe-blog-blog_subscription-2 {
      text-align: center !important;
  }

Laat me weten of ’t lukt…

Ik plaats mijn wijzigingen in CSS stylesheet editor. Dit zou moeten kloppen toch?

== == == zo doe ik het…

• Gebruik een FTP-programma bijvoorbeeld filezilla om je site te benaderen. De webhost heeft je ongetwijfeld de FTP-inloggegevens gestuurd…
• open de map van je childtheme bijv. ‘..//wp-content/themes/childAdelle’ // als je geen CT gebruikt, ga naar de [parenttheme]… ‘../wp-content/themes/adelle’
• gebruik een code-editor bijv. ‘NOTEPAD++’ [gratis] om het bestand ‘style.css’ van je [child]theme te bewerken
• voeg bovenstaande code toe aan ‘style.css’ van je [child]theme >
  OPGELET!!! PLAATS DEZE CODE ONDERAAN HET CSS-bestand
• sla alle wijzigingen op
• her-UPload de aangepaste ‘style.css’ naar de map van je [child]theme [en overschrijf]
• browser: druk <CTRL-F5> om je browser te verversen
• bekijk het resultaat

== == == alternatieve code
Werkt bovenstaande nog niet naar tevredenheid, probeer dan het volgende:
NB! Plaats ONDERAAN ‘STYLE.CSS‘

form#subscribe-blog-blog_subscription-2 {
    text-align: center !important;
    margin-top: 50px !important; /*pas waarde aan naar wens*/
}

== == == extra

Als je wilt testen of je aanpassingen van je stylesheet werken, maak dan eens tijdelijk een eenvoudige toevoeging, onderaan….

Bijvoorbeeld:

.post-content {
    background-color: #99cc66;
}

Als de test ‘slaagt’, kleurt de ACHTERGROND VAN JE CONTENT / berichten ‘appeltjesgroen’.
Nu weet je dat ’t werkt… of niet…