Cikkajánló
Igaz már tegnap feltöltöttem a Bella Thorne .png képeket, de csak ma volt időm kiírni frissnek. A régebbiek mellé még 15 darab új kép készült el. A .png-ket a
Először is mindenkinek nagyon boldog új évet kívánok :), mivel idén még nem tudtam frisst hozni :( Sok rendelés jött össze és azokat kellett megcsinálnom. Még van pár rendelés,
Ez is egy olyan leírás, amit azért teszek fel az oldalra, mert már hangzott el kérdés róla. Hogyan lehet olyan modult készíteni, amiben minta is van? Például ez a
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
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;
}

lindadesign Hozzászólások
1 159 megtekintés

Hozzászólások