klassz CSS kódok Squarespace weboldalhoz

A Squarespace napról napra egyre több lehetőséget kínál design vonalon, viszont így is vannak olyan vizuális megoldások, amiket egyelőre külön CSS kód beiktatásával lehet megoldani. A következő három kódsort te is beillesztheted weboldaladba mindenféle kódolási tudás nélkül, és ugyan apró kiegészítéseknek tűnnek, de hidd el ezek azok a finomságok, amiknek a sikerességét nem lehet mérni, mégis profi hatást nyújtanak, és ahogy kedvenc designerem, Charles Eames is mondta: “The details are not the details, they make the design” - tehát abszolút megéri velük kísérletezni.

BANNER KÉP MOBILNÉZETBEN

Mindannyian szeretjük a markáns, vizuális banner képeket főleg a főoldalon, viszont sokszor ezeknek a képeknek az elrendezése mobilnézetben már nem annyira ideális. Mutatom, hogyan tudod mobilnézetben a főoldali nagy banner képed egy másikra cserélni.

A nagy banner képet tehát egy álló képre cseréljük, amelyhez először a mobilnézethez szánt képet fel kell töltenünk a Website-Website Tools-Custom CSS panelen az Add images or fonts részen. Ha feltöltötted a képet, kattints rá egyszer, és a rendszer automatikusan beteszi a linket az alatta található ablakba. Ezt a linket másold ki, mentsd el egy notepad-be, majd töröld az ablakból.

A Website-Pages menüpont alatt ezután az adott oldal (jelen esetben a főoldal) Settings menüjében, az Advanced fülön található ablakba integráljuk az alábbi következő kódot:

<style>
@media only screen and (max-width: 640px){
#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1)  .section-background {
background-image: url();
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}
  </style>

Az url helyére másold be a mobilnézetre szánt kép linkjét, majd mentsd el a változtatásokat. Az editorban egyszerűen válthatsz asztali - és mobilnézet között, és máris látni fogod az új képet.

CUSTOM FONT

A legtöbbször ezzel a kívánsággal találkozom, és bár a Squarespace több száz fontot kínál, túlzás lenne tőle elvárni, hogy egyedi tervezői fontokat is elérhetővé tegyen. Én is óriási font gyűjtő vagyok, és tudom milyen csodálatos a betűkkel játszani, úgyhogy miért is ne tehetnénk meg ezt egy kis extra kóddal.

A fentebb már említett Website-Website Tools alatt találod a Custom CSS panelt. Nem minden kód kerül ide be, vannak kódok amelyeket máshol kell az oldalba illeszteni, de font esetében ezt használjuk.

Ahogy a képen is láthatod, az Add images or fonts opciónál tudsz file-t feltölteni, tehát az adott fontot is. .OTF, .TFF, or .WOFF formátumot tudsz feltölteni, majd ha ezzel megvagy, az alatta található kis ablakba tudod beilleszteni a kódsort, és utalni az adott fontra. Mutatom hogyan:

Illeszd be az alábbi kódsort, majd kattints az url helyére, és a Custom Files legördülőből klikkelj a feltöltött fontra. A rendszer automatikusan a helyére illeszti a linket. A CUSTOMFONT név helyére írd be a font elnevezését. Az alábbi példában mind a négy címsornak - H1, H2, H3, H4 megadtam az egyedi fontot, de ezt abszolút variálhatod és akár egyetlen címsor típust is kiválaszthatsz.

@font-face {
font-family: CUSTOMFONT;
src: url();
}
h1 {
font-family: 'CUSTOMFONT';
}

h2 {
font-family: 'CUSTOMFONT';
}

h3 {
font-family: 'CUSTOMFONT';
}

h4 {
font-family: 'CUSTOMFONT';
}

A Kinfolk Cottage weboldala egy egyedi, különleges fontot használ, amelyet a fentiekhez hasonló módon integráltunk a weboldalba.

SZÖVEG KIEMELÉS

Ha egy kis színt szeretnél vinni weboldaladba, vagy csak egy-egy fontos információt, feliratot, címsort szeretnél kiemelni, akkor az alábbi kódot is használhatod. A fent említett módon a Website-Website Tools- Custom CSS menüpont alatt tudod az alábbi kódot betenni az oldalba, természetesen a színkódokat azaz hexa kódokat saját színeidre cserélheted.

Az alábbi példában én a H1 címsorhoz rendeltem a kódot, de csakis akkor működik, ha bold-ra azaz félkövérre állítod előbb az editorban az adott feliratot ( a kódban ez a strong megjelölés). A szekcióm hátterének színe a #FEFA6, így ezt adtam meg mint első szín, amely 60 %-ban fedi a szöveget és gyakorlatilag így nem is látszik, a második pedig a sárga, amely 40%-ban fedi el a maradék szövegrészt.

h1 strong{
  background: linear-gradient(to bottom, #FEFAF6 60%, #FFD84A 40%) !important;
  font-weight: normal !important;
 }

Kísérletezz bátran a fenti kódokkal, hidd el menni fog. Fontos tudni azonban, hogy az extra kódokkal felülírjuk a Squarespace rendszerét, ezért óvatosan és körültekintően érdemes használni őket, csak akkor, ha biztos vagy az eredményben, és az oldal más részeit nem érinti hátrányosan. Ha bizonytalan lennél egy-egy kódot illetően, keress bátran!