Vannak itt gondok emberek, szóval átdolgoztam az oldal jelenlegi CSS-ét (egy másik project keretein belül), ééééééééssss majdnem hányok az eredménytől. Utálom magam hogy ezt a tökéletes mintát nem tutdam tökéletes kinézetté varázsolni, de sajnálom nem könnyű. A végeredményt a képre kattintva tölthetitek le.

Szerintetek milyen a tökéletes blog design? Te leírod, én pedig megalkotom. Szavakat szeretnék kérni, hogy szerinted mik a legfontosabb tulajdonságai egy blogdesign-nek és én a visszajelzésekből megalkotom a kérdéses kódot, esetleg kódokat.

ÍRD LE KOMMENTBE!

Nagyon sok ember nem barátkozik meg a CSS-el, most pár tippel érkeztem hogyan szelídítsetek meg egy kódot, illetve hogyan induljatok el a tanulással. Ez nem feltétlenül egy olyan dolog hogy leülsz és megtanulod, lehet szépen apránként. Én ez utóbbihoz adnék tippeket, a másikhoz pedig a Google a barátotok ;)

Miért? Mert engem személy szerint rohadtul idegesít hogy minden oldal ugyan úgy néz ki, ugyan azokat a kódokat használja. A sablonkód az egy átmeneti dolog, ami addig van még nem írsz sajátot, nem találsz saját stílust, vagy egy apróbb kilengés amit felraksz mert éppen nagyon tetszik.

Alapszituáció:
Nyitottam egy blogot, szeretném hogy úgy nézzen ki ahogy én akarom. Nem tudok kódolni. Keresek egy sablont amit más csinált. Szép-szép, de nem tökéletes. Viszont ha ez meg ez kicsit más lenne, akkor sokkal jobban fog tetszeni... Egy sablonkód, amit más csinál a saját ízlése alapján az sosem lesz az igazi.

Legtöbb esetben mindenkinél úgy kezdődik/kezdődött hogy apránként írt át egy sablonkódot. Színeket, számokat, egyéb értékeket. Kitörölt belőle dolgokat és nézte mi változik. Ehhez két dolog kell, egy megbízható jól megcsinált sablonkód, és némi akarat hogy egyedien nézzen ki a blogod.
Én ezzel a sablonnal kezdtem, bár itt nem látni de csak apró dolgokat írtam át, itt pedig már leültem a popimra és tégláról-téglára felépítettem a kódot. Sokat segít ha van egy olyan kódod amiről már tudod hogy a sorai egészen pontosan mit csinálnak, minden egyes kis mocsok sor esetében.

Lássuk más színben!

Általában a  színekkel kezdődik, és mikor belenéz az ember egy kódba szemet szúr a color: #f5f5f5 sor és társai. Tehát ezek a varázskaraktersorok a színek? Igen. Gyors gugli miegyébb, keressünk szebbet. Cseréljük ki!
Ha egy kód alapvető színkészletét meg akarod változtatni arra van egy jó módszerem, gyors és egyszerű és egy sem marad ki. A küldetésben hű társad a mezei Jegyzettömb. Kiszűröd a különböző színkódokat, és a futurisztikus keresés-csere funkcióval az összeset kicseréled a te választott színeidre. A módszer pontos és hatékony, és megkímél attól hogy 1percnél több időt szánj a kód "látószögben létezésére".

Lopni ér!

Más sablonkódja, amihez az van írva hogy vihető, ingyen, free, tiéd, neszefussel. Persze a megfelelő krediteléssel (kilinkeled az oldaladra hogy ő csinálta a kódot).
Ötleteket is. Látsz egy nagyon szépen bekódolt szöveget, egy szép betűtípust? Egy szép formázást akárhol? A forráskód nézet mindig adott de nem a legeffektívebb az ilyen dolgok megtalálásához, kicsit sok és ha nem érted hogy mi az a szép elem akkor az életben nem találod meg. 

Ebben a jobbklikk fog nekünk segíteni. A GoogleChrome-ban van egy olyan funkció hogy "Vizsgálat" (biztos van a  többi böngészőben is, csak lehet máshogy becézik) ami kiírja neked hogy ez misoda és milyen formázások vonatkoznak rá, az összes kódrészletet kirakja aminek köze van az adott elemhez.

Végezetül beszéljünk a kreditelésről

Ugye illik kirakni mindazt ahonnan segítséget kaptál és felhasználod. Van az a pont ahol már a kód a sajátod. Viszont mibe kerül egy forrás menü? Pár linkelt karakter valahová? Semmibe. Mindenki aki segített hogy eljuss egy adott szintre érdemel valamit. Ha nem is nevezed meg hogy pontosan miért, illik köszönetet mondani.
 

Készítettem egy elvihető CSS kódot, és pofa nélkül nagyon büszke vagyok rá, összességében nem nagy szám, de számomra máris többet ér mint szinte bárkárki másé. Egó vagy nem, de ezzel a kóddal VÉGRE NORMÁLISAN TUDOK WEBLAPOT BÖNGÉSZNI TELEFONRÓL. Ahogy a gp-s oldalakat megnyúzzák a kis felbontású eszközök, attól leokádnám a kis mobilom.

Bemutatkozó:

• Kőkemény 15db+CSS sorral és egy nagy marék blackmagic-al sikerült a kicsikét mobilbaráttá tennem. Ami már 2017-ben alap lehetne lassan.
• Mivel mindenki rá van cuppanva ezekre a minimalista dolgokra, én semmi jónak elrontója nem vagyok.
• Legalább nem tömegdesign (tapsnekem)

(a képek nem mobil képek, mert nem tudom hogy kell a kis szarosommal sreenshootolni, böngésző összehúzással szimuláltam hogy is néz ki a dolog egy mobilon)

Tippek && Trükkök, avagy Must Have

A kötelező pipálgatós: Vezérlőpult, Beállítások és ott pippantsatok be minden olyat négyzete amit nem tudtok hogy misoda. Itt van hozzá a kötelező olvasmány és a képes tutorial is.

Font Awesome: Ha nem akartok az aranyos kis ikonok helyére kis négyzetecskét akkor ajánlott beimportálni az ilyesmit, mondjuk ezzel, de rakhattok frissebbet is:

<link href="/portal/framework/upload/766182_1466169388_09997.css" rel="stylesheet" title="Font Awesome" />

Optimális Logó: Megint csak 4darab egész sor css kód, de definiáltam két divet/akármit/osztályt .logo, .logo_mobil. Érdemes a szerkesztehő fejlécbe mindkét osztállyal ellátott logót csinálni, a mobilos mozogjon 400px körül a másik lehet sokkal nagyobb. Itt annyi a feketemágia hogy a mobilos logó kis felbontásban bújik elő, amúgy meg nem látszik, a sima pedig fordítva.

Optimális elrendezés: Mivel kis felbontásban csak így egymás alá túrja az oldalban található blokkokat érdemes jobb oldali elrendezést használni, mert így a mobilos felbontásban a középső modulok lesznek felül mindig. És megkíméled a látogatót attól hogy közel végtelenszer tekerjen végig ugyan azon, amikor esetleg sokat olvasna az oldalon.

LETÖLTENÉD?

Közreműködtek: gugli,Niki mester, és részben azok akiket másik kódjaimnál odacsaptam a forráslistámba.