Support » Thema en CSS/opmaak » Box aanpassen in Twenty Sixteen

  • Opgelost berrytenhoven

    (@berrytenhoven)


    Hallo WordPress fans,

    Ik ben een site voor iemand aan het maken in Twenty Sixteen. Ik zie weinig van de achtergrond en zou graag de box (waar de teksten instaan) een stuk versmallen. Alle widgets uit de sidebar gehaald, waardoor er geen sidebar te zien is (hoeft van mijn ook niet).

    Iemand een idee?

    Alvast bedankt.
    Groetjes,
    Berry ten Hoven

15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)
  •  div#primary {
        max-width:25% !important;/*pas waarde aan naar wens*/
        }
    
    aside#secondary {
        visibility:hidden;
    }

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

    Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld ‘customizer’ of een 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.

    == == == 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>.
    == == ==

    == == == 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. ==

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

    Loop je vast? Vraag gerust.

    Thread starter berrytenhoven

    (@berrytenhoven)

    Hoi W.P. Info,

    Bedankt. Ik heb de Simple Custom CSS plugin erop gezet. Daar kan ik nu de code inplaatsen.
    Wat vermeld ik nou precies in de code:

    div#primary {max-width:25% !important;/*pas waarde aan naar wens*/}
    aside#secondary {visibility:hidden;}

    Ik ben heel onervaren. Op de plek ‘*pas waarde aan naar wens*’ vul ik afmetingen in?

    Zou je misschien een voorbeeld kunnen geven met een afmeting erin, waardoor ik de afmetingswaarde makkelijk kan veranderen door alleen wat cijfers te veranderen.

    Bedankt alvast.

    Groetjes,
    Berry

    Ben niet W.P. Info maar kan je wel vertellen dat de 25% de afmeting is. De /* zorgt er voor dat de browser niet leest wat daar achter staat en de */ geeft de browser weer toestemming om verder te lezen. Door op die manier commentaar toe te voegen weet iemand nog wat er staat op die plek en dat is best makkelijk bij hele grote css bestanden.

    Thread starter berrytenhoven

    (@berrytenhoven)

    Hoi Dekjam,
    Bedankt voor deze reactie.

    Als ik de code exact invoer en dan aan het percentage sleutel dan wordt de tekst smaller (of breder), maar ik wil graag meer achtergrond (mooie wolkenfoto) zien en minder het ‘vlak’ waar de tekst in staat. Ik heb een mooi achtergrond waar links en rechts maar een beetje van te zien is.
    Misschien klopt mijn benaming ‘box’ niet hoor.

    Eigenlijk is het het vlak waar alles in staat. Het logo, het menu, sidebar (die ik niet wil weergeven) en de tekst. Graag dit ‘hoofdveld’ smaller. Kon ik maar een schermafbeelding laten zien. Twenty sixteen heeft standaard dit grote veld waar alles instaat.

    Groetjes
    Berry

    Hi Berry,

    ’t Is een beetje verwarrend wat je bedoelt…. maar laat ik eens kijken of ik er uit kom…

    – je hebt een [relatief kleine] achtergrondafbeelding
    – de achtergrondafbeelding is maar voor een deel te zien
    – je wilt de achtergrond
    ? A. groter maken a1. breder a2. hoger a3. beide a4 anders…
    ? B. naar de voorgrond halen / wat ‘er voor zit niet zien’
    ? C. anders…

    Het is moeilijk iets aan te passen, dat je niet kan zien…;-))
    Geef daarom de URL van de website, dan kunnen we ZIEN wat je bedoelt, en je nauwkeuriger adviseren.

    Thread starter berrytenhoven

    (@berrytenhoven)

    Hoi W.P. Ginfo,

    Het betreft deze site: http://stewardessin1dag.nl
    Ik heb hem effe online gezet. Ik wil dus graag links en rechts meer wolken zien en dus minder wit vlak.
    Maar misschien is dit lastig in Twenty Sixteen.

    Bedankt alvast voor het kijken.

    Groetjes,
    Berry

    Hi Berry,

    Ik zie alleen nog… ‘Even geduld nog, we stijgen bijna op.’

    Thread starter berrytenhoven

    (@berrytenhoven)

    Hoi,
    Sorry, dan heb ik per abuis de Coming soon plugin weer geactiveerd.
    Nu moet het lukken: http://stewardessin1dag.nl
    Bedankt voor het kijken.

    Groetjes

    Berry

    Thread starter berrytenhoven

    (@berrytenhoven)

    Hoi, Nog een vraagje nu je toch eenmaal gaat kijken ;-).
    Ik vind de ruimte tussen de Kopafbeelding en de H! wat veel. Hoe kan ik (met een code) deze witruimte iets minder maken?

    Erg bedankt!

    Groetjes,

    BErry

    Lekker met ze tweeën je proberen te helpen 😉

    Als je nu eens Chrome installeert en de website opent dan kan je door middel van een rechtermuisklik kiezen voor de optie “Inspecteren”.

    Zoek dan eens de volgende code <div id="page" class="site"> op in het scherm wat aan de onderkant is verschenen. Als je die aanklikt/selecteert zie je aan de rechterkant `@media screen and (min-width: 44.375em)
    .site {
    margin: 21px;
    }` verschijnen. Klik eens op de 21px achter margin en je kan er in typen. Probeer nu eens 50px uit achter de 21px.
    Dan krijg je dus zo iets `@media screen and (min-width: 44.375em)
    .site {
    margin: 21px 50px;
    }`
    De ruimte aan de linker en rechterkant worden nu groter want daar zorgt die 50px voor. Op die manier kan je uittesten wat je graag wilt. Als je dat hebt wat je mooi vind kan je het juiste getal plaatsen in je style.css want je past niets aan op deze manier maar test het alleen maar uit.

    En in Chrome zie je meer dan in andere browsers met het inspecteren want deze browser laat ook de css code zien die voor een andere browser geschikt is.

    Thread starter berrytenhoven

    (@berrytenhoven)

    Hoi,

    En welke code kan ik nou in de Simple Costum CSS zetten en aanpassen?

    Bedankt

    Groetjes,
    Berry

    En welke code kan ik nou in de Simple Costum CSS zetten en aanpassen?

    De ene en / of de andere of beide.

    Probeer gerust alle opties uit.
    Bevalt ’t niet? Geen probleem. Verwijder de aanpassing of geef een nieuwe waarde in en sla op.
    Druk op <CTRL-F5> om je browser te verversen en kijk of de boel verbeterd is…

    == == ==
    Aangezien je site nog niet ‘zichtbaar’ is, kunnen we niet goed adviseren over het aanpassen van het uiterlijk van je site… ;-(

    Thread starter berrytenhoven

    (@berrytenhoven)

    Hoi hoi,

    Dit kan ik dus letterlijk in de simple costum CSS plakken:

    @media screen and (min-width: 44.375em)
    .site {
    margin: 21px 50px;

    De site had ik weer offline gezet omdat klanten hem nog niet mochten zien. Ik heb de site nu in handen gegeven van mijn opdrachtgever, waar ik de site voor gemaakt heb. Zij gaat nu eerst andere dingen checken (tekst etc). Als hij volledig online gaat kom ik nog even op deze vraag terug.

    Bedankt tot zover.
    Groetjes,
    Berry

    Thread starter berrytenhoven

    (@berrytenhoven)

    Hoi W.P. Ginfo,

    Het is mij nog steeds niet gelukt. Heb nu een eigen site gemaakt in hetzelfde thema. Zal hem effe online houden. Is nog niet af, maar ook nog niet bij iemand bekend.

    Ik zou dus graag het grote veld iets versmallen link en rechts. Het is zo breed! Weet niet of dit kan. Het WordPress thema twenty sixteen heeft nu een Simple CSS in het thema waar ik en code neer kan zetten. Code in bovenstaand bericht ik gekoppeld aan Google toch?

    Ook zou ik graag weten hoe ik mijn blogjes mooi onder elkaar krijg in dit thema met de uitgelichte afbeeldingen links. Die tekst links (voor reacties) mag wel weg.

    Mijn site: http://www.copyvoorcoaches.nl

    Bedankt alvast. Hopelijk kun je er vanmiddag nog even naar kijken.

    Groetjes,
    Berry

    Heb er even naar gekeken maar mijn antwoord blijft hetzelfde als ik al eerder heb gegeven. En als je nu doet wat je twee berichten terug voorstelde dan komt alles goed.

15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)
  • Het onderwerp ‘Box aanpassen in Twenty Sixteen’ is gesloten voor nieuwe reacties.