Hogyan lehet Freeblog sablonba olyan lebegő dobozt illeszteni, mint amilyen nálam az oldalsó "SoDI blogjai" doboz? Mi sem egyszerűbb!

Sablonok a Freeblog adminisztrációbanA megoldás az, hogy a megfelelő helyen belenyúlunk a Freeblog sablonjába. Ezt értelemszerűen az adminisztrációs felület Sablon > Sablonok menüpontja alatt tudjuk megtenni.

Itt fel van sorolva az összes weblapelem (főoldal, egyedi bejegyzés, stb...), melyekhez egyenként tudunk különböző megjelenítést beállítani. Ez értelemszerűen azt jelenti, hogy ha azt akarjuk, hogy a változtatásunk a weblap minden részén látszódjon, akkor az összes sablont át kell írnunk, méghozzá ugyanolyan módon.

A lényeg, hogy amire nekünk szükségünk van, az egy beágyazott keret, úgynevezett IFRAME. Ez nálam a következő módon néz ki:

<iframe
width="100%"
height="100%"
src="http://www.pestplaza.hu/blogkeret/"
frameborder="0"
scrolling="no">
</iframe>

Ezt részletesebben felesleges elmagyarázni, számunkra most csak annyi a lényeg, hogy az src részt kell a saját igényünk szerint átírnunk. Ami itt nálam http://www.pestplaza.hu/blogkeret/, azt be kell helyettesíteni annak a weblapnak a címére, amelyik weblapot meg akarjuk jeleníteni a dobozunkban.

Felmerülhet még a kérdés, hogy ezt mégis hol kellene beillesztenünk a sablon kódjába.

Nos, ehhez tudnunk kell, hogy egy modern weblap HTML kódjának a törzse egymásba ágyazott DIV elemekből, vagyis névvel ellátott részekből áll. Egy ilyen DIV elem a következő módon néz ki:

<div id="lebego">
a "lebego" nevű DIV elem belső része
</div>

Értelemszerűen nekünk is egy ilyen DIV elembe kell elhelyeznünk a beágyazott keretünket. Ez nálam a következő módon néz ki:

<div id="lebego">
<iframe width="100%" height="100%" src="http://www.pestplaza.hu/blogkeret/" frameborder="0" scrolling="no"></iframe>
</div>

Ezt a DIV tag-et legegyszerűbb a weblap legelső DIV tag-jén belül elhelyezni. Ezt közvetlenül a <BODY> nyitó HTML tag alatt találjuk. Nálam ennek "shadow" a neve.

Ennek megfelelően közvetlenül a <body> tag alatti rész nálam így néz ki:

 <body>

<div id="shadow">


<div id="lebego">
<iframe width="100%" height="100%" src="http://www.pestplaza.hu/blogkeret/" frameborder="0" scrolling="no"></iframe>
</div>

...

Tehát van egy id azonosítóval (névvel) ellátott div tag-ünk, és egy ebbe beleillesztett IFRAME típusú beágyazott keretünk. Ezt a Freeblog adminisztrációs felületén keresztül minden egyes sablonunkba belerakjuk, és félig már végeztünk is.

SablondarabokMost már csak azt kell beállítanunk, hogy pontosan mekkora legyen, és hol helyezkedjen el a keretünk (dobozunk). Ezt a CSS (stíluslap) átszerkesztésével tudjuk megtenni. Ehhez a Sablon > Sablondarabok menüpont alatt férhetünk hozzá.

Itt a weblapunk minden egyes részéhez tartoznak már beállítások, de mi a meglévő tartalommal ne törődjünk. Helyette a CSS kód legelejére illesszük be az alábbi kódot:

#lebego{
        position:absolute;  
        width:205px;  
        margin-left:+290px;   
        height:580px;  
        top:15px;

        left:50%;  
        overflow:no;
        border:1px solid #000000;
        z-index:1; 
}

Ehhez viszont már érdemes részletes magyarázatot adni. :)

  • #lebego{
    Annak a div tag-nek a neve, amibe az IFRAME beágyazott keretünket (dobozunkat) raktuk a sablonoknál. Esetemben ennek az volt a neve, hogy "lebego".     Ezen a módon közöljük a géppel, hogy mi most a weblap sok-sok része közül egészen pontosan a lebego névvel azonosított dobozunk tulajdonságait akarjuk beállítani.
  • position:absolute;   
    Abszolút elhelyezkedés, tehát nem relatív a felsőbb hierarchiához képest. A dobozunk elhelyezkedése így nem függ az őt tartalmazó DIV elem elhelyezkedésétől, vagyis nem függ egyetlen más weblaprész pontos helyétől sem.
  • width:205px;
    A dobozunk szélessége. Ez esetemben 205 pixel.
  • margin-left:+290px;   
    A dobozunk eltolása a weblap közepétől. Esetemben 290 pixellel van eltolva jobbra (vagyis pozitív irányba).
  • height:580px;
    A dobozunk magassága. Ez esetemben 580 pixel.
  • top:15px;
    A dobozunk távolsága a weblap tetejétől. Ez esetemben 15 pixel.
  • left:50%;
    A dobozunk alapértelmezett vízszintes elhelyezkedése. Ezt mindenképpen hagyjuk 50%-on, mert a margin-left értékünk ennek alapján fogja megállapítani, hogy hol van a weblap közepe, melyhez képest el kell tolni a dobozunkat.
  • overflow:no;
    Az owerflow túlcsordulást jelent, vagyis azt, hogy a tartalmunk a dobozunkon kívülre folyik. Ezt értelemszerűen nem akarjuk (már ha fontos, hogy mindig, minden a dobozon belül maradjon), éppen ezért yes helyett itt no értéket adunk meg.
  • border:1px solid #000000;
    A dobozunk kerete. Én egy 1 pixel vastagságú, hagyományos, fekete színű keretet adtam meg (a fekete szín kódja a #000000)    .
  • z-index:1;
    A z-index a szerkesztett weblapelem, esetünkben a dobozunk kvázi térbeli kiemelkedését jelenti. A biztonság kedvéért ennek adtam egy 1-es értéket, hogy mindenhol a többi weblaprész felett jelenjen meg.
  • }
    A keretünkhöz tartozó CSS leírást a záró kapcsos zárójellel fejezzük be.

Ami tehát minket különösen érdekel:

  • width - a doboz szélessége
  • height - a doboz magassága
  • top - a doboz távolsága a weblap tetejétől
  • margin-left - a doboz vízszintes eltolása a weblap közepétől. (Előjeles értékként kell megadni, vagyis ha jobbra toljuk 100 pixellel, akkor a +100px, ha balra, akkor a -100px érték kell ide.)

Röviden ennyi lenne.

Ha van még kérdés, szívesen válaszolok.

By SoDI


 
 
0 (0)
Jelentkezz be a szavazáshoz!