A presentation at JUG Eindhoven by Arjan Abbink
BRACKETS Modern, Powerful & Open source With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It’s crafted from the ground up for web designers and front-end developers. https://brackets.io
Voordelen ü Gratis editor ü Geen hoge system eisen ü Open source dus steeds in ontwikkeling ü Aan te passen aan je eigen wensen met extensies ü Ingebouwde viewer ü Ondanks alle mogelijkheden toch een “eenvoudige” editor
Dowloaden en installeren • Zowel Windows als Mac versie
Joomla! en CSS3 Ik wil graag de look van mijn Joomla! website aanpassen maar waar moet ik beginnen?
Joomla! en CSS3 Wat ga ik verder nog behandelen: • Benodigdheden: Wat hebben we nodig om bestanden te wijzigen. • Mappen: Waar vinden we de CSS bestanden in de Joomla bestandstructuur. • Bestanden: Welke bestanden kunnen/mogen we aanpassen. • Links: Handig links om mee te beginnen.
J3! en CSS3 - Benodigdheden • Lokale webserver. Hiervoor kun je MAMP of XAMPP gebruiken. • Bestandstructuur Gebruik de back-up van je (online) website of een nieuwe installatie van Joomla. • Editor Zoals Brackets (of een andere editor J)
J3! en CSS3 - Mappen • Importeren van je website in Brackets Open map > zoek de htdocs map op van je lokale server > kies de map van de website • Welke mappen hebben CSS bestanden Niet alleen templates hebben css files. Ook modules en componenten (vaak van derde partijen hebben eigen CSS bestanden • Core hacks versus custom CSS Houdt er rekening mee dat je bij een update in een core hack je wijzigingen kwijt raakt. Sommige templates hebben geen custom.css of user.css mogelijkheid en kunnen niet anders aangepast worden als met een core hack
J3! en CSS3 - Bestanden • Plaats van CSS bestanden in Joomla! Je kunt de css bestanden vinden in de map: templates/naam template/css/ • Eigen CSS bestanden Sommige templates staan toe dat je een eigen CSS bestand aanmaakt in de map CSS (zie boven). Meestal genaamd “user.css” of “custom.css”. Check even de documentatie van de template maker (tip Rene!)
J3! en CSS3 - Links Links: • Brackets: https://brackets.io/ • W3schools - https://www.w3schools.com/css/default.asp • Kevin Powell - https://www.youtube.com/kepowob • CSS Reference - https://www.w3schools.com/cssref/default.asp • MAMP: https://www.mamp.info/en/ Tips: Alternate voor Brackets: • Visual Studio Code: https://code.visualstudio.com/ Udemy CSS cursussen: • Abonneer je eerst even op de nieuwsbrief om aanbiedingen te ontvangen. Cursussen worden om de zoveel tijd aangeboden voor rond de $10
Joomla! en CSS3 JUG073
for free. You
can too.