A blog.web4.hu rendszerben sajnos nincs sok lehetőség a külső megváltoztatására, csupán a színek és a képek lecserélésére. Ilyenkor jön képbe a klasszikus HTML hacking.
Az alábbiakban megmutatom, hogyan adhatunk blogunknak sokkal nagyobb fejlécet, impozáns láblécet vagy egy lebegő dobozt. Ehhez nem kell semmilyen turpisság, hiszen a Web4-es blogokban a HTML szerkesztés engedélyezve van a tulajdonosok számára.
Hozzunk létre egy HTML dobozt admin felületen, majd a kód részbe illesszük be a következő HTML és CSS kódokat:
Nagy fejléc:
<style type="text/css">
.fe_header
{
height: 250px;
}
</style>
A style blokkok közé írt rész jelenti, hogy CSS kódról (stílusformázó kódról) van szó. A .fe_header a web4-es HTML kódjának azon része, ahol a fejléc van, a fe_header a fejléc neve. A kapcsos zárójelek közé írt rész magát a megformázást jelenti, ami ez esetben az, hogy a fejléc 250 képpont magasságú. A fe_header ezen kívül még sok egyéb tulajdonsággal rendelkezik, amit nem bántunk. A magassága eredetileg 160 képpont, amit a kódunk felülír.
A lábléc:
<style type="text/css">
.fe_footer
{
height: 200px;
background-image: url(http://azenblogom.web4.hu/kepurlcime.jpg);
background-color: black;
background-repeat: no-repeat;
background-position: top;
}
</style>
Ez a kód az oldalunk alján helyez el egy láblécet ahová bármit tehetünk (jogi szöveg, logók, linkek, stb.) Természetesen háttérképet is beállíthatunk neki. (Jelenleg a fe_footer csak ott árválkodik minden blogban csonkán és használatlanul - valószínűleg későbbi fejlesztésekre tartogatják.) Ha olyan hátteret szeretnénk a láblécbe, ami ismétli önmagát, akkor szedjük ki a background-position: top és a background-repeat: no repeat sorokat.
Lebegő doboz:
<style type="text/css">
.doboz
{
position: absolute;
width: 100px;
height: 50px;
margin: auto;
right: 0;
top: 0;
left: 0;
background-color: green;
}
</style>
<div class="doboz">Ez itt a div tartalma. Lehet bármi: YouTube videó, kép, link, stb.</div>
A fenti kód egy zöld színű téglalapot helyez a blogunkban fent, középen. Elsőre ennek semmi értelme, ám ha szeretnénk a fejlécbe egy új részt, amin szöveg vagy akár egy YouTube videó van, akkor ez a kód kell. Először is kell egy div. (A divek tartalmaznak mindent az oldalon – több száz div.) A class="doboz" rész nevezi el a divet doboznak, így hivatkozhatunk rá a CSS kódban a megformázásnál. A position:absolute kulcsfontosságú, ez mondja meg a divünknek, hogy az összes többi diven kívül helyezkedjen el, így bárhová elhelyezhető az oldalon. A width és height adja meg a div szélességét és hosszúságát. A margin:auto jelenti, hogy a div kerüljön középre. A right, a left és a top szintén kell, hogy a div középre kerüljön. Ha szeretnénk, hogy a div ne pont középre kerüljön, hanem például jobb oldalra és ne legyen fent olyan passzentos, akkor a top:0-át cseréljük le top:15px-re és a left:0-át left:500px-re.
(Ha nem tudod elképzelni, akkor példának ott van a - kicsit sötét és bús komor - startrekonline.web4.hu.)
Ha nem tiszta valami nyugodtan kérdezz;)