Custom CSS och Avancerade designinställningar

Det händer såklart även i Squarespace att man ibland vill ändra saker i designen som det inte finns inställningar för i Style Editor. Hur gör man då?

CSS to the rescue! CSS är det programmeringsspråk som den utseendemässiga delen av webbinnehåll är kodad i, så som storlek, avstånd, marginaler, typsnitt och färger.

Jag är t.ex. missnöjd med färgen på navigationsmenyn på min mobilsajt:

Jag gillar inte att den är svart utan vill ha den i någon av färgerna från min grafiska profil, men jag kan inte ändra på detta i Style Editor. Så jag tar saken i egna händer genom att plocka fram ett verktyg som finns i de flesta webbläsare. I Chrome som jag använder heter detta verktyg "Developer Tools."

Screen Shot 2018-01-23 at 15.23.47.png

Tips: I Firefox kommer du åt ett liknande verktyg genom Tools > Web developer > Inspector. I Safari och Internet Explorer ser verktyget lite annorlunda ut och fungerar även annorlunda så där är det bäst att du googlar och provat dig fram. Du kan också installera en extension som finns till flera browsers och heter "Firebug".

Developer Tools är en ruta som kommer upp på skärmen, där jag kan inspektera koden som sidan jag tittar på består av:

Högst upp i vänsterhörnet av Developer Tools-fönstret finns en liten knapp (en ruta med en pil i) som, när du klickat på den, låter dig klicka på vad som helst på skärmen och se koden för det elementet. Jag använder denna funktion för att se vilken CSS min mobilmeny lyder under:

I den översta halvan av Developer Tools ser jag html-koden, alltså den slags kod som faktiskt skapar de olika komponenterna (eller "elementen") av sidan. Där är raden html som motsvarar menyn markerad. "sidecarNav" heter elementet. I den nedre halvan av fönstret ser jag vilka CSS-regler (varje rad CSS är en regel som berättar hur något ska se ut) som påverkar det här elementets utseende. I den listan ser jag "background-color: #211b17" med en liten ruta som visar färgen. Där har vi regeln som styr bakgrundsfärgen på menyn.

Det fina med Developer Tools är att jag kan teständra CSS direkt på sidan genom att helt enkelt skriva in något annat på den där raden:

Så jag skriver in färgkoden för en av mina färger och vips så byter menyn färg! Bara tillfälligt dock, om jag uppdaterar sidan så kommer koden ställas tillbaka och färgen vara svart igen. För att menyn ska byta färg permanent måste jag lägga in regeln i Squarespace. Men nu vet jag iallafall att det är den här regeln jag ska ändra och hur resultatet kommer bli. Jag kopierar partiet med CSS för "sidecarNav":

Var lägger jag in min CSS-kod då? Jo i Design-menyn, under "Custom CSS":

I rutan klistrar jag in koden jag kopierat, men jag behåller bara namnet på elementet och den regel jag vill ändra. Och där byter jag ut min färgkod.

Tre saker att tänka på med CSS:

  1. Var supernoga med att kopiera namnet på elementet exakt och se till att det börjar med antingen en punkt eller ett # som i listan i Developer Tools. Minska lilla fel, t.ex. om en bokstav är liten istället för stor, så kommer din kod inte att funka.

  2. Varje CSS-regel måste avslutas med semikolon ;

  3. Alla CSS-regler för ett element måste stå inom två måsvingar { } så som du ser på bilden.

Det är inte helt lätt att jobba med CSS, särskilt inte i ett komplicerat system som Squarespace där det redan ligger tusentals rader kod i bakgrunden och påverkar varandra. Ibland tar det längre tid att lista ut vilka regler du ska ändra i för att åstadkomma rätt resultat, och ibland kan ens egen CSS ställa till det på andra delar av sajten som ringar på vattnet.

Om du kommer på dig själv med att sitta i timmar och lägga till regel efter regel med Custom CSS för att reparera skadan efter tidigare småfixar, eller om du försöker ändra på stora delar av designen: Leta efter ett annat template istället som bättre motsvarar det du vill ha. Ju mer egenskriven kod vi lägger in, desto mer instabil och oförutsägbar blir vår sajt. Och själva tanken bakom Squarespace är ju att vi INTE ska behöva sitta och mecka med kod. =)

Egna typsnitt

Låt oss att säga du hittat eller köpt ett typsnitt som inte finns i Squarespace. Hur får du in det på din sajt?

Till att börja med behöver du ladda ner så att du har filen eller filerna för ditt typsnitt. Dessa har oftast filformatet .otf:

Screen Shot 2018-01-24 at 11.16.01.png

Men de kan också sluta med .ttf eller .woff.

Börja med att gå till Design-menyn och in på Custom CSS. Under rutan där du kan skriva in CSS finns en knapp som heter "Manage custom files". Här laddar du upp dina typsnittfiler:

Nästa steg: Skriva lite CSS i rutan ovanför som "installerar" typsnittet på din sajt:

@font-face {
   font-family: 'TypsnittetsNamn';
   src: url('https://lanken-till-din-typsnittsfil.otf');
   font-weight: normal;
   font-style: normal;
}

Typsnittets namn väljer du själv. För att få länken till typsnittsfilen klickar du mellan ' '-tecknen för att ställa markören där, och sen klickar du på "Manage custom files" igen för att visa din fil. Klicka sen en gång på filen så kommer länken till den att klistras in i koden:

Jag har nu laddat upp ett typsnitt, döpt det till "LeagueSpartan" och berättat för Squarespace var det ska leta efter det. Ska vi testa om det funkar?

Jag skriver in en CSS-regel som säger åt Squarespace at använda mitt nya typsnitt i alla mina h1, alltså de största rubrikerna:

h1 {
   font-family: 'LeagueSpartan';
}

Japp! Mina h1-rubriker ("About"-rubriken i det här fallet) har nu det nya typsnittet:

Har du frågor eller funderingar om den här lektionen? Skriv en kommentar nedan!