Ondersteuning » Thema en CSS/opmaak » Layout & header wp pinboard site

  • Hallo,

    Mijn website is http://www.studereninbuitenland.nl , een child theme van pinboard.
    Ik zou graag nog wat aanpassingen doen op de website, wie wilt mij hiermee helpen? Wat ik wil is het volgende:

    1. Ik wil mijn header image niet boven maar onder de navigatie bar, wanneer ik echter een image toevoeg op een page kan ik de keuze maken om deze WIDE te doen (gehele breedte) en kan ik dus geen sidebars nemen. Ik wil graag eerst de image over de gehele breedte en daaronder nog sidebars.

    2. Als ik een image header onder mijn nav bar zet staat er witte ruimte tussen de nav bar en image, deze witte ruimte wil ik eruit.

    3. Ik wil mijn sidebars graag aanpassen, ze moeten meer opvallen en ik wil er een rand omheen.

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Thread starter rensbuisman

    (@rensbuisman)

    Niemand die mij kan helpen?

    Hoi Rens,

    Als je die foto van die blije studenten standaard op al je pagina’s onder de menublak wilt hebben (even je goed afvragen of je dit wel echt wilt, want misschien gaat zoiets vervelen), kun je deze het beste vast in je theme zetten. Dit kun je doen in je header.php net boven de afsluittag van je header ( </header> )

    Code

    <div class="header-image">
    <img width="100%" height="auto" alt="copy-Header-geslaagde-studenten-e1393962960902.jpg" src="http://studereninbuitenland.nl/wp-content/uploads/2014/03/copy-Header-geslaagde-studenten-e1393962960902.jpg"></div>

    Deze foto overlapt de content, daarom moet de overkoepelende div met id container een grotere marge vanaf de bovenkant krijgen.

    Code in je style.css

    #container {
        margin-top: 600px;
    }

    Speel zelf met het aantal pixels.

    Wil je deze foto alleen op home wilt, dan moet je wat meer doen, maar vertel dit eerst maar.

    groet,
    Lianne

    Rand om je sidebar:

    .page-template-template-sidebar-content-php #sidebar, .page-template-template-sidebar-content-half-php #sidebar, .page-template-template-blog-left-sidebar-php #sidebar, .page-template-template-portfolio-left-sidebar-php #sidebar {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
        border: 2px solid #000000;
    }

    Pas aan: aantal px, solid, dashed etc, en kleurnummer. Zie hier de officiële referentie op w3schools

    Succes!

    Lianne

    Thread starter rensbuisman

    (@rensbuisman)

    Hallo Lianne,

    Bedankt voor je hulp!
    Ik had de border succesvol geplaatst, echter is dit één border die over al mijn boxes/sidesbars geplaatst word. Ik zou graag voor elke box/sidebar een border willen hebben.

    Wat betreft de header snap je ook helemaal wat ik wil, ik zou namelijk inderdaad graag voor elke pagina op mijn website een andere header image willen hebben. Heb je daar ook een code voor?

    Bedankt en mvg,

    Rens

    Je kunt dit op allerlei manieren oplossen. Als het je niet zo uitmaakt welke headerafbeelding bij welk menu-item, je enige eis is dat ie wisselt, kun je deze code gebruiken uit dit blogartikel. Die zet je dan binnen de div die ik in post 3 heb aangegeven. Je kunt de images plaatsen in een speciale map binnen je website (het slimst is om deze in je theme te zetten)

    <div class="header-image">
    <img src="http://path_to_images/headerimage_<?php echo(rand(1,3)); ?>.jpg"
    width="100%" height="auto" alt="image_alt_text" />
    </div>

    Wil je een specifieke per pagina, dan wordt het flink ingewikkelder. Vertel maar of je dit wilt.

    groet,
    Lianne Lambregts

    Je border om iedere widget:

    .widget-area{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
        border: 2px solid #000000;
    }

    Wederom een groet!

    Thread starter rensbuisman

    (@rensbuisman)

    Sorry dat ik zoveel eis maar ik wil inderdaad een bepaalde header image bij een bepaalde page.

    De borders van de sidebars zijn nu goed, de borders sluiten alleen direct aan op de navbar of op de volgende border, hoe kan ik een stukje ruimte tussen de navbar en sidebar en de verschillende sidebars creëren?

    Nogmaals bedankt!

    Oke, zoals aangekondigd, dit is wat ingewikkelder en niet compact uit te leggen.

    Het beste wat je lijkt te kunnen doen is het toevoegen van een widgetarea in je theme in je header.php in de al eerder aangegeven div class header-image. Er vanuitgaande dat je het wilt leren: zie hier een instructie-video, die omslachtig lijkt, maar het wel heel goed uitlegt.

    Als je eenmaal dit hebt, heb je Weergave > Widgets een nieuwe sidebar die je kunt volstoppen met content. Omdat je per pagina een ander plaatje wilt, zul je condities moeten inbouwen. Hier kun je een plugin voor inzetten: Widget Logic. Hoe je dit doet, wordt in dit youtube-je goed uitgelegd.

    Succes!

    Lianne

    Thread starter rensbuisman

    (@rensbuisman)

    Thanks!

    Ik ga er mijn best voor doen, moet ik echter een keer goed voor gaan zitten.

    Succes! Als je serieus met je site aan de slag wilt, is dit de moeite waard!
    gr. Lianne

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Het onderwerp ‘Layout & header wp pinboard site’ is gesloten voor nieuwe reacties.