2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

Awesome ikonok használata G-Portálon

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;
}


1 239 megtekintés

Hozzászólások