Support » CSS / opmaak vragen » Content en Sidebar scheiden door lijn

  • Hallo,

    Ik gebruik het thema Twenty Twelve en heb een sidebar. Nu wil ik deze graag d.m.v. een verticale lijn scheiden van de content. Daarnaast zou ik ook nog graag de widgets in mijn sidebar willen scheiden door een horizontale lijn. Is hier een oplossing voor?

15 reacties aan het bekijken - 1 tot 15 (van in totaal 17)
  • #secondary.widget-area{
       border-left:2px solid #99cc66;
       border-bottom: 2px solid #666666;
    }

    Zie hierboven een voorbeeld; Pas aan naar eigen behoefte.

    Plaats bovenstaande code in ‘custom-CSS-veld’ of style.css van je childtheme.

    Super, bedankt voor de snelle reactie! Het lijkt al aardig op wat ik in men hoofd had.

    Nu wil ik graag de verticale lijn wat verder naar links, en de horizontale naar boven/onder. Is er een manier om dat te doen?

    En is het ook mogelijk om de layout van de widget titel in de sidebar aan te passen?

    Alvast bedankt!

    website: http://www.healthplace.nl

    #secondary {padding-left: 10px;}

    Wat bedoel je precies met horizontale naar boven/onder? Wil je dat de rand helemaal om de sidebar heen gaat?

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

    Super bedankt voor je reactie. Het aanpassen van de lijnen in mijn sidebar is gelukt.
    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. Heb de waarde font-family:Pacifico veranderd in: font-family: Verdana, maar er veranderd gek genoeg niks, terwijl als ik de grootte van het lettertype veranderd, deze aanpassing wel lukt.
    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.
    Ik weet niet of ik nu te veel vraag..?

    Tot slot is het overige gedeelte van je antwoord nog een beetje abra cadabra. Ik verander op dit moment alles in style.css. Daarnaast heb ik ook wat aanpassingen in header.php en footer.php gedaan, en dit is tot nu toe allemaal gelukt.

    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.

    Nogmaals bedankt!

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

    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;
      – 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:
    […]

    Alhoewel W.P. Ginfo wel gelijk heeft, begrijp ik dat dit een beetje overweldigend is.
    De suggesties die hij/zij biedt helpen je fouten te voorkomen die je later veel meer werk opleveren om ze op te lossen.

    Maar om een vraag te beantwoorden:

    Die Pacifico-font waar heb je die gevonden? Google Webfonts?
    Als dat zo is, dan zijn daar een aantal oplossingen voor.

    Heb je nog geen childtheme?

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

    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.

    Ik heb een childtheme aangemaakt. Begrijp dat ik daar nu mijn aanpassingen in ga doen. De map style.css is nu nog leuk. Kopieer ik daar het hele bestand style.css vanuit mijn parent theme naar toe? Of alleen het stukje wat ik wil aanpassen?
    En hoe zit het dan als ik wat wil veranderen in header.php? Kopieer ik dat bestand dan ook naar style.css in mijn childthema, of kan ik daar een nieuw bestand voor aanmaken?

    Maar om een vraag te beantwoorden:

    Die Pacifico-font waar heb je die gevonden? Google Webfonts?
    Als dat zo is, dan zijn daar een aantal oplossingen voor.

    Dit lettertype stond in het voorbeeld van het tweede antwoord.

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

    Tot slot nog een korte vraag over het veranderen van het lettertype.
    Waar zet is deze code precies neer en wat is het effect daar dan van?

    @font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
    }

    div {
    font-family: myFirstFont;
    }

    En dan met name de bovenste code? En doe ik nog wat met de url?

    Nogmaals bedankt!

    Ik heb een childtheme aangemaakt. Begrijp dat ik daar nu mijn aanpassingen in ga doen. De map style.css is nu nog leuk. Kopieer ik daar het hele bestand style.css vanuit mijn parent theme naar toe? Of alleen het stukje wat ik wil aanpassen?
    En hoe zit het dan als ik wat wil veranderen in header.php? Kopieer ik dat bestand dan ook naar style.css in mijn childthema, of kan ik daar een nieuw bestand voor aanmaken?

    == == == hoe werkt een ChildTheme CT

    1. Bij het maken en activeren van een CT wordt een map met de naam van het CT aangemaakt; bijv. ‘../wp-content/themes/child_twentytwelve’
    2. IN de MAP van het CT vindt je het bestand ‘style.css’ van het CT
    3. de KOP van ‘style.css’ zorgt voor de verbinding tussen het originele PARENT-THEME en het nieuwe CT
    4. in een nieuw ‘style.css’ van het CT staat dus [nog] verder niets
    5. Vervolgens ga je de gewenste wijzigingen aanbrengen in het CT
    6. dat doe je bijv. door nieuwe CSS-code op te nemen in ‘style.css’ van het CT
    7. En hoe zit het dan als ik wat wil veranderen in header.php? Kopieer ik dat bestand dan ook naar style.css in mijn childthema, of kan ik daar een nieuw bestand voor aanmaken?

    8. wil je ook bijv. veranderingen aanbrengen in php-bestanden?
      >>kopieer het originele php-bestand van het parent theme >> naar de map van het CT
    9. maak nu de wijzingingen in de php-file van het CT
    10. op deze manier blijft de parent intact, terwijl wijzigingen gescheiden zijn

      == == == mijn PARENT THEME is niet meer intact…

      Heb je al eerder wijzigingen aangebracht in het originele Parent Theme??

      Ideaal:

    11. achterhaal de wijzigingen die je eerder hebt gemaakt
    12. kopieer [alleen de gemaakte wijzigingen!!] naar de ‘style.css’ van het CT
    13. let heel goed op

    14. herstel het parent theme door een nieuwe parent te downloaden en ‘style.css van de PARENT TE KOPIEREN NAAR DE MAP VAN DE PARENT en OVERSCHRIJF
    15. Heb je alles goed gedaan? Dan zie je GEEN verschil… immers je hebt de bestaande situatie ‘hersteld’.

    16. NIEUWE wijzigingen plaats je nu gewoon in de map van het CT en ‘style.css’

    Tot slot nog een korte vraag over het veranderen van het lettertype.
    Waar zet is deze code precies neer en wat is het effect daar dan van?

    Zet ‘nieuwe code’ steeds onderaan in ‘style.css’.

    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!

    …’t blijft gewoon puzzelen…

    Oke ik begin het langzaam te begrijpen. Aanpassing doe ik dus alleen nog in het CT en wanneer ik iets in een php bestand wil veranderen, kopieer ik dit hele bestand naar style.css van mijn CT.

    Dan heb ik nog 1 laatste vraagje.
    Doordat ik nu gebruik maak van het CT zijn de aanpassingen die ik in het menu van mijn parent theme heb gedaan verloren gegaan. Dit wil zeggen dat bijvoorbeeld mijn header en achtergrond verdwenen zijn.

    Normaal gesproken past de website zich automatisch aan als ik hem op mijn smart phone open. Echter, als ik een nieuwe header via het php bestand invoeg past de header zich niet aan waardoor het scherm heel breed wordt, en de content heel klein blijft. Nu zou ik dus graag willen dat de header zich ook aanpast aan het formaat van mijn telefoon. Is hier een mogelijkheid voor?

    Doordat ik nu gebruik maak van het CT zijn de aanpassingen die ik in het menu van mijn parent theme heb gedaan verloren gegaan. Dit wil zeggen dat bijvoorbeeld mijn header en achtergrond verdwenen zijn.

    Dat betekent dat je niet alle wijzigingen die je eerder hebt gemaakt zijn overgezet naar je CT.
    >> Controleer wat je bent vergeten om over te zetten.

    == == == alternatief [VERRE VAN IDEAAL]

    Lukt ’t je niet om alle eerdere wijzigingen te achterhalen…

    1. MAAK EEN RESERVE KOPIE VAN BEIDE CSS-BESTANDEN, parent en child
    2. kopieer de oUde versie van ‘style.css’ naar de CT-map [overschrijf]
    3. !!!!!! PLAATS NU ALLE WIJZIGINGEN ONDERAAN DIT CSS-BESTAND!!!!!

    Ook dit is weer gelukt! Echt geweldig hoe je me geholpen hebt. En ben al behoorlijk tevreden over het resultaat: zie
    Healtplace.nl

    Nog 1 laatste vraagje.
    Als ik de header via het standaard menu in WordPress invoeg krijg ik hier een soort zwarte rand omheen. Echter als ik deze via style.css invoeg gaat de afbeelding gewoon op in de achtergrond (zonder rand dus). Maar als ik de website dan op mijn telefoon open past de header zich niet aan aan het formaat van mijn telefoon. (Dit doet hij wel als ik hem in het standaard menu invoeg)

    1. Is er een mogelijkheid om de zwarte rand te laten verdwijnen?
    2. Zo niet, is het dan mogelijk om met behulp van een code de header te laten aanpassen aan telefoon/tablet?

    Fijn dat alles lukt.

    Als ik de header via het standaard menu in WordPress invoeg krijg ik hier een soort zwarte rand omheen.

    Ik heb naar je site gekeken op de PC en telefoon, en zie GEEN zwarte rand. Iets wat ik niet kan zien, laten verdwijnen is heel eenvoudig // moeilijk… ;-))

    Hier -daarom- een ‘educated guess’ over de evt. code die dit ‘oplost’…

    .site-header{
       border:none;/*geen randen*/
       background-color:#ffffff; /*voor 't geval de achtergrondkleur // de default-kleur van de telefoon een probleem is*/'
       width:100%; /*dit zou ook het probleem met vergroten  / verkleinen moeten oplossen*/
    }

    Ik had de header er al via html erin gezet dus vandaar dat je rand niet meer zichtbaar was. Nu heb ik width gebruikt en is de site op men telefoon inderdaad aangepast aan het formaat van mijn telefoon. Alleen is de helft van de header nu buiten beeld.. is hier misschien nog een oplossing voor?

    Alleen is de helft van de header nu buiten beeld..

    waar…? op de desktop, laptop, tablet of telefoon…

    ook hier geldt…

    Ik heb naar je site gekeken op de PC en telefoon, en zie GEEN zwarte rand // rare dingen. Iets wat ik niet kan zien, laten verdwijnen is heel eenvoudig // moeilijk… ;-))

    Ik zou ff niet weten hoe dit ‘blind’op te lossen.

15 reacties aan het bekijken - 1 tot 15 (van in totaal 17)
  • Het onderwerp ‘Content en Sidebar scheiden door lijn’ is gesloten voor nieuwe reacties.