ELÉRHETŐSÉG:
Pető Róbert
QuickStudio Kft.
30-218-3519
Fax: 36-322-747
pr.office@quickstudiogroup.com
www.quickstudio.hu
Tájékoztatás egyedi sitebuild készítés lehetőségeiről - általános
Első körben a sitebuilder feladata, hogy a cloud sitebuild irányelvek dokumentáció alapján elkészítsen egy szabványos HTML5 CSS3 kódot a következő oldalakról: főoldal, a listaoldal, a termék oldal és az egyéb cms tartalmi oldalak.
Ezt el kellene küldeni a CorinCloud rendszer fejelesztőinek megtekintésre. Amennyiben megfelelőnek találjuk, néhány nap altt beépítjük a CorinCloud rendszerébe új megjelenésnek (sablonnak)
Kiemelnénk, hogy a sitebuildben (megjelenésben) csak a CorinCloud rendszerben már meglévő felületi funkciók, megjelenések fognak működni!
Valamint megjegyeznénk azt, hogy a rendszer fejlődésével az egyedi beépített sitebuild nem fog fejlődni, valamint a hibák javításával, fejlesztésekkel sem fog bővülni az egyedi sitebuild felület! Ezt a fejlődést, fejlesztést csak a CorinCloud által biztosított sablonokra tudjuk vállalni.
A második lehetőségként kínálkozik, hogy a CorinCloud Opensource példányhoz hozzáférést biztosítunk, és ott a CorinCloud rendszer parancsainak használatával már közvetlenül CorinCloud specifikus sitebuildet készíthet a sitebuilder, amit mi csak átveszünk, ha kész, és berakjuk a CorinCloud központi rendszerbe.
Tartalomjegyzék
Jelen dokumentum a Quickstudio Kft. tulajdonát képezi.
CORINCLOUD
1. ÁLTALÁNOS SABLON SITEBUILD SZERKEZET
1. 1. Mappa szerkezet:
1. 2. Alap sitebuild fájlok
Kezdőlap
Listaoldal
Termékkártya oldalak
1. 3. Sitebuildben használt parancsok, trükkök
2. Sablon készítési szokások, iránymutatások
2.1. KETTŐ CSS fájlt kell létrehozni: style.css és style_color.css
2.2. Általános instrukciók, elnevezések, példák
2.3 Általános osztályok és képzésük
1. Igazítás: margin, padding
2. Igazítás: float
3. Szöveg igazítások: text-align
4. Radius
4.1 Mind a 4 sarok lekerekítése esetén:
4.2 Csak balfelső és jobb felső sarkok kerekítése
3. Rugalmas weboldal, gyakran használt paraméterek, kódok: pluginok
3. 1. Flexslider plugin - rugalmas slider
3. 2. Fancybox - Galéria "lightbox"
8. Ikonok - Font Awesome
8. 1. Ikonok: A probléma:
8. 2. Ikonok: A megoldás:
8. 2. 1. FONT AWESOME letöltés, sablonba illesztés
8. 2. 2. FONT AWESOME ikonok kódjai
4. CLOUD SPECIFIKUS SABLON SZERKEZET Haladó beállítások
4. 1. Mappa szerkezet:
4. 2. Sablon File-ok helyei
5. Sablon - Scriptek behúzása:
6. Sablon - CSS fájl behúzása:
10. Példányok és ki/bekapcsolt modulok összegyúrása
1. lépés: mode engedélyezése:
2. lépés: default értékek beállítása
3. lépés: modul megjelenítése (ha configban engedélyezve van)
CORINCLOUD
1. ÁLTALÁNOS SABLON SITEBUILD SZERKEZET
1. 1. Mappa szerkezet:
Ez az alapszerkezet, minden CorinCloud-os projektre érvényes, legyen az weboldal vagy webshop. Természetesen egyedi igények, funkciók miatt új fájlok létrehozhatóak.
-> skin_id pl (0100)
-> css (css fájlok)
-> font (fontok)
-> ico (ikonok)
-> images (sablonhoz használt grafikai elemek)
-> js (js scriptek)
-> _template (sablon html darabjai, dobozai, többször felhasználható részei)
-> _upload (sablon tartalomban használt minta képek)
1. 2. Alap sitebuild fájlok
Kezdőlap
skin_id/kezdolap.php
Listaoldal
skin_id/listaoldal.php
Termékkártya
skin_id/termekkartya.php
Oldalak
skin_id/kosar.php
skin_id/kosar_szallitas.php
skin_id/kosar_szamlazas.php
skin_id/kosar_megerosites.php
1. 3. Sitebuildben használt parancsok, trükkök
A sitebuild teljes html kódja belekerül a skin_id/ gyökérben található oldalak php fájljaiba, pl. a fooldal.php-be. A php-ben include(”˜_template/fejlec.html'); paranccsal lehetőség van sablon darabok, dobozok betöltésére a _template mappából. Így lehetőség van egy 10 db. termékes listaoldal felépítésekor 10-szer egymás után betölteni az egy darab _template/termekkartya.html sablont.
2. Sablon készítési szokások, iránymutatások
2.1. KETTŐ CSS fájlt kell létrehozni: style.css és style_color.css
a.) A style.css a fő sablon.
- Ebben van az oldalszerkezet, a tartalmi elemek, dobozok leírásai.
- Ezt húzzuk be először a sablonba.
b.) A style_color.css az alsablon, ez tartalmazza a különböző színváltozatokat.
-Ezt húzzuk be másodiknak, mivel az ebben lévő tulajdonságokkal fogjuk felülírni a default értékeket.
- Ha van egy templat-hez színváltozat, akkor a HTML kódban a body megkapja az adott színvariáció classát:
HTML kódja:
pl:
<body class="skin_pink">
CSS kódja:
pl:
.skin_pink h1,
.skin_pink h2{
color:#414040;
}
Tehát fontos!!!! MINDIG a BODY kapja meg a színclass-t, és ehhez képest adjuk meg a CSS-ben a színtulajdonságokat, amik felülírják a default sablonban lévő értékeket.
2.2. Általános instrukciók, elnevezések, példák.
1. A CSS- fájlban egy csoportba kerüljenek az egy logikai egységhez tartozó classok, id-k.
2. Használjunk behúzást!!!!
3. Kommentezni!!!! Kommentezni!!!! Kommentezni!!!! - A blokkok tetejére mindig írjunk kommentet, hogy gyorsan végigpörgetve a CSS fájlt, megtaláljuk a megfelelő blokkot.
4. Class-ok Elnevezések:
- Funckiónak megfelelő, rövid, ANGOL név. pl: cart
- Classokat a lehető legtöbbször szeretnénk felhasználni, szóval nem szabad nagyon spécire csinálni, kerüljük a hosszú, összetett függőséget.
ILYET NE, ROSSZ példa (máshol már nem tudjuk felhasználni):
body.index .introduction div.progress .bubble .arrow {
background: url(../image/sprite/sprites.png) no-repeat 0 -60px;
...
}
EHHEZ HASONLÓAN, JÓ PÉLDA:
.bubble .arrow {
background: url(../image/sprite/sprites.png) no-repeat 0 -60px;
....
}
5. Használjuk az előre definiált classokat (Lásd melléklet)!
6. Class elnevezés: mivel többször felhasználjuk, más-más helyen, ezért nem a MŰKÖDÉSre, hanem elsődlegesen a MEGJELENÉSRE utaljon a név.
7. ID-k funkciói az azonosítás.
8. Egy Class csak "kicsit",keveset tud, és másik classal egészítjük ki a tudását. Ez azért van, hogy a sok classból összeLEGO-zzuk a sablont, és ne kelljen minden egyes blokkhoz külön megírni a CSS részt.
9. Elnevezésekben és logikában tanuljuk meg a Bootrap-es logikát. (Fentebb találsz ezzel kapcsolatban bővebb infót. Nézd át az ott található anyagokat még egyszer!)
Pl: Van egy gombunk, és ennek különböző színváltozatai vannak (legyen pl. zöld vagy piros gomb). Tehát vannak közös paraméterek, mint például a font-size, font-weight, border, padding, stb, DE: a színvariációt már ne adjuk itt meg, hanem csináljunk neki egy színclass-t is.
CSS:
Van általános class-unk, ami MINDEN gombra vonatkozik. Ehhez jönnek a szín, méret, stb változatok.
Péda a kódoláshoz:
.btn{
background:gray; /* legyen ez az alap bg szín*/
display:inline-block;
padding:4px 10px;
border:1px solid #cccccc;
font-size:18px;
line-height:22px;
...További tulajdonságok ...
}
.btn.btn_red{
background:red;
}
.btn.btn_green{
background:green;
}
.btn.btn_small{
font-size:14px;
line-height:16px;
}
HTML kódolás módja:
1.) Alapértelmezett (szürke, font-size:18px, line-height:22px)
<a href="" class="btn">Én egy alap gomb vagyok</a>
2.) A gomb zöld változata (zöld, font-size:18px, line-height:22px)
<a href="" class="btn btn_green">Zöld gomb vagyok</a>
3.) A gomb zöld és kis méretű változata (szürke, font-size:14px, line-height:16px)
<a href="" class="btn btn_green btn_small">Kicsi, zöld gomb vagyok</a>
4. ) Még 1 megjegyzés a class elnevezéssel kapcsolatban:
ha több szóból áll áll a class neve, akkor ALULVONÁSSAL írjuk: pl: btn_small.
Hogy miért?
- Egyszerű: a Bootstrap a KÖTÖJELET (pl: btn-small) használja, és ha mi véletlenül olyan classnevet adunk, amit a Boostrap is használ, akkor felülírunk, keverednek a tulajdonságok, de ami a legrosszabb, a mi classunk is kap olyan tulajdonságokat, amit mi nem is akartunk.
Tehát nálunk az ALULVONÁS van használva, OKÉ?
5.) Ez a "LEGOZAS" nem csak ilyen kis elemeknél léthezik, hanem a nagyobb résznél is: pl: Kiskártya design. Itt is pl. a "card" class tartalmazza a kiskártya általános leírását, és egy másik card_VALTOZATNÉV pedig a többlet, kiegészítő paramétereket.
2.3 Általános osztályok és képzésük
Az általános class-ok lényege, hogy a gyakran használt helyzetekben lehet őket alkalmazni, és nem kell minden egyes HTML taghez speciális class-t létrehozni olyan esetekben pl, mint az igazítások: margin, padding, stb.
Ezen osztálynevek úgy lettek létrehozva, hogy a név (rövidítve) és érték is benne van, és könnyen megjegyezhető legyen.
pl: .mt_5{margin_top:5px;}
1. Igazítás: margin, padding
Margin formája:
.m** t | l | b | r **_n
Padding formája:
.p** t | l | b | r **_n
- Erre létrehozott osztályok képzése: margin (m), padding (p), illetve ehhez jön szükség szerint: top (t), left (l), right ( r), bottom (b ).
- A hozzá tartozó értékek (n) 5-ről indulnak, és 5-ösével nőnek, egészen 50-ig (ha kell .css fájlban lehet bővíteni).
Pédák:
/* margin */
.m_5{margin:5px;}
/* margin-top */
.mt_5{margin-top:5px;}
* padding-left */
.pl_5{padding-left:5px;}
2. Igazítás: float
- Ezek előre definiált classok, bővítésre nincs szükség.
left:
.f_l {float:left;}
vagy
.left {float:left;}
right:
.f_r {float:right;}
.right{float:right}
Fontos a clear-ezés utána!!!!
.clear,
.clr {
clear: both;
height: 0;
line-height: 0px;
margin: 0px;
padding: 0px;
overflow: hidden;
}
Ha nem vagy penge a floatolásban (sitebuilderként gáz), nézd meg ezeket a linkeket:
http://css.maxdesign.com.au/floatutorial/
http://www.quirksmode.org/css/clearing.html
3. Szöveg igazítások: text-align
Formája:
.ta_( center | left | right)
Létrehozva:
.ta_center{
text-align:center;
}
- Szükség esetén bővíthető a .css fájlban.
4. Radius
4.1 Mind a 4 sarok lekerekítése esetén:
Formája:
.radius_n
- A hozzá tartozó értékek 3,5, 10, 15, 20
- Szükség esetén bővíthető a .css fájlban, de a rend kedvéért lehetőleg 5-ösével kell növelni az értékeket.
Péda:
.radius_5{
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
}
4.2 Csak balfelső és jobb felső sarkok kerekítése
Formája:
.radius_top
- A radius_n-nel együtt kell használni, (ami megadja a radius értékét) ez a class, csak letiltja a lenti sarkok kerkekítéseit.
- Szükség esetén bővíthető a .css fájlban, (pl. radius_bottom létrehozása)
Tartalma:
.radius_top{
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0;
-webkit-border-bottom-left-radius:0;
-webkit-border-bottom-right-radius:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
Használata:
Feladat: 15-ös radiusszal rendelkező, csak fenti sarkokban lekerekített div:
Megoldás: <div class="radius_15 radius_top">...</div>
Előre generált CSS osztályok mintája a Mellékletben.
3. Rugalmas weboldal, gyakran használt paraméterek, kódok: pluginok
A gyakran használt paraméterek, kódok részt fentebb kitárgyaltuk. Most lássuk a 2 plugint, amiket a responsive weboldalaknál használunk. Ezek sok-sok plugin kipróbálása után kerültek be az állandó felhasználadnó pluginok közé.
3. 1. Flexslider plugin - rugalmas slider
Mivel ezt szinte mindig használjuk, a Flexslider plugint nem a skin-ből, hanem a common mappából húzzuk be:
-> common/jquery/flexslider
A plugin doksija:
http://flexslider.woothemes.com/
3. 2. Fancybox - Galéria "lightbox"
Mivel ezt szinte mindig használjuk, a Fancybox plugint nem a skin-ből, hanem a common mappából húzzuk be:
common/jquery/fancybox
http://fancybox.net/
8. Ikonok - Font Awesome
8. 1. Ikonok: A probléma:
- A HTML5 korában, és a mobilos oldalaknál már NEM HASZNÁLUNK PNG, JPG ikonokat!
- Ezek a különböző nagyítások során szétesnek, pixelesednek.
- Nem lehet rugalmasan használni, több méretben kell ugyanarról a képről png-t gyártani, ha különböző méretben szeretnénk felhasználni a sablonunkban, és nem akarjuk hogy pixelesedés legyen.
8. 2. Ikonok: A megoldás:
- Letisztult, tűéles ikonokat kapunk (főleg mobilon, tableten észrevehető), ha speciális FONT-okat használunk ikonokként.
- A legelterjedtebb, legmegbízhatóbb, Bootstrap által is favorizált csomag:
8. 2. 1. FONT AWESOME letöltés, sablonba illesztés
http://fortawesome.github.io/Font-Awesome/
- Ez nálunk is minden projekthet kapcsolódik (elsősorban a CorinCloud-os projketekhez, illetve minden újabb projekthez is használjuk).
- Mivel MINDEN projectben benne van, ezért nem a skin_id -ben, hanem a COMMON mappában található. Így kell behúzni:
APP::Loader('template')->addCSS(APP::getDATA('DIR','COMMON').'css/font-awesome.css' );
8. 2. 2. FONT AWESOME ikonok kódjai
- Nyilván lehetetlen minden ikon kódját megtanulnunk, ezért itt van hozzá a KÓDLISTA:
http://fortawesome.github.io/Font-Awesome/icons/
- Használata: a speciális <i></i> taget KÖTELEZŐ használni:
4. CLOUD SPECIFIKUS SABLON SZERKEZET Haladó beállítások
Ez a szerkezet és sitebuild sablon csak a cloud környezettel futtatva működik.
4. 1. Mappa szerkezet:
Ez az alapszerkezet, minden CorinCloud-os projektre érvényes, legyen az weboldal vagy webshop. Természetesen, egyedi igények, funkciók miatt új fájlok létrehozhatóak.
-> skin_id pl (0100)
-> css
-> font
-> ico
-> images
-> js
-> template
-> box
-> card
-> content
-> email
-> forms
-> page
4. 2. Sablon File-ok helyei
- Fő file:
skin_id/template/page/allhtml.php
- Header:
skin_id/template/page/header.php
- Footer:
skin_id/template/page/footer.php
-Content fileok:
skin_id/template/content
Ide tesszük:
- contact.php
- main.php (főooldali tartalom)
- gallery.php
- media.php
- static.php
- reference.php
- welcome.php
- Kisebb elemek, dobozok, modulok:
skin_id/template/box mappában található.
- banner.php
- cart_body.php
- cart_empty.php
- cart_page1.php
- cart_page2.php
- cart_page3.php
- cart_page4.php
- loginform.php
- news.php
- news_item.php
- news_item_list.php
- order_thx.php
- pager.php
- pager_item.php
- regform.php
- subscribe_newsletter.php
Az ebben a mappában található fájlok, az adott weboldal funkcióinak megfelelően bővíthető, vagy ezekből a nem használtak elhagyhatóak.
5. Sablon - Scriptek behúzása:
APP::Loader('template')->addJS(ÚTVONAL);
pl:
<?php APP::Loader('template')->addJS( APP::getDATA('DIR','SKIN').'common/jquery/jquery.prettyPhoto.js' );?>
6. Sablon - CSS fájl behúzása:
APP::Loader('template')->addJCSS(ÚTVONAL);
Pl:
<?php APP::Loader('template')->addCSS(APP::getDATA('DIR','SKIN').'common/css/prettyPhoto.css' );?>
10. Példányok és ki/bekapcsolt modulok összegyúrása
- Egy skinhez nemcsak színváltozatot készíthetünk, hanem egyes részeit, moduljait ki/be kapcsolhatóvá tehetjük.
1. lépés: mode engedélyezése:
Másold be az alábbi kódot az allhtml.php-ba:
$body_skin_class = '';
$mode = '';
//---------------- MODE -----------------------
if (isset($_GET**'mode'**)) {
setcookie("cloudmode", $_GET**'mode'**, time()+3600);
$mode = $_GET**'mode'**;
} elseif (isset($_COOKIE**'cloudmode'**)) {
$mode = $_COOKIE**'cloudmode'**;
}
if (APP::getDATA('CONFIG','CLOUDMODE')!='') $mode = APP::getDATA('CONFIG','CLOUDMODE');
2. lépés: default értékek beállítása
- Állítsuk be a Default értékeket, azaz azt, hogy alapértelmezetten bekapcsolva (true) vagy kikapcsolva (false) van-e a modul.
- Állítsunk össze "mode"-okat, ahol csoportba szedjük, hogy az adott módban, melyik
- Állítsuk be, hogy milyen színvariációk vannak (ld fentebb).
Nézzük meg az oldalt:
pl:
http://page.corincloud.hu/?mode=mode_03&skin=pastel_01
Ahol a "mode_03" van bekapcsolva (Alacsony fejlec, kezdolapon csak 4 hasabos hir.)és a "paste_01" nevű színsémáját használja
2.1. Ezt így kell lekódolni:
(Természetesen a default modulok bővülhetnek, amire nincs szükség, azt töröljük. Hasonlóképpen ahány mode-unk van, a switch-ben annyi case. ”˜mode_neve" lesz.)
if (APP::getDATA('CONFIG','skin_logo')==''){
// MODULOK default off
APP::setDATA('CONFIG','skin_topseo',false);
APP::setDATA('CONFIG','skin_logo',false);
if (APP::getDATA('CONFIG','skin_logo_url')=='') APP::setDATA('CONFIG','skin_logo_url',"");
// Page top - 4 kiemelt hir
APP::setDATA('CONFIG','skin_page_top_news',false);
// Hir 4 oszlopos
APP::setDATA('CONFIG','skin_home_news_4cols',false);
// Lábléc
APP::setDATA('CONFIG','skin_page_footer',false);
// DEFAULT VARS
// slider max-height class
APP::setDATA('CONFIG','skin_slider_max_height_class','');
switch($mode){
// foglalas form + ref +rolunk szeles
case 'mode_01':
APP::setDATA('CONFIG','skin_logo',true);
if (APP::getDATA('CONFIG','skin_logo_url')=='') APP::setDATA('CONFIG','skin_logo_url',APP::getDATA('DIR','SKIN')."common/images/logo/logo_minta_zold.png");
APP::setDATA('CONFIG','skin_form_booking',true);
APP::setDATA('CONFIG','skin_home_reference',true);
APP::setDATA('CONFIG','skin_home_aboutbox',true);
APP::setDATA('CONFIG','skin_page_footer',true);
break;
// Gumiborze - ref +rolunk szeles
case 'mode_02':
APP::setDATA('CONFIG','skin_logo',true);
if (APP::getDATA('CONFIG','skin_logo_url')=='') APP::setDATA('CONFIG','skin_logo_url',APP::getDATA('DIR','SKIN')."common/images/logo/logo_minta_kek2.png");
APP::setDATA('CONFIG','skin_home_reference',true);
APP::setDATA('CONFIG','skin_home_aboutbox',true);
APP::setDATA('CONFIG','skin_page_footer',true);
break;
// Default mode welcome, service, reference, about
default:
APP::setDATA('CONFIG','skin_topseo',true);
// Koszonto
APP::setDATA('CONFIG','skin_home_welcome',true);
// Szolgaltatasok
APP::setDATA('CONFIG','skin_home_service',true);
// Referenciak
APP::setDATA('CONFIG','skin_home_reference',true);
// Rolunk - szemelyekkel
APP::setDATA('CONFIG','skin_home_about',true);
APP::setDATA('CONFIG','skin_page_footer',true);
}
if (APP::getDATA('CONFIG','SKIN_HOME_WELCOME')!='') APP::setDATA('CONFIG','skin_home_welcome',APP::getDATA('CONFIG','SKIN_HOME_WELCOME'));
//---------------- SKIN -----------------------
if (isset($_GET**'skin'**)){
setcookie("cloudskin", $_GET**'skin'**, time()+3600);
$body_skin_class = $_GET**'skin'**;
/*
switch($_GET**'skin'**){
case 'pastel_01':
$body_skin_class = 'pastel_01';
break;
case 'yellow_blue_01':
$body_skin_class = 'yellow_blue_01';
break;
case 'pink_01':
$body_skin_class = 'pink_01';
break;
}
*/
} elseif (isset($_COOKIE**'cloudskin'**)) {
$body_skin_class = $_COOKIE**'cloudskin'**;
}
}
// Ha van adminban skin class beállítva, akkor annak használata
if (APP::getDATA('CONFIG','BODYSKINCLASS')!='') $body_skin_class = APP::getDATA('CONFIG','BODYSKINCLASS');
- tehát 2 fontos GET-es paraméter van:
$_GET**'mode'** - ez a módválasztó,
$_GET**'skin'** - ez a színvariáciü
// Alacsony fejlex, kezdolapon csak 4 hasabos hir. (pink_01)
3. lépés: modul megjelenítése (ha configban engedélyezve van)
A sablon fájlok közül, ami a modul HTML részét tartalmazza, egy feltételt építünk be, hogy a modul csak akkor jelenjen meg, ha configba be lett kapcsolva:
3.1. Így kell lekódolni:
<?php if(APP::getDATA('CONFIG','skin_form_booking')){ ?>
<hr class="row-divider" />
<?php } ?>
<?php if(APP::getDATA('CONFIG','skin_home_welcome')){ ?>
<hr class="row-divider" />
<?php } ?>
MELLÉKLET: előre definiált classok
/* MARGIN, PADDING */
.m_5{margin:5px;}
.m_10{margin:10px;}
.m_15{margin:15px;}
.m_20{margin:20px;}
.m_25{margin:25px;}
.m_30{margin:30px;}
.m_35{margin:35px;}
.m_40{margin:40px;}
.m_45{margin:45px;}
.m_50{margin:50px;}
/* margin-top */
.mt_5{margin-top:5px;}
.mt_10{margin-top:10px;}
.mt_15{margin-top:15px;}
.mt_20{margin-top:20px;}
.mt_25{margin-top:25px;}
.mt_30{margin-top:30px;}
.mt_35{margin-top:35px;}
.mt_40{margin-top:40px;}
.mt_45{margin-top:45px;}
.mt_50{margin-top:50px;}
.mt_55{margin-top:55px;}
.mt_60{margin-top:60px;}
/* margin-bottom */
.mb_5{margin-bottom:5px;}
.mb_10{margin-bottom:10px;}
.mb_15{margin-bottom:15px;}
.mb_20{margin-bottom:20px;}
.mb_25{margin-bottom:25px;}
.mb_30{margin-bottom:30px;}
.mb_35{margin-bottom:35px;}
.mb_40{margin-bottom:40px;}
.mb_45{margin-bottom:45px;}
.mb_50{margin-bottom:50px;}
.mb_55{margin-bottom:65px;}
.mb_60{margin-bottom:60px;}
/* margin-right */
.mr_5{margin-right:5px;}
.mr_10{margin-right:10px;}
.mr_15{margin-right:15px;}
.mr_20{margin-right:20px;}
/* margin-left */
.ml_5{margin-left:5px;}
.ml_10{margin-left:10px;}
.ml_15{margin-left:15px;}
.ml_20{margin-left:20px;}
.ml_25{margin-left:25px;}
.ml_30{margin-left:30px;}
.ml_35{margin-left:35px;}
.ml_40{margin-left:40px;}
.ml_45{margin-left:45px;}
.ml_50{margin-left:50px;}
.ml_55{margin-left:55px;}
.ml_60{margin-left:60px;}
.ml_65{margin-left:65px;}
.ml_70{margin-left:70px;}
.ml_75{margin-left:75px;}
.ml_80{margin-left:80px;}
/* padding */
.p_5{padding:5px;}
.p_10{padding:10px;}
.p_15{padding:15px;}
.p_20{padding:20px;}
.p_25{padding:25px;}
.p_30{padding:30px;}
.p_35{padding:35px;}
.p_40{padding:40px;}
.p_45{padding:45px;}
.p_50{padding:50px;}
/* padding-top */
.pt_5{padding-top:5px;}
.pt_10{padding-top:10px;}
.pt_15{padding-top:15px;}
.pt_20{padding-top:20px;}
/* padding-left */
.pl_5{padding-left:5px;}
.pl_10{padding-left:10px;}
.pl_15{padding-left:15px;}
.pl_20{padding-left:20px;}
/* margin-right */
.pr_5{padding-right:5px;}
.pr_10{padding-right:10px;}
.pr_15{padding-right:15px;}
.pr_20{padding-right:20px;}
/* padding-bottom */
.pb_5{padding-bottom:5px;}
.pb_10{padding-bottom:10px;}
.pb_15{padding-bottom:15px;}
.pb_20{padding-bottom:20px;}
/* FLOAT */
.f_l{
float:left;
}
.f_r{
float:right;
}
/* -------- RADIUS---------- */
.radius_3{
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
}
.radius_5{
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
}
.radius_10{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.radius_15{
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
.radius_20{
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.radius_top{
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0;
-webkit-border-bottom-left-radius:0;
-webkit-border-bottom-right-radius:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
/* TEXT ALIGN */
.ta_left{text-align: left;}
.ta_right{text-align: right;}
.ta_center{text-align:center;}
/* --------- DEFAULT FORM ------------- */
.form_default{
/**/
}
.form_default input**type=text**,
.form_default input**type=password**,
.form_default select,
.form_default textarea{
width:96%;
border:1px solid #dbdbdb;
background-color:#f2f2f2;
color:#545455;
height:1.6em;
line-height:1.5em;
padding:0 3px;
margin:0.14em auto;
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
-khtml-border-radius:0.5em;
border-radius:0.5em;
text-align:left;
}
.form_default textarea{
height:3em;
font-family:Arial, Helvetica, sans-serif;
}
.form_default textarea.magas{
height:70px;
font-family:Arial, Helvetica, sans-serif;
}
.form_default textarea.alacsony{
height:2em;
}
.form_default label{
line-height:1.8em;
}
.form_default input**type=checkbox**,
.form_default input**type=radio**{
margin-right:0.5em;
}
/*form -focus */
input**type="text"**:focus,
input**type="password"**:focus,
select:focus,
textarea:focus{
background-color: #F7F4BC;
}
textarea:focus{
height:100px;
}
/* FORM - spec */
.form_default input**type=text**.magas,
.form_default input**type=password**.magas{
height:26px;
}
.form_default input**type=text**.keskeny,
.form_default input**type=password**.keskeny{
width:65%;
}
/************************************************************************************
BUTTONS
*************************************************************************************/
.button{
text-decoration: none !important;
color: #333;
font: 100% Arial, Helvetica, sans-serif;
padding: 5px 13px;
margin: 0 3px 5px 0;
border: solid 1px #aaa;
background: #f5f5f5;
background: -moz-linear-gradient(top, #f6f6f6 0%, #dfdfdf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#dfdfdf));
background: -webkit-linear-gradient(top, #f6f6f6 0%,#dfdfdf 100%);
background: -o-linear-gradient(top, #f6f6f6 0%,#dfdfdf 100%);
background: -ms-linear-gradient(top, #f6f6f6 0%,#dfdfdf 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#dfdfdf',GradientType=0 );
background: linear-gradient(top, #f6f6f6 0%,#dfdfdf 100%);
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
}
.button:hover{
text-decoration: none;
background: #f6f6f6;
}
/* color */
.button.flat{
background: #f5f5f5;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.button.yellow{
border-color: #edad14;
background: #ffe20b;
background: -moz-linear-gradient(top, #fff21e 0%, #ffd901 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff21e), color-stop(100%,#ffd901));
background: -webkit-linear-gradient(top, #fff21e 0%,#ffd901 100%);
background: -o-linear-gradient(top, #fff21e 0%,#ffd901 100%);
background: -ms-linear-gradient(top, #fff21e 0%,#ffd901 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff21e', endColorstr='#ffd901',GradientType=0 );
background: linear-gradient(top, #fff21e 0%,#ffd901 100%);
}
.button.yellow:hover{
background: #fff21e;
}
.button.yellow.flat{
background: #ffe20b;
}
.button.orange{
border-color: #a3620a;
background: #f9800f;
background: -moz-linear-gradient(top, #ff9a22 0%, #f46e01 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9a22), color-stop(100%,#f46e01));
background: -webkit-linear-gradient(top, #ff9a22 0%,#f46e01 100%);
background: -o-linear-gradient(top, #ff9a22 0%,#f46e01 100%);
background: -ms-linear-gradient(top, #ff9a22 0%,#f46e01 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9a22', endColorstr='#f46e01',GradientType=0 );
background: linear-gradient(top, #ff9a22 0%,#f46e01 100%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}
.button.orange:hover{
background: #ff9a22;
}
.button.orange.flat{
background: #f9800f;
}
.button.blue{
border-color: #0076a3;
background: #49b3fc;
background: -moz-linear-gradient(top, #76c7ff 0%, #1da0fa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#76c7ff), color-stop(100%,#1da0fa));
background: -webkit-linear-gradient(top, #76c7ff 0%,#1da0fa 100%);
background: -o-linear-gradient(top, #76c7ff 0%,#1da0fa 100%);
background: -ms-linear-gradient(top, #76c7ff 0%,#1da0fa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76c7ff', endColorstr='#1da0fa',GradientType=0 );
background: linear-gradient(top, #76c7ff 0%,#1da0fa 100%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}
.button.blue:hover{
background: #76c7ff;
}
.button.blue.flat{
background: #49b3fc;
}
.button.green{
border-color: #4e7521;
background: #76ab3b;
background: -moz-linear-gradient(top, #90c356 0%, #649a27 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#90c356), color-stop(100%,#649a27));
background: -webkit-linear-gradient(top, #90c356 0%,#649a27 100%);
background: -o-linear-gradient(top, #90c356 0%,#649a27 100%);
background: -ms-linear-gradient(top, #90c356 0%,#649a27 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#90c356', endColorstr='#649a27',GradientType=0 );
background: linear-gradient(top, #90c356 0%,#649a27 100%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}
.button.green:hover{
background: #90c356;
}
.button.green.flat{
background: #76ab3b;
}
.button.red{
border-color: #9e0b0f;
background: #e41d24;
background: -moz-linear-gradient(top, #fb4e55 0%, #d7020a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb4e55), color-stop(100%,#d7020a));
background: -webkit-linear-gradient(top, #fb4e55 0%,#d7020a 100%);
background: -o-linear-gradient(top, #fb4e55 0%,#d7020a 100%);
background: -ms-linear-gradient(top, #fb4e55 0%,#d7020a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb4e55', endColorstr='#d7020a',GradientType=0 );
background: linear-gradient(top, #fb4e55 0%,#d7020a 100%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}
.button.red:hover{
background: #fb4e55;
}
.button.red.flat{
background: #e41d24;
}
.button.black{
border-color: #000000;
background: #111;
background: -moz-linear-gradient(top, #4f4f4f 0%, #030303 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f4f4f), color-stop(100%,#030303));
background: -webkit-linear-gradient(top, #4f4f4f 0%,#030303 100%);
background: -o-linear-gradient(top, #4f4f4f 0%,#030303 100%);
background: -ms-linear-gradient(top, #4f4f4f 0%,#030303 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#030303',GradientType=0 );
background: linear-gradient(top, #4f4f4f 0%,#030303 100%);
color: #eee !important;
text-shadow: 0 -1px 0 rgba(0,0,0,.8);
}
.button.black:hover{
background: #4f4f4f;
}
.button.black.flat{
background: #111;
}
.button.purple{
border-color: #350d4c;
background: #7933ac;
background: -moz-linear-gradient(top, #9655c6 0%, #661e9b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9655c6), color-stop(100%,#661e9b));
background: -webkit-linear-gradient(top, #9655c6 0%,#661e9b 100%);
background: -o-linear-gradient(top, #9655c6 0%,#661e9b 100%);
background: -ms-linear-gradient(top, #9655c6 0%,#661e9b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9655c6', endColorstr='#661e9b',GradientType=0 );
background: linear-gradient(top, #9655c6 0%,#661e9b 100%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}
.button.purple:hover{
background: #9655c6;
}
.button.purple.flat{
background: #7933ac;
}
.button.gray{
border-color: #656565;
background: #888888;
background: -moz-linear-gradient(top, #adadad 0%, #707070 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#adadad), color-stop(100%,#707070));
background: -webkit-linear-gradient(top, #adadad 0%,#707070 100%);
background: -o-linear-gradient(top, #adadad 0%,#707070 100%);
background: -ms-linear-gradient(top, #adadad 0%,#707070 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#707070',GradientType=0 );
background: linear-gradient(top, #adadad 0%,#707070 100%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
}
.button.gray:hover{
background: #adadad;
}
.button.gray.flat{
background: #888888;
}
/* light gradient */
.button.light-yellow{
border-color: #cbc67d;
background: #fef8a5;
background: -moz-linear-gradient(top, #fefcdf 0%, #fef79c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcdf), color-stop(100%,#fef79c));
background: -webkit-linear-gradient(top, #fefcdf 0%,#fef79c 100%);
background: -o-linear-gradient(top, #fefcdf 0%,#fef79c 100%);
background: -ms-linear-gradient(top, #fefcdf 0%,#fef79c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcdf', endColorstr='#fef79c',GradientType=0 );
background: linear-gradient(top, #fefcdf 0%,#fef79c 100%);
}
.button.light-yellow:hover{
background: #fefcdf;
}
.button.light-yellow.flat{
background: #fef8a5;
}
.button.light-blue {
border-color: #95becf;
background: #c5efff;
background: -moz-linear-gradient(top, #e9f9ff 0%, #c1eeff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9f9ff), color-stop(100%,#c1eeff));
background: -webkit-linear-gradient(top, #e9f9ff 0%,#c1eeff 100%);
background: -o-linear-gradient(top, #e9f9ff 0%,#c1eeff 100%);
background: -ms-linear-gradient(top, #e9f9ff 0%,#c1eeff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f9ff', endColorstr='#c1eeff',GradientType=0 );
background: linear-gradient(top, #e9f9ff 0%,#c1eeff 100%);
}
.button.light-blue:hover{
background: #e9f9ff;
}
.button.light-blue.flat {
background: #c5efff;
}
.button.light-green {
border-color: #b0c98b;
background: #ebf8d6;
background: -moz-linear-gradient(top, #f9fff0 0%, #e5f6cb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9fff0), color-stop(100%,#e5f6cb));
background: -webkit-linear-gradient(top, #f9fff0 0%,#e5f6cb 100%);
background: -o-linear-gradient(top, #f9fff0 0%,#e5f6cb 100%);
background: -ms-linear-gradient(top, #f9fff0 0%,#e5f6cb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fff0', endColorstr='#e5f6cb',GradientType=0 );
background: linear-gradient(top, #f9fff0 0%,#e5f6cb 100%);
}
.button.light-green:hover {
background: #f9fff0;
}
.button.light-green.flat {
background: #ebf8d6;
}
.button.pink {
border-color: #de9db9;
background: #facde1;
background: -moz-linear-gradient(top, #fdecf3 0%, #f9c1d9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdecf3), color-stop(100%,#f9c1d9));
background: -webkit-linear-gradient(top, #fdecf3 0%,#f9c1d9 100%);
background: -o-linear-gradient(top, #fdecf3 0%,#f9c1d9 100%);
background: -ms-linear-gradient(top, #fdecf3 0%,#f9c1d9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdecf3', endColorstr='#f9c1d9',GradientType=0 );
background: linear-gradient(top, #fdecf3 0%,#f9c1d9 100%);
}
.button.pink:hover {
background: #fdecf3;
}
.button.pink.flat {
background: #facde1;
}
.button.lavender {
border-color: #c0a8d9;
background: #ecd9ff;
background: -moz-linear-gradient(top, #f7f0fe 0%, #e8d1ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f0fe), color-stop(100%,#e8d1ff));
background: -webkit-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -o-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -ms-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f0fe', endColorstr='#e8d1ff',GradientType=0 );
background: linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
}
.button.lavender:hover {
background: #f7f0fe;
}
.button.lavender.flat {
background: #ecd9ff;
}
/* button size */
.button.small {
font-size: 85%;
font-weight: normal;
padding: 3px 8px;
}
.button.large {
font-size: 120%;
font-weight: bold;
padding: 8px 20px;
}
.button.xlarge {
font-size: 150%;
font-weight: bold;
padding: 12px 26px;
}
/* button shape */
.button.rect {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.button.rounded {
-webkit-border-radius: 20em;
-moz-border-radius: 20em;
border-radius: 20em;
}
/* button embossed */
.button.embossed {
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.2), inset 0 -3px 0 rgba(255,255,255,.2);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.2), inset 0 -3px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.2), inset 0 -3px 0 rgba(255,255,255,.2);
padding-top: 4px;
padding-bottom: 6px;
}
.button.embossed.small,
.button.small.embossed {
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 -2px 0 rgba(255,255,255,.2);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 -2px 0 rgba(255,255,255,.2);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 -2px 0 rgba(255,255,255,.2);
padding-top: 1px;
padding-bottom: 2px;
}
.button.embossed.large,
.button.large.embossed {
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.2), inset 0 -4px 0 rgba(255,255,255,.2);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.2), inset 0 -4px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.2), inset 0 -4px 0 rgba(255,255,255,.2);
padding-top: 6px;
padding-bottom: 10px;
}
.button.embossed.xlarge,
.button.xlarge.embossed {
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.2), inset 0 -5px 0 rgba(255,255,255,.2);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.2), inset 0 -5px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.2), inset 0 -5px 0 rgba(255,255,255,.2);
padding-top: 10px;
padding-bottom: 14px;
}
/* button active */
.button:active {
position: relative;
top: 1px;
}
QUICKSTUDIO ELÉRHETŐSÉG:
Pető Róbert
QuickStudio Kft.
30-218-3519
Fax:36-322-747
pr.office@quickstudiogroup.com
www.quickstudio.hu
corincloud.com sitebuild