Cikkajánló
De most őszintén: bántottalak én valaha? Szóltam rólad bármikor is rosszat? Kibeszéltelek, szidtalak vagy mi a f*sz? Ki a fene vagy te, és mit képzelsz egyáltalán magadról, hogy csak
Elkészült az új design :) Remélhetőleg ez tovább fenn fog maradni, mint az utolsó pár. Nem szeretek sűrűn design-t cserélni, szóval remélem nem unom meg hamar. Az utolsó .psd
Elkészült az oldal legújabb kinézete. Kicsit ősziesebbre sikeredett, de nem is baj, mert hát már lassan ősz van. Most, hogy egy kicsit több időm volt végre foglalkozni az oldallal,
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.
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, szóval nem lesz nehéz elkészíteni. :) A CSS kódot minden esetben az alap CSS kódotokba kell majd bemásolni a végén. Nem kell a CSS-t minden alkalommal abba a bejegyzésbe illeszteni forráskód nézetben, amiben lesz egy táblázat, hanem a style.css fájlba kell bemásolni a többi CSS kód közé. G-Portálon pedig a többi CSS közé kell másolni, amit legtöbbször egy szélső modulban tartotok.

 

LindaDesign
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
LindaDesign
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

A táblázatban a <table><tbody> és a lezáró részei közé </tbody></table> kerülnek az oszlopok és a sorok. A <tr></tr> jelöli a sorokat, a <td></td> pedig az oszlopokat.

 

A fenti táblázat kódja ez

 

<table class="tablazat">
<tbody>
<tr>
<td class="tartalom">Tartalom kinézete a táblázatban</td>
<td class="tartalom">Tartalom kinézete a táblázatban</td>
<td class="tartalom">Tartalom kinézete a táblázatban</td>

</tr>
<tr>
<td class="tartalom">Tartalom kinézete a táblázatban</td>
<td class="tartalom">Tartalom kinézete a táblázatban</td>
<td class="tartalom">Tartalom kinézete a táblázatban</td>

</tr>
</tbody>
</table>

 

Kiemeltem benne a kódrészeket, amik a sorokat és oszlopokat jelölik. Ez a táblázat 2 sorból és 3-3 oszlopból áll. Ha csak egy sort szeretnétek akkor az egyik ilyen teljes kódot ki kell törölni belőle. Vagy ha még több sort, akkor alá újra be kell másolni.

 

<tr>
<td class="tartalom">Tartalom kinézete a táblázatban</td>
<td class="tartalom">Tartalom kinézete a táblázatban</td>
<td class="tartalom">Tartalom kinézete a táblázatban</td>
</tr>

 

Ha nem kell a 3 oszlop, akkor egy teljes <td></td> sort kell kitörölni. Ha több kell, akkor meg hozzáadni.

 

<td class="tartalom">Tartalom kinézete a táblázatban</td>

 

A táblázatban látható class=”tartalom” kódrész, ami ahhoz kell, hogy a CSS kóddal tudjátok a táblázat kinézetét alakítani, és így az bárhogy kinézhet :) Lehet neki háttérképet vagy háttérszínt adni, bármilyen betűtípussal lehet írni benne, kerete is lehet vagy bármi. Csak CSS kód tudása kell a táblázat kinézetéhez, semmi más :) Képet is lehet tenni a táblázatba. A class=”tartalom” kódrész átírható, átnevezhető, így egy-egy rukrika kinézete eltérhet a többitől. Például ebben a kódban az egyiket átnevezem:

 

<tr>
<td class="cim">A táblázat címe</td>
<td class="tartalom">Tartalom kinézete a táblázatban</td>
<td class="tartalom">Tartalom kinézete a táblázatban</td>
</tr>

 

Ez után a CSS kódjában létre kell hozni egy kódrészt, ami majd a cim rubrikára fog hatni

 

.cim { /* cím háttere, betűmérete, betűtípusa */
font-family:Georgia;
background-color: #000000;
padding: 6px;
font-size: 15px;
text-align: center;
color: #cccccc;
}
.tartalom { /* tartalom háttere, betűmérete, betűtípusa */
font-family:Arial, Helvetica, sans-serif;
background-color: #F3F3F3;
padding: 6px;
font-size: 15px;
text-align: justify;
color: #3A3A3A;
}

 

Ha a forráskódban megszerkesztettétek a táblázatok oszlopait és sorait, utána nyugodtan menjenek vissza rendes szerkesztő nézetbe és ott töltsétek fel a táblázatot tartalommal. Szöveg, kép, link, stb. Szerkesztő nézetben a táblázat tök natúr kinézetű, ami nem hiba, mivel itt még nem hat rá a CSS kód. Elmentés után már felveszi a CSS kód kinézetét. Persze csak akkor, ha a CSS már a megfelelő helyére be van másolva és tud hatni a táblázatra.

 

 

Ez az én táblázatom CSS kódja
Ha valamelyik érték pl. G-Portálon a CSS kód hatására sem változik, akkor az adott kódsor mögé be kell írni ezt: !important. Például: line-height: 19px !important;

 

<style type="text/css">
.tablazat { /* az egész táblázat */
margin: 0px auto; /* ettől lesz a táblázat középen */
width: 610px; /* az egész táblázat szélessége */
}
.tartalom { /* tartalom háttere, betűmérete, betűtípusa */
font-family: Arial, Helvetica, sans-serif;
background-color: #F3F3F3;
color: #707070;
border: 1px solid #E5E5E5;
padding: 6px;
font-size: 13px;
text-align: yustify;
line-height: 19px !important;
}
.tartalom a:link, .tartalom a:visited { /* a cellában a linkek betűtípusa, betűmérete */
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
color: #5E6F9C;
font-size: 12px;
}
.tartalom a:hover { /* a cellában a linkek betűtípusa, betűmérete, ha ráviszed az egeret */
color: #000000;
}
-->
</style>

Kapcsolódó bejegyzések

lindadesign
605 megtekintés

Előző, következő cikk

Középső modulnak görgetősáv G-Portálon

A napokban kaptam egy kérdést arról, hogyan lehet azt megcsinálni, hogy a középső modul görgethető lehessen. De csak a középső modul. Bevallom én eddig ennek nem néztem semmilyen formában utána, mert nem igazán foglalkoztatott a dolog, ezért is írtam

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

 

Hozzászólások