Musicus CSS-sjablonen

Aanpasbare muzikanten-CSS-templates voor artiestensites

Bezoekers beoordelen de site van een muzikant op de kleuren en hoe albumhoezen zijn uitgelijnd, vaak nog voordat ze op afspelen drukken. Muzikanten-CSS-templates worden geleverd met die visuele regels al ingesteld voor release-rasters en concertoverzichten. Het is jouw taak om ze af te stemmen op de eigen foto's en het artwork van de artiest. De catalogus bevat ontwerpen voor jazzartiesten en rockbands, en je kunt ze allemaal restylen voor een andere act.

Eerst de compositie, dan de restyling

De compositie is het moeilijkste onderdeel om later te wijzigen. Stel dat een ontwerp een brede foto combineert met een raster van releases en jouw materiaal er grotendeels hetzelfde uitziet. In dat geval vervang je vooral afbeeldingen en tekst, en pas je een paar stijlwaarden aan. De layout blok voor blok opnieuw opbouwen betekent meestal dat het startpunt verkeerd was. Het merendeel van de resterende styling heeft betrekking op een paar herhaalde onderdelen:

• Releasekaarten, waarbij hoesgrootte, de tussenruimte tussen hoezen en titelplaatsing bepalen of een reeks singles er verzorgd uitziet.
• Concertlijsten, die een datum nodig hebben die in één oogopslag leesbaar is en een locatieregel die netjes afbreekt.
• Knoppen zoals "Luisteren" en "Tickets kopen", waarvan de hover- en focus-states één accentkleur moeten volgen.

Wanneer herhaalde kaarten één klasse delen, past een enkele CSS-wijziging elke release tegelijkertijd aan.

Hoesrasters die netjes omslaan

Op een telefoon vouwt een breed raster van hoezen zich meestal op in minder kolommen. Een lange tournaam moet bovendien afbreken zonder dat er één woord eenzaam op een eigen regel blijft staan. Op een laptop vallen knoppen naast een datum er vaak onder, dus moet je de tussenruimte daartussen aanpassen. Met de responsieve modi van Nicepage kun je lettergroottes en marges voor tablets en telefoons afzonderlijk instellen. Muzieksites combineren vaak een antracietgrijze achtergrond met felle concertfoto's, en kleine bijschriften verliezen meestal als eerste hun contrast.

Aangepaste regels, daarna een laatste test

Wanneer visuele bedieningselementen niet toereikend zijn, kun je aangepaste CSS toevoegen aan één element, een pagina of de hele site. Controleer het resultaat in de Voorbeeldweergave op verschillende breedtes, aangezien aangepaste code mogelijk niet zichtbaar is op het bewerkingscanvas. Laad voor een laatste test een vierkante albumhoes en je langste tracktitel in de template. Voeg een donkere livefoto en een boekingknop toe, en bekijk alles op een laptop en een telefoon. Zodra alle vier er goed uitzien, bestaat het resterende werk vooral uit je eigen kleuren en lettertypen.