Cikkajánló
Én ezt a weboldalt a munkahelyemen használom eléggé sűrűn. Ez arra jó, ha tetszik egy adott betűtípus vagy pont ugyanarra van szükségünk, akkor ezen az oldalon meg lehet azt
Nagyon-nagyon régen nem hoztam már kódokat. Talán mióta elköltöztem a G-Portálról, azóta. Így hirtelenjében összeszedtem nyolc darab új képeffekt kódot. (Már akinek új lehet) Tudjátok, megváltozik a kép kinézete,
Elindítom azt a cikksorozatot, amiben külön-külön minden CSS kódrészről leírom, hogy micsoda, mire való és mi mindenre hathat a G-Portálon. Belinkelem mindegyik cikkhez azokat a G-Portálos leírásokat, amik már
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 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>

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

Hozzászólások