Share
Wat je gaat creërenIn deze set van twee handleidingen maken we een schuifregelaar om berichten van een aangepast berichttype zo weer te geven dat een conversatie-effect ontstaat tussen twee sprekers in een afbeelding.
In het vorige deel hebben we het berichttype geregistreerd, de schuifregelaars ingesteld en deze aan onze sitekop toegevoegd. Nu moeten we de tekst plaatsen en styling toevoegen.
Om mee te gaan, heb je nodig:
Het voorbeeld waar ik aan werk is een echte site die ik aan het ontwikkelen ben voor een klant, die een kindthema van het thema Responsiviteit uitvoert. Ik heb een kind van het Responsive-thema gemaakt en daaraan een aangepaste stijl toegevoegd, evenals functies in de thema's functions.php het dossier. Je zou dit aan je eigen thema kunnen toevoegen of een kindthema van Responsive zoals ik kunnen maken.
Dit is hoe de site er op dit moment uitziet:
De schuifregelaars zijn er, maar ze zitten op de verkeerde plaats en ze moeten worden gestyled.
Dus in deze zelfstudie doen we het volgende:
Merk op dat ik voor elke quote zojuist een titel als tekst heb toegevoegd. Als u ook postinhoud toevoegt, wordt die ook weergegeven. Zorg er dus voor dat uw aanhalingstekens alleen een titel en geen inhoud bevatten.
Laten we positionering toevoegen aan de schuifregelaars om ze over de afbeelding te leggen.
Open je kindthema's style.css bestand en voeg dit toe:
.tutsplus-sliders position: relative; maximale breedte: 1000 px; marge: 0px auto; .smooth_slider position: absolute;
Dit geeft de div we hebben gemaakt om de relatieve positionering van onze schuifregelaars te behouden en de schuifregelaars hebben daarbinnen een absolute positionering div. Het stelt ook de juiste breedte in voor onze div dus het is gecentreerd met de afbeelding.
Nu zijn de schuifregelaars over het beeld:
Het probleem is dat ze over elkaar heen liggen en dat ze naast de relevante persoon moeten staan. Laten we dat oplossen.
De Smooth Slider-plug-in geeft elke schuif een uniek ID in de opmaak. Dus de schuifregelaar 'Heide' heeft een ID van # smooth_slider_3 en de 'Iain'-schuifregelaar heeft een ID van # smooth_slider_4. We kunnen die targeten om elke schuif correct te positioneren.
Voeg dit toe aan je stylesheet:
# smooth_slider_3 top: 70px; rechts: 90 px; text-align: right; breedte: 250 px; # smooth_slider_4 top: 10px; links: 90px; breedte: 250 px;
U moet de ID controleren die de plugin aan elk van uw schuifregelaars heeft gegeven door de uitvoermarkering te controleren: deze kunnen afwijken van de mijn.
Nu zijn mijn schuifregelaars op de juiste plaats:
Dat ziet er beter uit. Nu om wat styling toe te voegen.
Ik wil het lettertype wijzigen en aanhalingstekens rond de tekst toevoegen.
Laten we eerst een lettertype registreren met Google Fonts. Ga terug naar je thema's functions.php bestand en voeg dit toe:
Accentsconagua
function tutsplus_add_google_fonts () wp_register_style ('googleFonts', 'http://fonts.googleapis.com/css?family=Droid+Serif'); wp_enqueue_style ('googleFonts'); add_action ('wp_enqueue_scripts', 'tutsplus_add_google_fonts');Opmerking: in de broncode zijn er twee lettertypen in wachtrij geplaatst omdat ik elders op de site een ander Google-lettertype heb gebruikt, maar niet voor de schuifregelaars.
Sla je functiesbestand op en ga terug naar je stylesheet. Voeg dit toe:
.smooth_slider h2 font-size: 19px! important; font-family: 'Droid Serif', serif! belangrijk; kleur: # 666633! belangrijk; regelhoogte: 26px! belangrijk;
Ik moest toevoegen !belangrijk naar elke regel, omdat anders de stijl die door de plug-in wordt toegevoegd niet wordt overschreven. Als je dat wilt, kun je de lettertypen bewerken via het instellingenscherm: dat heb ik niet, want daarmee kan ik mijn Google-lettertype niet gebruiken.
Ons lettertype ziet er nu veel beter uit:
Ten slotte wil ik aanhalingstekens rond elk stuk tekst toevoegen om te benadrukken dat de mensen in het beeld geacht worden te praten. Om dit te doen, gebruik ik de voor en na pseudo elementen.
Voeg dit in uw stylesheet toe:
.smooth_slider h2 :: before content: open-quote; .smooth_slider h2 :: after content: close-quote;
Dit zal ons omsluiten h2 elementen in dubbele aanhalingstekens.
Opmerking: sommige oudere browsers ondersteunen dit niet omdat ze geen pseudo-elementen ondersteunen. Ik maak me hier echter geen zorgen over, omdat de schuifregelaars niet essentieel zijn voor de inhoud en het aantal mensen dat deze browsers gebruikt erg klein is.
Sla nu uw stylesheet op en controleer de site:
Fantastisch! Ik heb nu mijn tekst op de juiste plaats met aanhalingstekens eromheen. Mijn cliënt kan nu zoveel koersen toevoegen als ze willen, ze toewijzen aan de juiste schuifregelaars en het gesprek zal doorgaan.
Omdat ik de absolute positionering heb gebruikt, breekt de positie van mijn tekst op kleinere schermen; de lettergroottes moeten ook zo klein zijn dat de tekst onleesbaar is. Dus ik ga een mediaquery toevoegen om de schuifregelaars op kleinere schermen te verbergen.
Eerst zal ik controleren op welk punt de lay-out breekt: deze is ongeveer 900 px breed. Ik moet dus een mediaquery toevoegen aan doelschermen die kleiner zijn dan 900 px breed.
Voeg onder aan uw stylesheet de mediaquery toe:
@media-scherm en (max-width: 900px) .tutsplus-sliders display: none;
Nu verdwijnen de schuifregelaars op kleinere schermen:
Als u dat wilt, kunt u een alternatieve stijl toevoegen aan uw mediaquery voor middelgrote schermen, waardoor de lettertypegrootte iets kleiner wordt en de tekst wordt gepositioneerd.
Als u schuifregelaars voor tekst gebruikt, kunt u interessante effecten toevoegen aan uw site: hier heb ik een conversatie-effect toegevoegd dat over een afbeelding van twee personen wordt geplaatst.
In deze set van twee tutorials, heb je geleerd hoe je dit effect kunt maken door:
U kunt deze techniek gebruiken om overal op uw pagina pop-uptekst te maken - wees creatief!
