Content en Sidebar scheiden door lijn

Kasper,

Je wordt begrensd door de content en de breedte van de widget

Zie hier een oplossing:[pas waarden aan naar behoefte]

#secondary.widget-area{
   border-left:2px solid #99cc66;
   border-bottom: 2px solid #666666;
   padding-left: 15px;
}

.widget-area, .widget{
   margin-bottom: .4rem !important;
}

h3.widget-title{
  font-family:Pacifico, "Gloria Hallelujah", "Ubuntu Mono";
  font-size: 4em;
  color:#99cc66;
}

Om succesvol te werken aan een website is het belangrijk dat je de basisbeginselen onder de knie krijgt van HTML en CSS. Je hoeft geen expert te worden, maar met wat basiskennis gaat het een stuk makkelijker 😉

NB!
Als je theme een ingebakken optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin. Waarom: de veranderingen in dit css-custom-veld krijgen meetal ‘voorrang’ boven een childtheme.
Je hebt dan toch ook een childtheme nodig, mn. om wijzigingen aan header.php etc. te maken. Advies: Sla de css uit zo’n custom-veld OOK op in je style.css van je childtheme. Want: Dergelijke instellingen blijven niet altijd bewaard bij updates.
Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

== == ==EXTRA info
Zo werkt een [CT] childtheme…
== == ==
Een CT dient er voor om het origineel te scheiden van de aanpassingen die jij als webbouwer maakt.
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.
== == ==
Wat gebeurt er met de CSS [cascading opmaak / stijlblad] een childtheme…

In een childtheme [en CSS] geldt dat de code die als laatste wordt uitgevoerd, het uiterlijk / acties van de site bepaalt.
bijvoorbeeld:

body{ background-color: #ffffff; /*wit*/
       background-color: #000000; /*zwart*/
}

Resultaat: ‘zwart’.
Dat geldt ook als de opmaakkenmerken 100 regels verderop in het stijlbestand staan!

** ** **
Heb je een CT, dan zal EERST het origineel [parent] doorlopen / getoond worden, DAARNA de opdrachten opgenomen in het CHILDtheme. >>Dat gaat RAZENDSNEL: de site ziet er uit als bedoeld in het childtheme.

Belangrijk om te weten…
De site bestaat uit meer dan een bestand als style.css.
Wil je andere zaken aanpassen, bijv de header of footer, dan moet je mogelijk de bestanden header.php en footer.php aanpassen.
Hoe werkt dat…

LAAT de PARENT INTACT!
Kopieer het aan te passen bestand naar de map van het childtheme.
Maak dan de wijzigingen in het betreffende bestand in het childtheme.

== == ==

als ik nu iets wil toevoegen aan style.css dan zet ik dat in het childtheme ,maar als ik nu iets wil verwijderen of veranderen?

De stylesheet van het CT heeft in de basis alleen een ‘kop’ die de koppeling maakt met de parent [het originele theme].
Zolang er niks in staat, gebeurt er niks.

Vervolgens plaats je de gewenste wijzigingen.
Hieronder wat voorbeelden.

Parent:

body {
     font-size: 62.5%; /*grootte van de tekst*/
     background: #fff; /*achtergrondkleur*/
     background-image:url('achtergrond.gif');
        font-family: sans-serif; /*lettertype*/
     line-height: 22px; /*regelafstand*/
     color: #444; /*tekstkleur*/
}

CHILD
Vervolgens hoef je alleen DIE zaken aan te passen of toe te voegen die jij wilt.

body {
     font-size: 45.5%; /*grootte van de tekst kleiner*/
     background: #0000FF; /*achtergrondkleur veranderd*/
     background-image:none; /*achtergrond-afbeelding verwijderd*/
        font-family: universe; /*ander lettertype*/
     line-height: 12px; /*regelafstand kleiner*/
     color: #99cc66; /*tekstkleur appeltjes groen*/
        margin-left:25px; /*marge-links toegevoegd*/
}

Wil je zaken VERWIJDEREN zoals menu-balken, elementen in de lay-out, dan kijk je waar je dat het handigst doet:

• mbv CSS
• door het PHP-bestand aan te passen

Je vertelt niet wat je NIET wilt met een element, maar wat je dan wel wilt

background-image:none; /*achtergrond-afbeelding verwijderd*/

== == ==
Hoe weet je wat je moet aanpassen…

Het zoeken naar welke css / php / HTML je moet aanpassen is een beetje een puzzel.
Gelukkig zijn daar goede gereedschappen voor.

>>
In je browser: rechtsklik in de browser en kies ‘element inspecteren’
Deze gereedschappen laten je ‘onder de motorkap’ van je site kijken.

1. re-klik > element inspecteren
2. Het sub-scherm opent:

* bovenin de webpagina
* het sub-cherm met eigen werkbalkje en iconen
* li-onder: scherm met ‘style | computed | event listeners >>’
* re-onder: stijl= css

3. In de sub-scherm: klik het eerste icoon van links [vergrootglas];
4. Beweeg je muis over de webpagina [en klik]. Hiermee selecteer je een element in de webpagina, om daarmee de code zichtbaar te maken in het sub-scherm
5. In het sub-scherm:

* Links: de HTML-code van het gekozen element
* rechts: de stijl =CSS
* klik in de css en verander de waarde; kleur grootte of voeg een regel toe
* controleer in het deel van de webpagina of het gewenste effect wordt bereikt
* Nee? Druk <F5> verversen browser. Probeer iets anders
* Ja: neem de aanpassing op in de ‘style.css’ van je childtheme
== == ==

Het verhaal van dat childtheme vind ik erg ingewikkeld. Snap dat het belangrijk is dat er bij eventuele updates niks verloren gaat, daarom vraag ik mij af of ik het nu wel goed doe.

’t Is idd. heel belangrijk je aanpassingen te scheiden van het parent theme!
Misschien dat het onderstaande je op weg helpt…
== == ==

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;
   – 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.

== == == lettertype

De titel heb ik ook gedeeltelijk kunnen aanpassen maar als ik probeer om er een ander lettertype van te maken dan lukt dat niet helaas.[…]

== == == goed om te weten over lettertypen
Als website bouwer kan je opgeven welke lettertypen je wilt gebruiken voor je site. Dat betekent echter niet automatisch dat BEZOEKERS van je site altijd dat lettertype ook ZIEN.

Dat komt omdat websites de lettertypen gebruiken die bij de bezoeker van je site op de PC [van de bezoeker] staan. Staat het lettertype van jouw site niet op de PC, dan wordt een vervangend lettertype gebruikt.

Daarom ook is het goede gewoonte om bij de bouw van je site een ‘font-family’ op te geven. Heeft de bezoeker het eerst opgegeven lettertype niet, dan wordt het volgende gebruikt of het daarop volgende etc. Het meest algemene lettertype staat als laatste genoemd;
Bijvoorbeeld:

p {
    font-family: "Times New Roman", Georgia, Serif;
}

Om dit probleem op te lossen kan je lettertypen in je site ‘inbakken’. Zo toont je site zoals jij bedoeld hebt, ongeacht of de bezoeker het betreffende lettertype op de PC heeft staan.
Hier vind je de info:
http://www.w3schools.com/css/css3_fonts.asp
== == ==

Daarnaast zou ik het heel gaaf vinden om een soort balkje achter mijn titel te krijgen die een andere kleur krijgt dan mijn witte achtergrond.

?? welke titel?? Je site wemelt van de titels…;-)
bijvoorbeeld:

• de titel van je website
• de titel boven je pagina’s
• de titel boven berichten
• de titel boven de zijbalk of individuele widgets…

voorbeelden

.site-title{
   background-color:#99cc66;
}
.entry-title{
   background-color:#99cc66;
}
.entry-content h1
   background-color:#99cc66;
}

Kijk eens naar de info hierboven…
[…]Hoe weet je wat je moet aanpassen…

Het zoeken naar welke css / php / HTML je moet aanpassen is een beetje een puzzel.
Gelukkig zijn daar goede gereedschappen voor.

>>
In je browser: rechtsklik in de browser en kies ‘element inspecteren’
Deze gereedschappen laten je ‘onder de motorkap’ van je site kijken.

1. re-klik > element inspecteren
2. Het sub-scherm opent:
[…]