2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
80 napja
111 néző

WordPress themes

WordPress themes
81 napja
114 néző

G-Portál themes

G-Portál themes
81 napja
67 néző

Tumblr themes

Tumblr themes
81 napja
101 néző

Egyedi betűtípus honlapodon 1.

Egy tutorial, ami arról szól, hogyan tudsz egyedi betűtípust használni a weboldaladon úgy, hogy az másnál is ugyan úgy nézzen ki :) És mivel ezt is már sokan kérdeztétek, így hoztam kettő féle leírást erről is. Ez az egyik, a másikat pedig itt olvashatod el. Arra kell vigyázni, hogy olyan betűtípust válassz, ami magyar ékezetes!
1. lépés: menj el erre az oldalra: https://fonts.google.com/
2. lépés: keress magadnak egy szimpatikus betűtípust

 

 

3. lépés: ha megtaláltad, ami tetszik…
Nekem mondjuk ez:

 

 

Szóval ha megtaláltad, akkor arra a kis piros plusz jelre kell kattintani. Kattintás után egyből a monitorod jobb oldalán alul megjelenik egy fekete sáv

 

 

4. lépés: Rá kell kattintani a jobb oldalon lévő negatív jelre. Ekkor az ablak nagyobb méretű lesz.

 

 

5. lépés: az ablakban az első fontos dolog, hogy a Customize linkre kell kattintani. Itt ki lehet választani, hogy a betűtípusnak milyen stílusait akarjuk használni, lejjebb pedig mindenképpen be kell pipálni a Latin Extended rubrikát. Így lesz a betű ékezetes. Vannak betűk, ahol nincs lehetőség ennek bepipálásához, ami értelemszerűen azt jelenti, hogy a kiválasztott betűben nincsen benne a magyar ékezet :(

 

 

6. lépés: Most menjünk vissza az Embed feliratra. Kettőféleképpen lehet megjeleníteni a betűt az oldalon.

A: A Standard linken maradva ezt a kódot kimásoljuk és beillesszük WordPress-ben a header.php fájlba. G-Portálon pedig mondjuk a láblécbe.

 

<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">

 

 

B: Az Import linkre kattintva a <style></style> kód közötti egy sort kimásoljuk és beillesszük a CSS kódunkba.

 

@import url('https://fonts.googleapis.com/css?family=Dosis');

 

 

8. lépés: Ugyanebben az ablakban a Google megadja azt is, hogy hogyan kell a betűtípust a CSS kódban beírni. Másoljátok ki és oda illesszétek be, ahol a kiválasztott betűtípust szeretnétek alkalmazni az oldalatokon :)

 

 

9. lépés: ha mégsem szeretnétek ezt a betűtípust használni, akkor egyszerűen csak a Google oldalán kattintsatok rá a piros negatív ikonra. Így eltűnik a kis ablak is a monitor jobb oldaláról. Több betűtípust is lehet egyszerre kiválasztani, de én egyesével szoktam, mert így a kódokban is egyesével teszi bele őket, nem pedig egyben az összeset.

 

 

Itt egy példa CSS kód. Ez a modulfejlécre hat és a modulban lévő szövegre a G-Portálon. De ugyan úgy bárhová beilleszthető, ahol betűtípust használtok akár G-Portálon, akár HTML/PHP oldalon is.

 

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Dosis');
td.modtitle { /* modulfejléc része */
font-family: 'Dosis', sans-serif;
font-size: 18px;
color: #f4e6cb;
text-align: center;
background-color: #ba6066;
font-weight: bold;
text-transform: none;
font-style: normal;
}
td.modbody { /*  modulban a szöveg elrendezése, modul háttere  */
background-color: #f8ecd4;
font-family: 'Dosis', sans-serif;
font-size: 15px;
color: #5f5f5f;
}
--></style>


1 295 megtekintés

Hozzászólások