2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
80 napja
111 néző

WordPress themes

WordPress themes
81 napja
114 néző

G-Portál themes

G-Portál themes
81 napja
67 néző

Tumblr themes

Tumblr themes
81 napja
101 néző

Awesome ikonok használata G-Portálon
910 megtekintés

A héten volt egy ilyen kérés is, hogy hogyan lehet az Awesome ikonokat úgy használni a G-Portálon, hogy nem kell külön kódokkal bíbelődni. Hát ma volt időm, hogy megírjam ezt a felettébb egyszerű leírást hozzá :) Mármint, ha ráéreztek a lényegre, onnantól nagyon egyszerűen fogjátok tudni használni.
Ez szintén egy olyan leírás, amit eddig sehol nem láttam. Csak gondoltam megjegyzem ;)

 

Az ikonokat nem csak a blog modulhoz lehet hozzáadni, hanem bármilyen olyan részhez a G-Portálon, ahol ikonokat jelenítenétek meg. Én most három példával jöttem. Kettő a blog modulhoz és egy pedig a szélső modulhoz van. De akár a “bővebben” link elé vagy a blogbejegyzések címei elé is lehet ikont tenni. Bárhová :)

 

Az első és legfontosabb az, hogy ezen az oldalon az első pontban lévő kódot másoljátok ki és illesszétek be a G-Portálotok egy szélső egyszerű moduljába. Azt javaslom, hogy a szélső oldalon egy olyan modulba tegyétek a kódot, amiben semmi más nem lesz, csak ez a kód! Természetesen forráskódba illesszétek a kódot ;)

 

A kód beillesztése után ezen az oldalon válasszátok ki az ikont, amit használni fogtok. Kattintsatok rá a kiválasztott ikonra.

 

 

A következő oldalon ott lesznek az ikon kódjai. Nekünk most nem az i=class kód fog kelleni, hanem amit ezen a képen láttok, vagyis az Unicode. Ezt a kódot fogjuk a CSS kódban használni.

 

 

Dátum elé ikon
A kész kód kimásolható és elvihető. Ha ezt használjátok, akkor a blog modulban úgy állítsátok be a dátumot, hogy felülre tegye. A kód lényege az, hogy ugyebár ez a sor hat a kódra és ezen belül állítotok betűtípust, színt, méretet, stb: div[id*=”post_”] .txtmini. Az marad is, ahogy eddig volt. De kell egy másik kódrész is, ami pedig az ikonra lesz hatással. Ennek a kódja ez: div[id*=”post_”] .txtmini:before • Ezen belül pedig az ikon színét, méretét, elhelyezkedését lehet állítani. A két kódban a marginokkal kell játszani ahhoz, hogy szépen a dátum elé lehessen helyezni az ikont.

 

 

div[id*="post_"] .txtmini { /* dátum a blogban felül */
color: #5f5f5f;
font-size: 11px;
text-align: left !important;
background: transparent;
font-weight: normal !important;
font-style: normal !important;
font-family: Arial;
border: 0px;
margin-left: 22px; /* a dátum elhelyezkedése */
margin-top: -15px !important; /* a dátum elhelyezkedése */
padding: 5px 3px 3px 8px;
width: 175px !important;
position: absolute; /* ez marad */
}
div[id*="post_"] .txtmini:before { /* ikon a dátum előtt */
color: #000000;
font-size: 14px;
font-weight: normal !important;
font-style: normal !important;
font-family: FontAwesome; /* ikon betűtípus */
content: "\f017"; /* a kiválasztott ikon Unicode kódja */
margin-left: -15px !important; /* ikon elhelyezkedése */
position: absolute; /* ez marad */
}

 

Címkék elé ikon
A leírás ugyanaz, mint a dátumnál

 

.blogtags {
font-size: 0px !important;
text-align: right;
background: transparent;
margin-top: -10px !important;
margin-left: 210px !important;
position: absolute;
}
.blogtags:before { /* ikon a címkék előtt */
font-size: 14px;
font-weight: normal !important;
font-style: normal !important;
font-family: FontAwesome;
content: "\f02c";
margin-left: -16px !important;
position: absolute;
}
.blogtags a:link, .blogtags a:visited {
font-size: 11px;
font-family: tahoma !important;
font-weight: normal;
font-style: normal !important;
color: #958897 !important;
background: transparent;
padding: 3px;
}
.blogtags a:hover {
font-size: 11px;
font-family: tahoma !important;
font-weight: normal;
font-style: normal !important;
color: #ffffff !important;
background: #958897;
}

 

Szélső modulban cím elé ikon
A leírás ugyanaz, mint a dátumnál

 

.column_side_td .module .modtitle {
background: transparent;
font-family: 'Playfair Display', serif;
text-align: left;
font-size: 22px;
color: #ffffff;
letter-spacing: 0px;
font-style: italic;
font-weight: normal;
padding: 10px 10px 10px 30px !important;
}
.column_side_td .module .modtitle:before {
font-family: FontAwesome;
content: "\f13a";
color: #ffffff;
font-size: 22px;
font-weight: normal !important;
font-style: normal !important;
margin-left: -25px !important;
margin-top: 4px !important;
position: absolute;
}




Előző, következő cikk



A legegyszerűbben úgy tudtok táblázatot készíteni akár WordPress-ben akár G-Portálon vagy olyan szolgáltatónál, ahol tartalomkezelő van, hogy a forráskódban dolgoztok és így hozzátok létre a táblázatot és írjátok meg hozzá a CSS kódot is. Lejjebb találtok minta táblázatot kóddal,

Hoztam egy újabb jópofa CSS kódot, amit G-Portálon, WordPress-ben vagy bárhol máshol is lehet alkalmazni :) Akár szélső sávban, akár a főmodulban is. Én most a példa kódot egy G-Portálon lévő oldalsó modullal mutatom be, hogyan lehet ferde modulaljat

 



Hozzászólások