Hej YCLAS-vänner! Den här veckan delar vi några tips och bra idéer för att göra din webbplats snyggare med hjälp av CSS-kod.
Du bör veta att utseendet på din webbplats avgör om användare och kunder stannar, eller lämnar för att leta efter en snyggare sajt.
Först måste du aktivera användningen av CSS i din webbplatspanel; Klicka här för att se hur du aktiverar och lägger till anpassad CSS i YCLAS.
Nu kör vi!
Bakgrund
Numera använder de bästa webbplatserna toningar i bakgrunden, det är en enkel och mjuk färgövergång, och om du använder de rätta ger det din webbplats en modern stil. Här har du 3 olika moderna bakgrunder:
Toning #1 (Pacific Colors)
#grad
{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
Toning #2 (Strong Colors)
#grad
{background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
Toning #3 (Smooth Colors)
#grad
{background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
Typsnitt
Typsnittet på din webbplats spelar en grundläggande roll, vi rekommenderar att du använder sans serif-typsnitt, som:
Arial
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
Tahoma
p.sansserif {
font-family: Tahoma, Geneva, sans-serif;
}
Trebuchet MS
p.sansserif {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Dessa är bekväma typsnitt för ögonen.
Elementramar
Ett annat tips är att använda rundade hörn för element, det gör att din webbplats ser enkel och modern ut. För att uppnå det, använd den här koden:
p.round {
border: 2px solid black;
border-radius: 8px;
}
Du kan justera färgen (solid black) och radien (8px) för ramen.
Navigeringsfält
Navigeringsfältet är en av de viktigaste delarna på en webbplats. Ett väl utformat navigeringsfält hjälper användare att navigera korrekt på din sajt. Här är ett Sticky-Active/Current Navigation Bar; det gör att ditt navigeringsfält rör sig och fastnar högst upp beroende på skrollposition:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4682B4;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4169E1;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#YCLAS">YCLAS</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Du kan ändra färgerna (Background, Text, and Active/Current Link), och ändra storlek (Padding) på navigeringsfältet.
Responsiva bilder
Bilder! Numera är bilder avgörande på alla webbplatser, och vi är vana att se bilder överallt; men det räcker inte att bara lägga en bild på din webbplats, du måste ställa in bilden som responsiv för att den ska se bra ut på alla enheter. För att uppnå det, använd den här koden för alla bilder du vill göra responsiva:
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="X" width="IMG width" height="IMG height">
X representerar bildens URL, och vid IMG Width och IMG Height måste du skriva bildens ursprungliga storlek.
Webbplatsens layout
Det här handlar om hur de huvudsakliga elementen är fördelade på din webbplats, t.ex. sidhuvudet (Header); sidhuvudet är det första elementet som en användare ser när de kommer in på webbplatsen, så det måste vara lätt att förstå och enkelt. Här är en CSS-kod för ett bildsidhuvud med text:
body {
margin: 0;
}
.header {
background:url(X) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER TEXT</h1>
</div>
X representerar bildens URL, vid Padding kan du ställa in storleken på bildsidhuvudet, och Header Text är där du skriver vad du vill visa ovanpå sidhuvudsbilden.
Ett annat viktigt element på din webbplats är sidfoten (Footer), placerad längst ner på sidan, lika viktig som sidhuvudet. Du kan använda den här koden för en snygg sidfot:
.footer {
background-color: #00FFFF;
padding: 25px;
text-align: center;
}
Du kan ändra färgen och storleken (padding) på sidfoten.
Modern CSS 2026: vad som har förändrats sedan dessa tips
Kodsnuttarna ovan visar fortfarande grundidéerna, men CSS har utvecklats mycket sedan det här inlägget skrevs. Webbläsare delar nu en gemensam baslinje av funktioner, och temat din webbplats körs på avgör vilka selektorer din CSS kan rikta in sig på. Här är vad du bör veta innan du klistrar in något i din anpassade CSS.
Kontrollera webbläsarstöd med Baseline
Baseline, definierad av W3C WebDX Community Group, märker en funktion som "nyligen tillgänglig" så snart den fungerar i alla kärnwebbläsare (Chrome, Edge, Firefox och Safari, på dator och mobil). Den blir "brett tillgänglig" 30 månader senare, när de flesta webbplatser kan använda den utan att behöva oroa sig för äldre webbläsare. MDN visar Baseline-statusen högst upp på varje referenssida. Det här är funktionerna som ersätter de flesta av lösningarna ovan:
| Istället för... | Använd idag | Baseline-status (MDN) |
|---|---|---|
| Att upprepa hexfärger i varje regel | CSS custom properties (variabler), t.ex. var(--nova-accent) | Länge etablerad |
| Att handplocka hovernyanser | color-mix(), t.ex. accentfärgen blandad med 18 % svart | Brett tillgänglig (i alla större webbläsare sedan maj 2023) |
| Extra klasser eller JavaScript för att styla en förälder | :has(), t.ex. form:has(:invalid) button { opacity: .6; } | Brett tillgänglig (i alla större webbläsare sedan december 2023) |
| Långa, upprepade selektorer | CSS-nästling med & | Brett tillgänglig (i alla större webbläsare sedan december 2023) |
| Mediefrågor kopplade till skärmens bredd | Container-queries (@container), så att ett kort anpassar sig efter kolumnen det sitter i | Brett tillgänglig (i alla större webbläsare sedan februari 2023) |
Flytande menyobjekt (li { float: left; }) | Flexbox: display: flex; gap: 8px; | Länge etablerad |
Börja med ditt tema, inte med ett tomt blad
Den aktuella Yclas-guiden aktiverar anpassad CSS under Design > Custom CSS, med reglaget "Use custom CSS". Den varnar också för att klassnamn skiljer sig mellan teman, så en regel skriven för ett tema kanske inte gör något efter att du byter. Generiska selektorer som #grad eller ul gör antingen ingenting eller omstylar varje lista på din webbplats, så rikta alltid in dig på de klasser ditt tema faktiskt använder (högerklicka på ett element och välj Inspect i din webbläsare för att hitta dem).
Nya Yclas-webbplatser kör temat Nova, som är byggt på CSS-variabler. För att ändra huvudfärgen, använd inställningen för accentfärg i temats alternativ istället för CSS: knappar, länkar och markeringar följer alla den, och hovernyansen beräknas automatiskt. För andra justeringar är det säkrare att skriva över en variabel än att skriva om regler, eftersom en rad ändrar varje element som använder den:
:root {
--nova-radius: 10px; /* rundare eller fyrkantigare kort och knappar */
--nova-radius-sm: 6px;
}
Två regler till håller dig utanför problem. Rutan för anpassad CSS tar bara emot CSS, så lämna bort <style>, <head> och HTML-taggarna som visas i några av kodsnuttarna ovan. Och kontrollera varje ändring på både mobil och dator innan du sparar.
Prova dessa tips och berätta för oss om de fungerar för dig!
Obs: Att använda CSS-kod kräver vissa färdigheter och erfarenhet, om du aldrig har använt CSS rekommenderar vi att du använder några CSS-handledningar och CSS-guider för att uppnå det du letar efter. Om du inte vill använda CSS kan du använda våra teman, vi erbjuder en mängd olika anpassade webbplatsmallar Klicka här för att se dem.
Vänliga hälsningar,
YCLAS-teamet.
