Lägg till eller ändra innehåll med css-klassen ::before

27 Nov 2025

Lägg till eller byt ut en text med pseudo-elementet ::beforeIbland kan det vara så att man vill lägga till en text innan ett pris eller helt enkelt byta ut en text. Vi brukar ibland föreslå till våra kunder att man kan använda flaggan "Nyheter" för någonting annat, genom att skiva en annan text för den flaggan, eftersom den enkelt kan slås på och av. I detta exemplet kommer vi dock att byta ut texten för rabatt till en valfri text. Denna lösningen slår igenom i både Produktlistning och på Produktsidan.Länkar:https://www.w3schools.com/css/css_pseudo_elements.asphttps://www.w3schools.com/cssref/sel_lang.phpSteg 1: Identifiera klass och platsIdentifiera vilken klass som ska ha ::before-elementet. Det bästa är att det ligger på samma klass som orginaltexten. Notera att eftersom våra produkter kan ha flera olika flaggor så måste man vara specifik. Tittar man på diven ovanför så kan man identifiera att texten är för "Special-offer", därför är det bra att ta med den klassen så man är helt säker på att man endast byter text på den specifika diven.Steg 2: Lägg till ett ::before-elementNu när vi har identifierat var vi ska lägga in vår nya text samt vet att vi behöver specificera att det endast ska gälla "special-offers"-flaggan så lägger vi till ::before på den sista klassen. För att ett ::before- eller ::after-element ska existera krävs det att vi deklarerar en content: " "; där vi skriver vår nya text. Vi behöver också definiera en font-storlek eftersom vi sedan kommer dölja orginaltexten genom att sätta font-size: 0;Steg 3: Dölja originaltextenNär vi har gjort föregående steg och har vår text på plats så ser vi att originaltexten fortfarande finns kvar. Eftersom vår nya text ny ligger i ett ::before-element som har sin egna styling så kan vi nu justera enbart den standard-genererade texten. Istället för att markera vår ::before så går vi tillbaka till klassen som vi identifierade i Steg 1 och sätter font-size: 0; samt display:block;. Eftersom vi i Steg 2 satte en egen text-storlek på vårt ::before-element så tar detta element INTE upp font-size: 0 utan behåller sin storlek som vi satte i Steg 2.CSS för olika språkOm man har en sida med olika språk krävs det att man CSSar in en ::before för varje språk. Detta gör man enklast genom att använda :lang(sv) innan sina klasser.Exempel::lang(en) .tws-article-labels--special-offer .tws-article-labels--label-text::before

Skapa en "sticky header" i Abicart

27 Nov 2025

Kompletta din webbutik med en "sticky header" i Abicart! Med en sticky header kan dina kunder enkelt navigera på din webbplats och hitta de produkter som de letar efter. Abicart erbjuder en lättanvänd och anpassningsbar sticky header som är perfekt för att förbättra användarupplevelsen. Testa det idag och se resultatet!En "sticky header" är en typ av webbdesign där en header-sektion på en webbsida förblir synlig och fast på skärmen, även när användaren rullar ner på sidan. Detta kan vara användbart för att ge användaren enkel åtkomst till navigationslänkar eller annan viktig information, utan att behöva scrolla upp för att hitta den igen.För att göra din header sticky i Abicart, kan du lägga till den givna CSS-koden i din webbplatsens stylesheet. Koden använder den nya "sticky"-positioneringsegenskapen i CSS, som finns tillgänglig i de flesta moderna webbläsare. Egenskapen gör att elementet blir "klistrat" vid skärmen så länge det finns plats, men återgår till sin ursprungliga position när det inte finns plats längre.Den givna CSS-koden definierar också en "top"-egenskap på 0, vilket innebär att header-elementet kommer att fästas vid toppen av skärmen. Om du vill att header-elementet ska fästas vid en annan position, kan du ange en annan värde för top-egenskapen, t.ex. "top: 20px" för att fästa elementet 20 pixels från toppen av skärmen.Slutligen definierar koden också en "z-index"-egenskap på 1000. Z-index används för att bestämma vilken element som ska visas ovanpå andra element på en webbsida, baserat på deras position i z-axeln (som går från förgrunden till bakgrunden). Genom att sätta en hög z-index-värde på header-elementet, så ser vi till att det alltid visas ovanpå andra element på sidan, vilket kan vara användbart om det finns andra element som kan täcka över header-elementet vid rullning.Så här ser det ut i koden tillsammans:.nordic--header {    position: -webkit-sticky;    position: -moz-sticky;    position: -o-sticky;    position: -ms-sticky;    position: sticky;    top: 0;    z-index: 1000;}

Kortfilm: Dölj ett element på en Abicart-sida med egen css

27 Nov 2025

Bra webbplatser där du kan lära dig html och css

27 Nov 2025

Varför är det bra att kunna koda i html och css? Att kunna grunderna i HTML och CSS är en kunskap som alltid är bra att ha med sig när du dirver en webshop. Det ger även en djupare förståelse för hur hemsidor och applikationer fungerar. Här kan du läsa om hur det funkar med egen html/css i AbicartNågra bra webbplatser som är värda att bokmärka för alla e-handlare!w3schools HTML TutorialHTML är standardspråket för webbsidor. Med HTML kan du skapa din egen webbplats. HTML är lätt att lära sig - du kommer att ha kul när du gär det!Läs mer härw3schools CSS TutorialCSS är språket vi använder för att formatera ett HTML-dokument. CSS beskriver hur HTML-element ska visas. Denna handledning kommer att lära dig CSS från grundläggande till avancerad.Läs mer härCSS-Tricks guiderCSS-tricks har en mycket bra samling guider som täcker in det mesta du behöver veta om cssLäs mer härCodecademyHTML är grunden för alla webbsidor. Den definierar strukturen på en sida, medan CSS definierar dess stil. HTML och CSS är början på allt du behöver veta för att göra din första webbsida! Lär dig båda och börja skapa fantastiska webbplatser.Läs mer härLearn CSS - web.devDen här kursen bryter ner grunderna i CSS i lättsmälta, lättförståeliga delar.Läs mer härLearn to style HTML using CSS (Mozilla)Cascading Style Sheets – eller CSS – är den första tekniken du bör börja lära dig efter HTML. Medan HTML används för att definiera strukturen och semantiken för ditt innehåll, används CSS för att utforma och lägga ut det. Du kan till exempel använda CSS för att ändra teckensnitt, färg, storlek och avstånd på ditt innehåll, dela upp det i flera kolumner eller lägga till animationer och andra dekorativa funktioner.Läs mer här

Gratis bilder: 21 webbplatser med gratis stockfoton

27 Nov 2025

Gratis stockfoton och AI-genererade bilder: De bästa källorna Världen av bilder på nätet har förändrats dramatiskt under de senaste åren. Utöver traditionella bildbanker gör generativ AI det nu möjligt att skapa unika bilder utifrån skriftliga instruktioner. Du kan beskriva motiv, stil och format som du behöver, och tjänsten genererar sedan en ny bild. Många verktyg kan även redigera befintliga bilder, lägga till eller ta bort objekt samt skapa flera varianter av samma koncept. Villkor, priser och användarrättigheter varierar mellan olika tjänster, så läs alltid igenom de aktuella villkoren innan du använder en AI-genererad bild i kommersiellt syfte. Några av de mest populära tjänsterna för AI-bildgenerering är: ChatGPT Images – skapar och redigerar bilder genom konversationsbaserade instruktioner. Midjourney – populärt för detaljerade, konstnärliga och mycket stiliserade bilder. Adobe Firefly – Adobes plattform för AI-bildgenerering och generativ redigering. Google Gemini – genererar och redigerar bilder direkt i Googles AI-assistent. Canva AI Image Generator – kombinerar bildgenerering med Canvas designverktyg och mallar. Ideogram – särskilt användbart för bilder som innehåller text, rubriker eller typografi. Leonardo.Ai – erbjuder bildgenerering, redigering och verktyg för att upprätthålla en enhetlig visuell stil. AI-genererade bilder kan vara ett användbart alternativ när du behöver ett unikt visuellt uttryck som inte finns i ett traditionellt bildbibliotek. Stockfotografi är fortfarande värdefullt när du behöver autentiska fotografier av riktiga människor, platser eller situationer. Fotografi har alltid varit en integrerad del av design. Nedan följer vårt uppdaterade urval av webbplatser som erbjuder gratis stockfoton och andra visuella resurser. Observera att ”gratis” inte nödvändigtvis innebär att bilden är fri från upphovsrätt. De flesta webbplatser använder numera egna licenser, och det kan finnas begränsningar gällande vidarefördelning, varumärken, igenkännbara personer och kommersiell användning. Kontrollera alltid licensen för den enskilda bilden innan du publicerar den. 1. StockSnap.ioStockSnap erbjuder en stor samling sökbara stockfoton i hög upplösning. Bilderna är tillgängliga under Creative Commons CC0-licensen, och källhänvisning krävs inte. 2. PexelsPexels tillhandahåller gratis stockfoton och videor som bidragits av fotografer från hela världen. Innehållet regleras av Pexels-licensen snarare än CC0. Källhänvisning krävs inte, men begränsningar gäller för återförsäljning, vidare distribution och vilseledande användning. 3. UnsplashUnsplash erbjuder en stor sökbar samling av gratis fotografier och illustrationer. Gratisbilder tillhandahålls under Unsplash-licensen, medan vissa ytterligare innehåll är tillgängligt via den betalda tjänsten Unsplash+. 4. VecteezyVecteezy tillhandahåller stockfoton, vektorgrafik, videor och designresurser. Tjänsten omfattar både gratis och betalt innehåll. Gratis nedladdningar kräver vanligtvis källhänvisning, så kontrollera vilken licens som anges för varje resurs. 5. PixabayPixabay erbjuder foton, illustrationer, vektorgrafik, videor, musik och andra medier. Innehållet kan i allmänhet användas och modifieras utan källhänvisning enligt Pixabay-innehållslicensen, med förbehåll för de användningsförbud som anges. 6. FoodiesFeedFoodiesFeed är specialiserat på högupplösta matbilder. Deras bilder är särskilt användbara för matbloggar, restauranger, recept och redaktionell design. 7. GratisographyGratisography erbjuder unika och okonventionella stockfoton som får användas i privata och kommersiella projekt enligt webbplatsens egen licens. Det är inte tillåtet att vidarebefordra originalfilerna. 8. Freestocks.orgFreestocks.org tillhandahåller gratis fotografier som täcker ämnen som människor, natur, mode, mat och teknik. Bilderna erbjuds under Creative Commons CC0-licensen. 9. PicographyPicography erbjuder högupplösta stockfoton som bidragits av olika fotografer. Webbplatsen beskriver sin kostnadsfria samling som CC0-innehåll. 10. FOCA StockFOCA Stock erbjuder gratis foton, videor och mallar för personliga och kommersiella projekt. Samlingen omfattar bilder på natur, teknik, arbetsmiljöer och stadsmiljöer. 11. PicjumboPicjumbo erbjuder gratis och premiumstockfoton i kategorier som inkluderar affärer, mode, mat, natur och teknik. Användningen omfattas av Picjumbos gällande villkor och licens. 12. KaboompicsKaboompics är specialiserat på sammanhängande fotosamlingar för varumärkesprofilering, livsstil, inredning, mat och mode. Bilder med standardlicens får användas i personliga och kommersiella projekt utan källangivelse. Bilder märkta med ”Editorial Use Only” (endast för redaktionellt bruk) har ytterligare begränsningar. 13. SkitterphotoSkitterphoto tillhandahåller fotografier som skapats av dess bidragsgivare och som görs tillgängliga som bilder i det offentliga området under CC0. 14. Life of PixLife of Pix erbjuder högupplösta fotografier från en gemenskap av fotografer. Kontrollera webbplatsens gällande villkor innan du använder eller vidareförmedlar en bild. 15. New Old StockNew Old Stock samlar in vintagefotografier från offentliga arkiv. Bilderna presenteras som fria från kända upphovsrättsliga begränsningar, men rättigheterna kan variera mellan olika arkiv och länder. Kontrollera den ursprungliga källan innan du använder dem. 16. ISO RepublicISO Republic erbjuder kostnadsfria stockfoton och videor inom områdena affärer, teknik, natur, resor och andra ämnen. Granska den gällande licensen och eventuella rättigheter från tredje part som är kopplade till bilden innan publicering. 17. StyledStockStyledStock tillhandahåller kostnadsfria stylade fotografier med fokus på mode, affärer, livsstil och traditionellt feminina visuella teman. Bilderna får användas kommersiellt utan källangivelse, med förbehåll för de begränsningar som anges i webbplatsens licens.