Csatlakozz te is!

A közösséghez

 
 
G-PHÁZ HÍRFOLYAM

Új classok

Címkék: fejlesztés class

Újabb classokkal bővült a Blog modul, így most már a blog lapozóját is a stílusotokra szabhatjátok kedvetek szerint!
Részletekért olvassatok tovább.

A blog modul személyre szabása közben biztos sokat gondolkodtatok már, hogyan lehetne a lapozót is személyre szabni. Az igaz, hogy a hivatkozásokra vonatkozó kódolás a linkelt lapozóra is hat, azonban ha a blog elején vagy végén jár az olvasó, akkor két elem extra formázás nélkül álldogált. Eddig! Ráadásul az sem lenne rossz, ha a lapozó teljesen máshogy nézne ki, mint a portálon lévő összes többi link, nem de? Mostantól ez is lehetséges!

Például az alábbi megjelenés helyett:

Így is kinézhet a blog lapozója:

Jópofa, ugye? :)

Sőt, ahogy látjátok, még az Oldal tetejére linket is egyénre szabhatjátok! De mi is kell ehhez? Az alábbiakban megtudhatjátok, melyik lapozóhoz melyik class tartozik.

A doboz, amiben a lapozó található: pager
Elejére: pager_first
Újabbak: pager_prev
Régebbiek: pager_next
Végére: pager_last
Oldal tetejére: topofpage

A fenti példa kódját vihetitek is, írjátok át bátran úgy, ahogy nektek tetszik! :)

<style>

.pager {
background-color: #c7c9be;
padding: 20px;
}
 
.pager a {
background-color: #f4f5ed;
color: #6b6b6b;
font-size: 14px;
}
 
.pager a:hover {
background-color: #544797;
color: #f8f8f8;
font-size: 14px;
}  
 
.pager_first {
background-color: #f4f5ed;
color: #6b6b6b;
font-size: 14px;
font-style: normal;
padding: 10px;
border: 1px solid #979797; 
}
 
.pager_prev {
background-color: #f4f5ed;
color: #6b6b6b;
font-size: 14px;
font-style: normal;
padding: 10px;
border: 1px solid #979797; 
}
 
.pager_next {
background-color: #f4f5ed;
color: #6b6b6b;
font-size: 14px;
font-style: normal;
padding: 10px;
border: 1px solid #979797; 
}
 
.pager_last {
background-color: #f4f5ed;
color: #6b6b6b;
font-size: 14px;
font-style: normal;
padding: 10px;
border: 1px solid #979797; 
}
 
.topofpage {
background-color: #f4f5ed;
color: #6b6b6b;
font-size: 14px;
font-style: normal;
margin-top: 28px !important;
margin-right: 20px !important;
}
 
.topofpage a {
background-color: #f4f5ed;
color: #6b6b6b;
font-size: 14px;
border: 1px solid #979797; 
padding: 10px;
}
 
.topofpage a:hover {
background-color: #544797;
color: #f8f8f8;
font-size: 14px;
padding: 10px;
}

</style>

Reméljük, örömötöket lelitek ezekben az apróságokban. Ha valaki kipróbálja, hozzászólásban linkelje bátran a portálját, ez itt a reklám helye! =)

Szólj hozzá te is!
Név:
E-mail cím:
Amennyiben megadod az email-címedet, az elérhető lesz az oldalon a hozzászólásodnál.
Idézett hozzászólás:

Köszi szépen :)

Hozzászólás:
Azért, hogy ellenőrízhessük a hozzászólások valódiságát, kérjük írd be az alábbi képen látható szót. Ha nem tudod elolvasni, a frissítés ikonra kattintva kérhetsz másik képet.
Írd be a fenti szót: új CAPTCHA kérése
 
11 hozzászólás
Utolsó hozzászólásokÚjabbak 1 KorábbiakLegelső hozzászólások
2016.03.18. 15:23
superuser

Két megoldás is született, lehet válogatni! :)
Köszi Dave és Niki!

2016.03.17. 19:40
Niki

Rendben :) Igazából csak eltűntettem a betűket a betűméret lenullázásával. Mivel a benne lévő linkek formázhatóak külön, azoknak ettől függetlenül lehet méretet adni :)

.pager {

font-size: 0px;

}

2016.03.16. 21:13
Dave

Ha el akarod tüntetni azokat a "I" jeleket, akkor a .pager részbe írd bele  a color: #színkód; -ot. Ne felejtsd el, hogy meg kell egyeznie a színnek a háttered színével! Remélem tudtam segíteni esetleg valakinek. :) 

2016.03.15. 18:56
superuser

Niki: megírhatod, milyen megoldást találtál, hátha más is hasznát venné :)

2016.03.14. 20:02
Niki

Illetve nem szóltam, könnyen megoldható :D


2016.03.14 19:57
Niki

„ Esetleg a "|" jeleket is be lehetne rakni egy külön elembe, hogy el lehessen rejteni css-el. Ennél a frissített verziónál már inkább zavaró, hogy ott vannak, de mivel valószínűleg nem fogja mindenki használni, ezért kivenni nem nagyon lehet úgysem.

2016.03.14. 19:57
Niki

Esetleg a "|" jeleket is be lehetne rakni egy külön elembe, hogy el lehessen rejteni css-el. Ennél a frissített verziónál már inkább zavaró, hogy ott vannak, de mivel valószínűleg nem fogja mindenki használni, ezért kivenni nem nagyon lehet úgysem.

2016.03.14. 16:13
Devin

Köszi szépen :)

2016.03.14. 13:15
superuser

Mintha neked íródott volna, Ryosuke-kun, mázlista vagy! 

2016.03.14. 10:29
Ryosuke-kun

Köszi szépen ezt a remek kis kódot! S ami a legjobb nem kellett naon állítanom semmit, ugyanis az oldalamon eleve a lila szín az uralkodó!

Oldalam linkje: //animeraptors.gportal.hu/

 

2016.03.14. 06:40
superuser

S milyen jó kis tavaszi hangulat uralkodik nálad, Devin

2016.03.13. 16:09
Devin

Nagyon frappáns kód, feldobja az oldalt is :)

//idevin.gportal.hu

Utolsó hozzászólásokÚjabbak 1 KorábbiakLegelső hozzászólások
 

 
KEDVENC KÉP

Küldj be Te is képet! >>>

 
TÁRSALGÓ
 
HÍRFOLYAM
Friss hozzászólások
 
SZAVAZÁS
Te varázsoltál tavaszi kinézetet a portálodra?

Igen
Nem
Szavazás állása
Lezárt szavazások
 
HÍRLEVÉL
E-mail cím:

Feliratkozás
Leiratkozás
SúgóSúgó
 
TÁMOGATÓK

AndreaSerlegBolt
UIP Duna Nemzetközi FIlm Kft
Horgolt Csoda
Moments