Vad innebär fasta element i Tumblr?

Fasta element i Tumblr

Fasta element är de delar i ett Tumblr‑tema som förblir på samma plats i webbläsarfönstret när du rullar sidan. Ett vanligt exempel är en sidofält som alltid är synligt, oavsett scrollning.

HTML och CSS i Tumblr‑teman

Allt innehåll i ett Tumblr‑tema styrs av HTML för strukturen och CSS för stilen. Till skillnad från många webbplatser kombineras både HTML och CSS i en enda kodfil som kan redigeras direkt i Tumblr.

Hitta ditt temats CSS

Logga in på ditt Tumblr‑konto och gå till Inställningar via kugghjulsikonen på din dashboard. Välj bloggen du vill redigera, klicka på Redigera i temavärdet, och välj sedan Redigera HTML. Där visas både HTML‑ och CSS‑koden för ditt tema.

Position: fixed‑egenskapen

I temakoden kan du söka efter "position: fixed" (eller "position:fixed" utan mellanslag) med Ctrl‑F. Ett exempel på en fast sidofält är:

#sidebar{position:fixed;}

Denna deklaration gör att elementet med ID‑et "sidebar" förblir i samma position oavsett scrollning.

Placera fasta element

För att justera var ett fast element ligger, lägg till topp-, vänster-, höger- eller bottenvärden i pixlar:

#sidebar{position:fixed; top:20px; right:10px;}

Detta placerar sidofältet 20 pixlar från toppen och 10 pixlar från högerkanten av webbläsarfönstret.

Ändra fast placering

Om du vill flytta ett element kan du ändra dess positionsegenskaper. Exempel:

#sidebar{position:relative; right:20px;}

Här flyttas sidofältet 20 pixlar åt höger från sin normala position, men det påverkar inte flödet av omgivande innehåll. Med "position:absolute" tas elementet bort från dokumentflödet och placeras relativt till det närmaste föräldraelementet med relativ position.

Genom att experimentera med dessa egenskaper kan du skräddarsy vilka element som är fasta i ditt Tumblr‑tema.