1: Stílus változtatás Neked
készíts oldaladra saját stílus kódot, vagy mi készítjük el Neked!
Leírjuk az ún. stílusváltoztató kód magyarázatát, ami alapján Te is tudsz magadnak készíteni saját kódot. Természetesen ha ez nem menne, akkor mi megcsináljuk kérésre (emailben kérj!), s kirakjuk az oldalra.
A stílusváltoztató kód, több kódból épül fel, ezekből azokat használd csak fel, amit valóban meg akarsz változtatni.
A kód ezen része felelős a GP-s moduljaid megváltoztatásáért, ez egy önmagában is működőképes kód, tehát, ha csak ezt rakod be egy egyszerű modulba úgy is jó:
<STYLE type=text/css>
<!--td.modtitle {padding-left: 4px; font-size: 9pt; font-weight:bold; color: #000000; background-color: #ffffff; height: 19px;BORDER-RIGHT: #ffffff 1px solid;BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid}}
td.menu {font-size: 8pt; color: #000000; background-color: #000000}
td.modbody {font-size: 8pt; color: #ffffff; background-color: #000000}
-->
</STYLE>
Ennek a kódnak részletes magyarázatát megtalálod a GP-s modulfejléc és modulháttér eltüntetése-megváltoztatása menüpontban.
A másik fele, ami tulajdonképpen ismét több részre osztható:
<STYLE type=text/css> <!--BODY,TD,FONT{COLOR:#ffffff;font size:7pt;font-family:verdana;text-decoration:none;line-height:9pt} --> <!--input,textarea{color:#000000;font-size:10px;background:#ffffff;font-family:verdana;text-align:justify;border:1PT solid #000000;line-height:8pt} -->
<!-- A:link { FILTER: shadow(Color=#Ffffff,Direction=135, strength=2); COLOR: #ffffff; HEIGHT: 0px; TEXT-DECORATION: none} A:visited { FILTER: shadow(Color=#Ffffff,Direction=135, strength=2); COLOR: #FFffff; HEIGHT: 0px;TEXT-DECORATION: none} A:hover { FILTER: shadow(Color=#Ffffff,Direction=135, strength=2); COLOR: #FFffff}
-->
<style type="text/css"> <!--body {scrollbar-face-color:#000000; scrollbar-shadow-color:#000000; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#000000; scrollbar-darkshadow-color:#000000; scrollbar-track-color:transparent; scrollbar-arrow-color:#ffffff; background-color: black; }-->
</STYLE>
Szedjük szét ezt a hosszút és úgy nézzük:
<STYLE type=text/css> <!--BODY,TD,FONT{COLOR:#ffffff;font size:7pt;font-family:verdana;text-decoration:none;line-height:9pt} --> <!--input,textarea{color:#000000;font-size:10px;background:#ffffff;font-family:verdana;text-align:justify;border:1PT solid #000000;line-height:8pt} -->
Ez a rész felelős a "rublikák" átalakításáért, tehát pl. ahová írod a neved, jelszavad bejelentkezéskor, vagy pl. a Statisztikában szereplő számok. Arra figyelj oda, hogyha ezt a kódot külön akarod betenni az oldalra, akkor a nyíl (-->), után, vagy helyére írd ezt: </STYLE>. De ha ezutána kód után még lesz folytatás, mint az eredeti stílusváltoztató kódban, akkor nincs probléma. A lényeg, hogy ateljes kód vége le legyen zárva így: </STYLE>. Kód magyarázat, legfontosabbak:
BODY,TD,FONT: COLOR:#ffffff - pl. Extrák menüpont piros színét változtathatod meg, vagy pl. egyszerű modulban a tartalomtípus, stb színe is ilyen lesz font size:7pt - ezeknek a szövegeknek a betű mérete font-family:verdana - ezeknek a szövegeknek a betűtípusa tex-decoration:none - azt jelenti, hogy normál a betűd (none: nincs, tehát nincs dekoráció) line-height:9pt - milyen távolságra legyenek egymástól a menüpontok
input,textarea: color:#000000 - pl. a Statisztika számainak színe, Belépés szó színe, amikor írod a neved, jelszavad színe font-size:10px - a fentebb említetteknek betű mérete background:#ffffff - a rublikák színe, tehát ahol írja a Statisztikában a számokat font-family:verdana - a fentebb említetteknek a betű típusa text-align:justify - a szöveg igazítása border:1PT solid #000000 - pl. a Statisztika rublikájának 1 pt vastag a kerete (szegélye), típusa: solid=szolíd (lehet még: dotted=pontozott, dashed=szaggatott, double=dupla) line-height:8pt - pl. a Statisztikában a számok elhelyezkedése, ezt inkább ne nagyon bántsd
A következő rész felelős a linkek stílusáért:
<!-- A:link { FILTER: shadow(Color=#Ffffff,Direction=135, strength=2); COLOR: #ffffff; HEIGHT: 0px; TEXT-DECORATION: none} A:visited { FILTER: shadow(Color=#Ffffff,Direction=135, strength=2); COLOR: #FFffff; HEIGHT: 0px;TEXT-DECORATION: none} A:hover { FILTER: shadow(Color=#Ffffff,Direction=135, strength=2); COLOR: #FFffff}
-->
Ha a stílusváltoztató kódtól függetlenül szeretnéd használni, akkor a kód elé írd: <STYLE> a végére pedig: </STYLE>, ezekkel megnyitod, majd bezárod a kódot. Magyarázat:
A:link: (ahogy látod a linket) FILTER: shadow(Color=#Ffffff,Direction=135, strength=2 - árnyékot ad a linknek, ha nem szeretnéd, hogy legyen árnyéka, akkor ezt a részt töröld ki a kódból, de vigyázz a zárójelet: { hagyd meg! Color: árnyék színe, Direction: elhelyezkedése, strenght: erőssége. Color:#ffffff - a link színe HEIGHT: 0px - ez is ilyen távolság, nem érdemes vele foglalkozni, elcsúfíthatod az oldalt TEXT-DECORATION: none - a szokásos szöveg dekoráció, a none azt jelenti, hogy nincs
A:visited: ha rákattintanak egy linkre ilyen színű marad nem igényel magyarázatot, ugyanaz vonatkozik rá, mint az A:linkre
A:hover: amikor ráviszed az egeret a linkre ilyen lesz erre a részre is ugyanaz vonatkozik, mint az A:link leírásban.
A kód többi része a görgetőre (csúszka) vonatkozik:
<style type="text/css"> <!--body {scrollbar-face-color:#000000; scrollbar-shadow-color:#000000; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#000000; scrollbar-darkshadow-color:#000000; scrollbar-track-color:transparent; scrollbar-arrow-color:#ffffff; background-color: black; }-->
</STYLE>
Ehhez a legjobb magyarázat, ha egy kinagyított görgetőt látsz, s megvannak nyílazva a képen, hogy mi mit jelent. Felesleges elkészítenünk ennek leírását, ezen az oldalon teljesen érthető melyik rész mit takar, sőt akár be is állíthatod egyből milyen színeket szeretnél, így nem kell kódot átírnod, mivel megadja a kódját:
http://iconico.com/CSSScrollbar/
Lényegében ebből áll ez a közkedvelt stílusváltoztató kód. Reméljük minden világos. Azt ajánljuk, hogy a kódot a gépeden megnyitott szöveges dokumentumban írd át, majd először próbáld ki. Tehát pl. készíts egy másik gp-s oldalt, ne fizesd érte ki a 20 kreditet, ez az oldal csak azért lesz, hogy kipróbáld mit alkottál. Ha elrontod, nem kell legalább egyből szegény webmestert nyaggatnod, hisz a portál automatikusan törlődik 7 nap után. Ez a legbiztosabb :) Ha nem mersz próbálkozni, dobj egy emailt nekünk, s írd le nagyábból milyen stíluskódot szeretnéd, ha tudod adj meg pár színkódot, vagy képet, amiről tudunk levenni színmintát.
Saját írás (bár feleslegesen írom ide, ha olyan vagy, úgyis ellopod...)
|