Cikkajánló
Nem is olyan régen volt egy ilyen kérdés, hogy hogyan lehet a Chat-et így egymás mellé helyezni. Nos, bekódoltam a saját Chat-emet és most ezt a kódot elhoztam nektek
Elég régen nem hoztam már menüstílusokat és project dobozokat, így ma mivel volt némi időm hoztam két-két darabot. Nekem nagyon tetszik mindegyik :) A két project doboz majdhogynem megegyezik
Ez egy leírás arról, hogyan tudsz a Coppermine Galéria fejlécébe ugyan úgy egyedi menüt tenni, mint pl. a weboldalad fejlécébe. Szóval nem a megszokott hagyományos két soros menü lesz
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
2016. január. 31.
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;
}

Kapcsolódó bejegyzések

lindadesign
620 megtekintés

Előző, következő cikk

Táblázat készítése

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,

Ferde modulalj CSS 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