Hoe krijg ik de witte balk weg onder in mijn pagina's en berichten

Hi Anneloes,

Schrik niet te erg van de hoeveelheid tekst…;-) Het overgrote deel is uitleg en achtergrond-info. Immers ‘weten wat je doet en waarom’ is veel leuker dan ‘alleen het goede antwoord’. Nu kan je zelf verder…
De uitleg / achtergrondinfo komt eerst… de concrete stappen staan onderaan.
Je kan de info ook overslaan…
Volg de beschreven stappen en je komt vanzelf waar je wezen moet! Vraag gerust als je even vastloopt.

Nu ik het formaat van mijn afbeelding heb aangepast op mijn hoofdpagina, worden al mijn afbeeldingen verkleind en links uitgelijnd van mijn berichten. Zie bv in het menu het kopje, ”MY SERVICES” en ”MY PROJECTS”. Hoe krijg ik deze afbeeldingen weer terug zoals het was? Dus mooi uitgelijnd in het midden en wat groter?

Haha 😉 Dit is een mooie gelegenheid om even iets uit te leggen.
Het sleutelen aan je site is al heel gauw als het trekken aan een breiwerkje. Trek je ergens aan dan heeft dat – als het tegen zit – gevolgen voor het hele breiwerk… Tenzij je gericht en bedachtzaam te werk gaat.

…Beginner / gevorderd / expert…
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 😉 [Een heel klein beetje kennis van PHP helpt ook, maar is doorgaans niet direct nodig]
Zo kan je een gekozen theme makkelijker aanpassen aan je behoeften.

== == == 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 die 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');/*achtergrond-afbeelding*/
        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

OPGELET!!
Aanpassingen in het CSS gelden voor ALLE elementen in je site.

p{
   color:#99cc66; /*tekstkleur appeltjesgroen*/
}

>> ALLE paragraafteksten OVERAL op je site worden groen…, tenzij je expliciet aangeeft dat niet alle, maar alleen die ene tekst groen moet worden…;)

== == == == == == == == == == == == ==
== == == Terug naar jouw situatie…
== == == == == == == == == == == == ==

1) Nu ik het formaat van mijn afbeelding heb aangepast op mijn hoofdpagina, worden al mijn afbeeldingen verkleind en links uitgelijnd van mijn berichten. Zie bv in het menu het kopje, ”MY SERVICES” en ”MY PROJECTS”. Hoe krijg ik deze afbeeldingen weer terug zoals het was? Dus mooi uitgelijnd in het midden en wat groter?

Dat is dus het gevolg van CSS, geldig voor alle gelijke elementen in je site… Hier kan je kiezen uit verschillende aanpakken / methodes; In willekeurige volgorde:

• maak de CSS-code ‘specifiek voor die pagina //dat bericht, / meer gedetailleerd’; zo blijft de opmaak op de overige pagina’s//berichten intact
• gebruik de ‘SuperSlider-Perpost-Code’-plugin om -desgewenst- berichten van eigen css-kenmerken / uitzonderingen te kunnen voorzien:
• gebruik de plaatsing van <div>...</div> om het aan te passen element te isoleren en maak een eigen css-opmaak
• anders…

== == == acties
Hier – in dit geval – plaatsen we een ‘<div>’, maar ’t kan dus ook anders…

1. pas de homepage aan
2. pas de css aan

== == == pas de homepage aan

Is je huidige homepage een pagina die je zelf hebt gemaakt en hebt ingesteld als statische pagina? Doe dan het volgende:

1. log in > het dashboard opent
2. ga naar de homepage > klik ‘pagina bewerken’ [bovenin de menubalk]
3. klik de ‘TEKST-tab’ van de dashboard-editor [re-boven het invoerveld]
4. selecteer en verwijder de gehele inhoud […heus het komt goed…]
5. editor: type
   <div id="home_plaatje"> geef een paar maal een <enter> en type </div>
6. Door bovenstaande <div> te maken, creëer je een blok met de naam ‘home_plaatje’ dat je eigen CSS-kenmerken kan meegeven
7. klik ergens tussen <div id="home_plaatje"> en </div>
8. klik de knop ‘media toevoegen’ [li-boven] > de mediabibliotheek opent
9. klik = selecteer het gewenste plaatje voor je homepage
10. in de zijbalk van de mediabibliotheek: ga naar ‘weergave instellingen bijlagen’
11. stel in: uitlijning – gecentreerd
12. stel in: link naar – aangepaste url
13. geef de url van je MyServices-pagina: ‘http://ann-interiors.com/?cat=4&#8217;
14. stel in: afmeting – kies de juiste maat
15. klik knop ‘in pagina invoegen’

Je ziet nu iets wat er ongeveer zo uitziet:

<div id="home_plaatje">

<a href="http://ann-interiors.com/?cat=4"><img src="http://ann-interiors.com/wp-content/uploads/2015/06/home-pag-shutterstock_148248557.jpg" class="aligncenter size-thumbnail wp-image-558" /></a>

</div>

16. klik ‘publiceren’ sla alle wijzigingen op
17. ga naar je homepage en klik <CTRL-F5> om je browser te verversen
18. controleer het resultaat > de afmetingen kloppen nog niet helemaal… maar het plaatje is klikbaar en gaat naar de my services pagina…Je hebt nu ook vraag 3 opgelost!! 😉

== == == Nu nog de CSS gladtrekken voor de <div id=”home_plaatje”>

19. Open ‘style.css’ van je CHILDtheme
20. voeg de gewenste kenmerken toe aan het element…bijvoorbeeld

#home_plaatje img{
    width:40%;/*pas aan naar wens*/

}

21. HERSTEL nu de maatvoering van de plaatjes op de overige pagina’s door de oude maat weer in te voeren… Was dat niet zoiets als…

img.attachment-post-thumbnail.wp-post-image {
    max-width: 100%; /*haal het eerder toegevoegde  marge-kenmerk weg*/
}

Nu zou de boel op de overige pagina’s ook weer netjes in het gareel moeten zijn…

== == == Titel grootte

h1.entry-title {
   font-size:1.90em; /*pas aan met kleine stapjes*/
}

😉 Tijd voor het favoriete drankje naar keuze…

Veel plezier!

Graag gedaan. Is je probleem opgelost? Vergeet aub niet de thread als ‘resolved’ / ‘opgelost’ te taggen in de rechter zijbalk.