Cikkajánló
Sikerült megint egy prémium témát készítenem WordPress-hez. Valami kéket szerettem volna és azt hiszem sikerült is egy szép kék színt választanom hozzá. Nagyon szeretem Gigi-nek ezt a fotósorozatát, így
Felkerült a legújabb kinézet az oldalra. Nem szeretnék sokat írni róla, hiszen nem sok változás történt az előző design-hoz képet. A rózsaszín megmaradt, mert Emily-hez ez illik :) Mellé
Készítettem pihenésképpen egy teljesen egyszerű G-Portálos CSS kódot. Semmi csicsa nincsen benne, sem színkavalkád :) Tök egyszerű, letisztult téma. Fejléc adható hozzá, ha úgy jobban tetszik majd. :) Innen
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
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
1 035 megtekintés

Hozzászólások