J3.x

Eigen CSS toevoegen in Protostar

From Joomla! Documentation

This page is a translated version of the page J3.x:Adding a custom CSS with Protostar and the translation is 100% complete.

Other languages:
Deutsch • ‎English • ‎français • ‎Nederlands
Joomla! 
≥ 3.5

Het Protostar template CSS kan direct gewijzigd worden in Templatebeheer. Het probleem met wijzigen van core-bestanden naar eigen behoefte (Joomla of een extensie), is dat ze overschreven worden door een update en door de Joomla update component. Om dus te voorkomen dat CSS aanpassingen keer op keer toegevoegd moeten worden, is hier een eenvoudige oplossing, welke geïmplementeerd is sinds Joomlaǃ 3.5.

Pas het template veilig aan

  • Ga naar Extensies    Templates en opnieuw Templates (direct menu, of linker zijbalk). De standaard weergave is Stijlen, wees voorzichtig.

J3x admin templates manager templates-nl.png

  • Open dan het template Protostar, klik op Protostar gegevens en bestanden.

Maak een Nieuw bestand user.css aan

  • Klik op de Nieuw bestand knop
  • Het opent een modaal venster, selecteer de locatie van het bestand, hier de css map links
  • Type user in het naam veld
  • Selecteer css als bestandstype

J3x admin templates manager customise create new css-nl.png

U bent nu in de code bewerker en u kunt uw eigen code hier plaatsen. U hoeft hier alleen de wijzigingen te plaatsen. J3x admin templates manager edit user css-nl.png

  • Opslaan en klaar bent u!

U ziet het toegepast op uw pagina bij Developer tools van Firefox of Chrome. Firefox developer tools inspect user css-en.png

Tip

Zoals bij iedere override, zijn we er niet zeker van in welke volgorde bestanden zullen worden geladen. En met CSS optimisers en compressors, wordt het misschien niet zoals we willen. We moeten dus Specificity in onze CSS declaraties gebruiken. Dit is hier goed gedocumenteerd

Stop hand nuvola.svg.png
Waarschuwing

De bestandsnaam moet zijn user.css en nietcustom.css, zoals het gebruikt wordt in sommige content bewerkers.

Zie de discussie op GitHub voor meer details

https://github.com/joomla/joomla-cms/pull/4211#issuecomment-55096315