Cikkajánló
Készítettem egy új G-Portálos kinézetet. Nagyon szeretem az Univerzumos képeket, így most egy ilyen kinézet született. A téma átalakítható bárhogyan, de mivel az alap kód tőlem van, így ha
Még augusztusban valamikor készítettem háromféle Oldal infó szövegdobozt, amit akkor fel is tettem az oldalra, csak még nem írtam ki. Ha esetleg valaki nem tud magától készíteni az oldalára,
Kettő darab WordPress téma került feltöltésre az oldalra. Egyelőre nincs is több, de majd ha időm engedi, akkor készítek még párat. Én inkább a letisztult kinézeteket kedvelem, szóval abból
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
Egyedi betűtípus honlapodon 3.

Ezzel az eljárással minden böngészőben (az esetek 95%-ában) ugyan úgy fog kinézni a szöveged. Én a Mozilla Firefox-ban, Google Chrome-ban és Internet Explorer-ben néztem meg, és mindenhol tökéletesen mutat :)


1. lépés: válassz egy egyedi betűt, amit majd szeretnél alkalmazni az oldalon akár a tartalomhoz, akár a modulfejlécekhez, linkhez, bármihez. Szerencsés olyan betűtípust választani, ami tartalmaz ékezeteket. Nekem ez nem annyira sikerült, mert egy két ékezetes betűt nem tartalmaz ez az egyedi betű, de sebaj, a leíráshoz ez is megfelel.


2. lépés: ha meg vagy és kiválasztottad a betűdet, akkor most ellátogatunk egy konvertáló oldalra, ide: http://www.fontsquirrel.com/tools/webfont-generator


3 lépés: az Add Fonts-ra kattintva töltsd fel a betűdet



 

Ha feltöltötted, akkor meg is jelenik az Add Fonts alatt egy új sor.



 

4. lépés: most ugyanitt így legyen beállítva minden, mint nekem
 



 

5. lépés: a lap alján pedig kattints erre:
 


 

Várj egy kicsit, amíg dolgozik a gép.
 


 

6. lépés: a felugró ablakból mentsd le a tömörített fájlt a gépedre. Olyan helyre, ahol aztán meg is fogod találni :)
 


 

7. lépés: a gépeden keresd meg a fájlt és csomagold ki.

8. lépés: a fájlok közül, amiket kicsomagoltál, neked ezekre lesz szükséged. Értelemszerűen a név a betűtípusod neve. A fájl kiterjesztése a fontos, mert ezt a 4 fájlt fogjuk feltölteni a weboldaladra!!!! (EOT, SVG, TrueType, WOFF)
 


 

9. lépés: töltsd fel akkor most a 4 fájlt a weboldaladra. Ha G-Portál, akkor a G-PorTÁR-ba!, ha HTML oldal, akkor ahova jónak látod :) Feltöltés után a G-PorTÁR-ban már meg is jelennek a fájlok.
 


 

Ezeknek a fájloknak az URL címét kell kimásolni, és a CSS kódban a megfelelő helyre beilleszteni. Ezt úgy érheted el, hogy egyesével mindegyik címre kattints rá jobb egérgombbal és:
 


 

A hivatkozás címének másolása után beillesztés a CSS kódban.


A CSS kód leírása
Amit kiemeltem, azok a fontos részek. A http rész az URL címe a betűtípusnak. A hivatkozás másolása után ide kell beilleszteni az enyém helyére az URL-eket. De arra nagyon-nagyon figyelni kell, hogy a megfelelő kiterjesztésű hivatkozást a megfelelő helyre illeszd be! Amit kiemeltem részt a CSS-ben, annak a pontos helyére illeszd be a te URL címedet!
 

@font-face {
font-family: 'PassionSans';
src: url('http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1405007557_01136.eot?') format('eot'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1405007554_05150.woff') format('woff'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1405007555_08910.ttf')  format('truetype'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1405007556_09981.svg#PassionSans') format('svg');
}


Az utolsó sorban látható az svg.# után a betűtípus neve. Oda írd be a te betűtípusod nevét!
Ezek után pedig ugyan úgy a CSS kódban adod meg a betűtípust. Példa és teljes kód lejjebb látható.
Nekem most a td.modbody-ban van téve az egyedi betű.
 

<style type="text/css">
@font-face {
font-family: 'PassionSans';
src: url('http://aranymeli.gportal.hu/portal/aranymeli/upload
/285733_1405007557_01136.eot?') format('eot'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload/
285733_1405007554_05150.woff') format('woff'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload/
285733_1405007555_08910.ttf')  format('truetype'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload
/285733_1405007556_09981.svg#PassionSans') format('svg');
}
</style>

 

<style type="text/css">
td.modbody {
     background-color: transparent;
     font-weight: normal;
     font-family: PassionSans;
     font-size: 15px;
     color: #000000;
     text-align: justify;
     letter-spacing: 2px;
}
</style>

lindadesign Hozzászólások
944 megtekintés

Hozzászólások