Ondersteuning » Thema en CSS/opmaak » Footer aanpassen

  • Opgelost El Pablo

    (@el-pablo)


    Mijn website: boo-yah.be. Graag zou ik de footer naar mijn hand zetten. Allereerst zou ik graag een extra widget area toevoegen. Ten tweede, als je de website bekijk op in full screen mode, dan rekt de footer content zich uit, het blijft niet gecentraliseerd op de website staan. Is dit voor een php leek zoals mij “gemakkelijk” aan te passen? En hoe dan?

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)
  • Je hebt een website met een grid. De footer zit als enige niet in het grid die een vaste breedte toegewezen krijgt en daarmee dus full-screen oogt/staat. Dit is hoe je footer nu is:

    <footer id="colophon" class="site-footer clearfix" role="contentinfo">
    	<div class="footer-area">
    		...
    	</div>
    </footer>

    Voeg hieraan de eigenschap toe waarbij je aangeeft dat de content gecentreerd staat en een vaste breedte heeft. In jouw template gebeurd dit met een “panel-grid”. Je footer wordt dan als volgt:

    <footer id="colophon" class="site-footer clearfix" role="contentinfo">
    	<div class="footer-area panel-grid"> <!-- add panel grid -->
    		...
    	</div>
    </footer>

    Allicht dien je wat fonts kleiner te maken want dit maakt de content wel een stuk smaller dan het nu is.

    Kom je hiermee uit de voeten?

    Thread starter El Pablo

    (@el-pablo)

    Hoi Ruurd, heb ‘panel-grid’ toegevoegd. De content staat nu inderdaad mooi gecentreerd. Hoewel de twee titels ‘Kantoor Herenthout en Kantoor Bornem’ tussen een h4 tag staan, is de layout van deze titels nu wel veranderd in een h1 layout. Enig idee hoe dit komt en hoe ik dit terug kan veranderen naar een h4 layout?

    Bijkomend heb ik ook de volgende css code ingevoerd om mijn site info container te centreren (Wedesign by Booyah…):

    .site-info.container {margin:auto;} , maar dit schijnt geen effect te hebben. Enig idee hoe dit komt?

    Je copyright balkje:

    <div class="site-info container">
    	<a href="http://boo-yah.be">Webdesign by Booyah!</a>
    	<span class="sep"> | </span> © 2016 All rights reserved
    </div>

    Staat niet gecentreerd door een float die inline in je template staat, dus dat is 1. Tevens staat de content hierin niet gecentreerd vanwege een ‘float-left’ dus dat is 2.

    Kun je oplossen door dit (onderaan) je css toe te voegen:

    .site-info {
    	float: none !important;
    	text-align: center !important;
    }
    Thread starter El Pablo

    (@el-pablo)

    Ok Ruurd, die doet het. Thanks! Vraag ik me wel af hoe ik dat ik de toekomst zelf kan vinden?

    Heb je verder enig idee hoe het komt dat de titels van de widgets in de footer nu in een h1 layout staan?

    Geen dank.

    Die titels worden gedefinieerd in je css dus die kun je daar gewoon aanpassen. Zelfde bestand waar je nu de recente wijzigingen in hebt gemaakt voor het centreren.

    In de toekomst? Door te zoeken 😉

    Thread starter El Pablo

    (@el-pablo)

    Hoi Ruurd, maar waar zoek je dan? Is alles te vinden met het inspector element van Firefox of Google?

    Heb nu de volgende aanpassing gemaakt:

    h4.widget-title {
    font-size:18px !important;
    line-height:19.8px;
    }

    => Gevolg: de titel is nu hoe ik het wil, maar er staat nog steeds een korte witte lijn onder. Enig idee waar ik dat kan vinden/hoe ik dat wegkrijg?

    Idd, de developer toolbar in Chrome. Kun je alle elementen mee identificeren in van je website.

    Let wel op hoe je de H4 definieert. Zoals je het nu doet veranderen alle H4 titels op je site terwijl je alleen de footer wilt aanspreken/aanpassen.

    De witte lijn weghalen en het alleen aanspreken van puur alleen de H4 in je footer doe je als volgt:

    .footer-widgets h4:after { border-bottom: 1px solid transparent !important; }
    Thread starter El Pablo

    (@el-pablo)

    Dus als ik het goed begrijp, wil dit zeggen dat alles wat nog volgt na die h4 tag binnen de div met klasse .footer-widgets deze opmaak zal krijgen?

    Ja, eigenlijk zeg je hiermee dat er achter alle H4 titels (die in de div met class ‘footer-widgets’ staan) een transparante border onder komt.

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)
  • Het onderwerp ‘Footer aanpassen’ is gesloten voor nieuwe reacties.