Oldalsó kép elrendezéses blog bejegyzések

Szerző: | 2018. 09. 24. | Egy kis tanulnivaló

A SZOKÁSOS POSZT ELRENDEZÉS…

A szokásos poszt formátumra én nem tudok mit mondani, mint hogy rém unalmas. Viszont van benne egy nagyon jó dolog: kevés CSS-sel nagyon látványosan át lehet alakítani, úgyhogy minden egyes oldalnál, amit felépítek, gyakorlatilag az első teendőim egyike, hogy ennek nekilátok. Ma ezeket fogjuk együtt megcsinálni:) :

 

MI KELL HOZZÁ?

CSS. That is all! 🙂

Hamarosan írunk arról is, hogy hány helyen lehet elhelyezni a CSS-t. Itt most tulajdonképpen két hely közül érdemes választani: az egyik a gyerektémánk style.css fájlja, amit a VEZÉRLŐPULT – MEGJELENÉS – SZERKESZTŐ menüpont alatt találsz, vagy az adott oldal BEÁLLÍTÁSOK – EGYÉNI CSS része, amit az oldalon a három vízszintes vonal alatti menü lenyitásával érsz el.

MIÉRT IDE, VAGY ÉPP ODA?

Sokszor emlegettük már, hogy ha gyerektémát használsz, a style.css-ben rögzített kódok biztonságban vannak akár egy frissítés, akár egy bármilyen hiba esetén, amikor esetleg mentésből kell visszaállítanod az oldalt.

Ha az oldal saját CSS részébe teszed, az akár el is veszhet egy frissítés alkalmával, mégis sokan ezt a megoldást kedvelik jobban.

Ha az első verzióban gondolkodsz – tehát a style.css – be építkezel -, akkor tulajdonképpen mindent megtalálsz egy helyen és ha ügyesen regisztrálod – tehát infókkal látod el az adott kódjaidat, hogy mit és miért csináltál úgy, ahogy -, akkor nem érhet (AKKORA 😀 ) meglepetés. Ehhez viszont az kell, hogy minden egyes olyan elemnek, amin egy kicsit is változtatsz és többször is előfordulhat az összes oldaladon, legyen saját osztálya vagy azonosítója (class vagy ID), máskülönben ha megcélzol pl. egy képet, vagy egy címsort, akkor az összes létező oldaladon azzá változik majd, mint amit itt megadsz. Ha viszont ez pl. egy “.dsk-blogsytle-right h4” címsor, akkor kizárólag ezt az egy (.dsk-blogsytle-right) osztállyal ellátott h4-es címsort fogod designolni az adott CSS-sel.

A mostani esetben is láthatod majd ezt a példát, mert én is adtam egy classt- a blognak (külön a bal és külön a jobb oldalas verziónak is éppen azért mert nem minden beállításuk egyforma), amit Neked azon az oldalon, ahol ezt a blog elrendezést használni szeretnéd, a blog modul MODULBEÁLLÍTÁSOK – HALADÓ fülön a CSS OSZTÁLY – ba kell beírnod.

 

A lépések tehát:  Vagy innen az oldalról kimásolod a választott elrendezés CSS-ét és
1. bemásolod a style.css-be, elmented a változtatásokat, majd létrehozol egy oldalt, beillesztesz egy blog modult és a modul haladó beállításainál beírod ANNAK a design-nak az “osztályát”, amelyik css-t használtad (ha jobb, akkor dsk_blogstyle_right, ha bal, akkor dsk_blogstyle_left), vagy
2. Létrehozol egy új oldalt, az oldal beállításaiban az EGYÉNI CSS mezőbe másolod a választott CSS-t, majd beillesztesz egy blog modult es az osztályt ugyanúgy megadod, majd elmented a változtatásokat.

Ha megvagy, frissíts az oldalaldon és remélhetőleg a kiválasztott elrendezést kapod eredményül.
A letöltésben szintén megtalálod a teljes kódot, de innen is kimásolhatod.
A jobb oldali elrendezésben két féle “Tovább olvasom gomb”-ot is találsz. Amelyiket nem használod, az kezdődjön ezzel:  /* és végződjön */ ezzel. Ami ezen két jelölés között van, az NEM LÁTSZIK tehát azt tulajdonképpen – bár ott van a CSS-ben, de – kiiktatod a működésből. Ezt is láthatod a kódban itt is, az épp nem használatos kód részet kezdődik a 49. és véget ér a 63. sorban. Az egyik verzióban a gomb a szöveg alatt van, a másik verzióban pedig a kép alatt.

Reméljük, ezt is hamar hasznosítani tudod, ha gondolod, oszd meg velünk! 🙂
Mára ennyi, kikapcs, üdv:

Zió

ELAKADTÁL? ÉSZREVÉTELED VAN? ÍRJ NEKÜNK!

7 + 3 =

NÉZD MEG!

TÖLTSD LE!

BESZÉLD MEG!