Serpent.

Építs portált egyszerűen!
Ugrás a tartalomhoz
  • Before és After

    Before és After – Előtte és Utána. Ez a két dolog CSS -ben igazán hasznos tud lenni, sőt. Segítségével tartalmat fűzhetünk az adott elem elé / mögé HTML használata nélkül. A tartalmat a content -tel tudjuk megadni: p::before{ content: “Előtte “; } p::after{ content: ” Utána”; } Előtte   Ez a tartalom   Utána Ez lenne az […]

  • Mit NE csinálj design készítésekor

    Az aktuális trendek szinte mindig változnak, beszéljünk akár divatról, tévéműsorokról vagy akár sablonkészítésről. Ezek ugyan mindig változnak, de ha úgy vesszük, pár “aranyszabály” mindig van. Most ezekről szeretnék mesélni nektek, konkrétabban arról, hogy mit tartok mai szemmel nagy hibának design készítésekor. Egyébként, készítettem egy új projektdobozt, amit itt(link) tudtok meglesni 🙂 Betűtípusok Nehéz lehet megtalálni […]

Egyszerű lapozó G-portálon

Nem tudom, ti hogy vagytok vele, de személy szerint nekem nem tetszik a G-portál blog moduljának lapozója. Szerintem az Elejére és a Végére link ma már felesleges. Maximum kíváncsiságból megnézném az adott oldal legelső posztját, de ennyi. Ettől én még nem tartanám meg. A készülő G-portálos sablonban ezt a két felesleges linket el is tüntettem, létrehozva egy kicsit egyszerűbb és modernebb lapozót, és ezt szeretném most bemutatni. A leírás használata során szükség van Font Awesome ikonokra is, szóval ha azokat meghagynád a CSS -ben, akkor ne feledkezz meg róla, illetve a fenti kép pontatlanságaiért bocsánatot kérek, még nincs teljesen kész a sablon 😀

A kódot a tovább mögött találjátok

Először is, eltüntetjük az Elejére és Végére linket, spant.

.pager_last,
.pager_first{
display: none;
}

Majd a lapozónak display: flex -t adunk, valamint eltüntetjük a linkek közötti elválasztó vonalat.

.pager{
font-size: 0px!important;
display: flex;
width: 100%;
padding: 0px;
justify-content: space-between;
}

Aztán pedig formázzuk az előző, következő bejegyzés linkeket.

.pager_prev,
.pager_next{
display: block !important;
width: 50% !important;
}

.pager_next{
text-align: right;
}

.pager_prev:before{
content: “\f30a”;
font-family: FontAwesome !important;
margin-right: 10px;
}

.pager_next:after{
content: “\f30b”;
font-family: FontAwesome !important;
margin-left: 10px;
}

.pager span,
.pager a{
width: auto;
font-size: 12px !important;
font-weight: bold;
text-transform: lowercase;
}

Mivel ez a kis trükk hatással van a hozzászólások lapozójára is, így még azt is külön át kell írnunk.

#commentContainer div div{
display: flex;
margin: auto;
justify-content: space-between;
}

#commentContainer div div span{
text-align: center !important;
margin: 0px !important;
}

#commentContainer div span:before,
#commentContainer div div span:after{
display: none;
}

Ez tényleg csak egy egyszerű, de hatásos kis kinézet a lapozónak, remélem hasznosnak találjátok 🙂

Devin
2020, május 6

Oszd meg az simerőseiddel

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük