hotdog.hu-ra

Az ÚJ fejléc eltüntetése/testreszabása

A hotdog megújulásával együtt egy csodálatos új fejlécet is kaptunk, amihez a régi kód már nem jó, ezért írtam újat. Ebben a cikkben több módszert is találsz, amelyekkel átalakíthatod/eltüntetheted a fejléced különböző részeit.

Először leírom az eltüntető kódokat (csak azokat használd amik neked kellenek): Az egész fejléc eltüntetése (A fejléc alatti tartalom legfelülre kerül): div.header {display: none;/* CSS by VESTEL */} A hotdog logo eltüntetése: div.header a.logo {display: none;/* CSS by VESTEL */} Új esemény került a pezsgés dobozodba felirat eltüntetése: div.event_alert {display: none;} A felső menüsor eltüntetése: div.header div.main_menu {visibility: hidden;/* CSS by VESTEL */} Az alsó menüsor eltüntetése: div.header div.sub_menu {visibility: hidden;/* CSS by VESTEL */} A legalsó sor eltüntetése: div.header div.toolbar {visibility: hidden;/* CSS by VESTEL */} A fenti kódokban láthatjátok az új fejléc elemeinek szelektorait, aki egyénileg akar saját kódot írni ezekkel könnyen megteheti. Most következzenek a különböző módszerek az egész fejléc testreszabására: 1. Csere egy darab képre: Ha nem akarod túlbonyolítani, akkor lecserélheted az egész fejlécet egyetlen darab képre, itt a CSS magazinban is ezt a variációt láthatod fent, ehhez használd ezt a kódot: div.header {background: transparent url(LINK) no-repeat !important; position: relative; top: -1px; height: 105px;/* CSS by VESTEL */} div.header * {display: none;} Piros rész: Ide, a zárójelen belülre másold a fejlécképed direkt linkjét. Narancssárga rész: A fejléc távolsága az oldal tetejétől, ez lehet negatív szám is, ezt nem kötelező módosítani, de saját igényed szerint beállíthatod, célszerű -2-re, -1-re, 0-ra, vagy akár ettől nagyobbra is. Zöld rész: A fejléc vastagsága, vagy más néven magassága, ezt fontos hogy megadd, a régi hotdogos fejléc magassága 105px volt, az új fejléc magassága 134px, de mindig akkorára állítsd be amekkora a fejlécképed magassága. 2. Egyszerű, keskeny fejléc: Ez a kód eltünteti a fejléc legalsó sávját (Profilom, üzeneteim, haverok/ismik, saját oldalam, kilépés, keresés), de a felső 2 menüsort meghagyja (ezek átszínezhetőek), továbbá megmaradhat a hotdog logo is, és beállíthatsz egy saját háttérképet. div.header {background: transparent url(http://image.hotdog.hu/_img/v4/header/header-sprite.png) no-repeat !important; position: relative; top: -1px; height: 97px;} div.header div.toolbar {display: none;/* CSS by srmark */} div.header div.sub_menu {margin-left: 240px;} div.header div.main_menu {margin-left: 248px;} div.header div.main_menu a, div.header div.sub_menu a {color: #FFFFFF !important;} div.header div.main_menu a:hover, div.header div.sub_menu a:hover {color: #FF0000 !important;/* CSS by VESTEL */} div.header div.main_menu a {font-size: 14px; font-family: Tahoma;} div.header div.sub_menu a {font-size: 12px; font-family: Tahoma;} Piros rész: Ide, a zárójelen belülre másold a fejlécképed direkt linkjét, ha van, ha nem akarsz másik háttérképet akkor hagyd a kódban azt a linket ami most benne van, ez az alap háttérkép. Narancssárga: A 2 menüsorban levő összes menüpont színe Zöld: A 2 menüsorban levő összes menüpont színe, akkor amikor ráviszed az egeret ilyen színűre változik. Világoskék: A felső menüsorban levő linkek mérete, és betűtípusa. Sötétkék: Az alsó menüsorban levő linkek mérete, és betűtípusa. A kódban megtalálod a fejléc távolságát az oldal tetejétől, és a fejléc magasságát, szükség esetén ezeket is módosíthatod, az 1. variációban leírtak szerint. Ha le akarod szedni az alap hotdog logót akkor illeszd be ezt a sort a fenti kódba: div.header a.logo {display: none;/* CSS by VESTEL */} 3. Bonyolult, vastag fejléc (csak ügyeseknek!): Ez a kód nem tünteti el az alsó sávot hanem, meghagyja, ás az itt levő linkeket és szövegeket módosítja, a többi része ugyanaz mint a 2. variációban. div.header {background: transparent url(http://image.hotdog.hu/_img/v4/header/header-sprite.png) no-repeat !important; position: relative; top: 0px;} div.header div.sub_menu {margin-left: 240px;/* CSS by VESTEL */} div.header div.main_menu {margin-left: 248px;} div.header a.logo {display: block;} div.header div.main_menu a, div.header div.sub_menu a {color: #FFFFFF !important;} div.header div.main_menu a:hover, div.header div.sub_menu a:hover {color: #FF0000 !important;/* CSS by VESTEL */} div.header div.main_menu a {font-size: 14px; font-family: Tahoma;} div.header div.sub_menu a {font-size: 12px; font-family: Tahoma;} div.header div.toolbar div.loggedin_info a {color: #FF0000;/* CSS by VESTEL */} div.header div.toolbar div.loggedin_info a.lightblue {color: #FF7733 !important;} div.header div.toolbar div.loggedin_info span.slash {color: #0000FF !important;} div.header div.toolbar div.loggedin_info {color: #FFFFFF;/* CSS by VESTEL */} div.header div.toolbar div.kereses div.label_kereses {background-image: none !important; width: 78px;/* CSS by VESTEL */} div.header div.toolbar div.kereses div.label_kereses:before {content: 'KERESSÉ:'; font-size: 16px; color: #FF0000; font-weight: bold;/* CSS by VESTEL */} div.header div.toolbar div.kereses input#fejlec_kereso_mezo {color: #FF0000; padding: 3px; border: 1px solid #FF0000;/* CSS by VESTEL */} div.header div.toolbar div.kereses a, div.header div.toolbar div.loggedin > a {background-image: url(http://image.hotdog.hu/_img/v4/header/header-gombok.png) !important;/* CSS by VESTEL */} div.header div.toolbar div.kereses a:hover, div.header div.toolbar div.loggedin > a:hover {background-image: url(http://image.hotdog.hu/_img/v4/header/header-pink.png) !important;/* CSS by VESTEL */} Piros rész: Ide, a zárójelen belülre másold a fejlécképed direkt linkjét, ha van, ha nem akarsz másik háttérképet akkor hagyd a kódban azt a linket ami most benne van, ez az alap háttérkép. Lila rész: Ez a kódrész nagyjából ugyanaz mint a 2. variációban, nézd meg az ott található magyarázatot a használatához Zöld rész: Amint láthatod ez a kódrész tartalmaz 4 darab színkódot (fekete a zöldön belül), itt ezt a 4 színkódot írd át, ezek a legalsó sávban található elemek szövegszínét módosítják, pontosan a következőket: Az első az összes link színe. A második a felhasználóneved színe. A harmadik az alig látható függőleges vonalak színe. | A negyedik pedig minden egyéb szöveg színe. Narancssárga rész: Ez a kódrész eltünteti azt a feliratot hogy "KERESÉS:", és megjeleníti helyette azt a szöveget hogy "KERESSÉ:", vagy akármit amit csak akarsz, a szöveg természetesen át tudod írni a kódban, viszont figyelj arra hogy ne legyen túl hosszú a szöveg, a másik feketével jelölt rész a kódban ennek a szövegnek a színe. Világoskék rész: Ebben a kódban 2 színkódot kell megadnod, ezek a keresés mezőnek (ahova írod a keresendő kifejezést) adnak 1 px-es keretet, és megváltoztatják a szöveg színét. Sötétkék rész: A legvégére hagytam a legfinomabb csemegét, itt válik el milyen igényesen tudod befejezni a fejlécedet: Az alsó sávban találsz 4 darab linket (Saját oldalam, Kilépés, lefelé mutató nyíl, és OK gomb) aminek a háttere 2 darab kép, alap állapotban ezek:      Ezt a két képet mentsd el, színezd át ahogy akarod, de figyelj arra hogy minden gomb a helyén maradjon, majd a kész képeket töltsd fel valahova, és a direkt linkjüket illeszd be a sötétkék kódrészen belül, a sárga linkek helyére (a zárójelen belülre). Ha a fentieket megcsináltad akkor végeztél is és elmondhatod magadról hogy ügyes vagy, DE ha még csak most olvastad el elsőre a cikket és túl soknak találod a munkát, vagy valamelyik műveletet nem akarod megcsinálni, akkor kihagyhatod, ekkor töröld ki a kódból azokat a részeket amiket nem akarsz módosítani (zöld, narancssárga, világoskék, vagy sötétkék). Ha nem akarod megcsinálni a képek átszínezését, de azt sem akarod hogy az alap gombok maradjanak ott, akkor eltüntetheted az alsó sávról a következőket: Keresés mező eltüntetése: div.header div.kereses {display: none;/* CSS by VESTEL */} Saját oldalam és Kilépés gomb eltüntetése: div.header div.toolbar div.loggedin > a {display: none;/* CSS by VESTEL */} És itt véget is ér a 3. variáció. Válaszd ki hogy melyik módszerrel akarod testreszabni a fejlécedet, és a leírtak alapján készítsd el. Figyelj arra is hogy a cikkben levő összes kódhoz még szükséges beillesztő kód is!! Használjátok egészséggel, ha bármi hibát észrevesztek, vagy hiányzik valami akkor írjatok!