Jojjjj a lényeg

2006 november 20. | Szerző: Holli |

Minden stíluslapos megoldás átültethető a blogba. A linkek formázása is, természetesen.

A Blogleírásba vagy a Személyes profil szerkesztése rovatba beteszem ezt a részt, ez pont olyan, mint a honlapon a <body> rész. Csak első ránézésre ijesztő, valójában tökegyforma sorok vannak benne, csak a honlapok elérési útjától tűnik bonyolultnak. Ilyen egy linkes sor:
<li><a href=”honlap url-je“>megjelenő név</a></li>

<div id=”linkjeim”>
<ul>

<h4>Alapok</h4>

<li><a href=”http://weblabor.hu/cikkek/cssalapjai1″>stíluslap-tanfolyam</a></li>
<li><a href=”http://htmlinfo.freeweb.hu/css_ref/css1.htm”>stíluslapok</a></li>

<li><a href=”http://szerver3.moragimi.sulinet.hu/Informatika/HTML/index.html”>
weblapkészítés</a></li>

<h4>Zen Garden</h4>

<li><a href=”http://www.csszengarden.com/tr/magyar/”>az alapváltozat…</a></li>
<h5>…és néhány gyönyörűség:</h5>
<li><a href=”http://www.csszengarden.com/tr/magyar/?
cssfile=/124/124.css&page=8″>teatime</a></li>
<li><a href=”http://www.csszengarden.com/tr/magyar/?
cssfile=/194/194.css&page=0″>dark rose</a></li>
<li><a href=”http://www.csszengarden.com/?
cssfile=/148/148.css&page=5″>museum</a></li>
<li><a href=”http://www.csszengarden.com/tr/magyar/?
cssfile=/067/067.css&page=15″>a silent strenght</a></li>
<li><a href=”http://www.csszengarden.com/tr/magyar/?
cssfile=/158/158.css&page=4″>a simple sunrise</a></li>
<li><a href=”http://www.csszengarden.com/tr/magyar/?
cssfile=/142/142.css&page=6″>invasion…</a></li>
<li><a href=”http://www.csszengarden.com/tr/magyar/?
cssfile=/135/135.css”>contemporary nouveau</a></li>
<li><a href=”http://www.csszengarden.com/tr/magyar/?
cssfile=/092/092.css&page=12″>port of call</a></li>

<h4>Cafeblog</h4>
<li><a href=”https://help.cafeblog.hu/”>help</a></li>
<li><a href=”http://cafeblog.hu/”>cafeblog főoldal</a></li>

</div>

Ez a blognak az összes oldalán látszódni fog: a főoldalon is, a bejegyzések oldalán is és az archív oldalon is.

A blogsablonban pedig megformázom ezt a blokkot, most csak a főoldali sablonban (a Nézet-Forrás menüpontban ez is megnézhető):

ul {
width: 196px;
margin: 0 0 0 -35px !important;
margin:   0; /*IE*/
list-style-type: none;
font-weight:    bold;
}

#linkjeim a {
width: 196px;
text-decoration:   none;
background-color: #EEEEFF;
color:   #335588;
}

#linkjeim a:visited {
width: 196px;
background-color: #EEEEFF;
color:   #5577AA;
}

#linkjeim a:hover {
width: 196px;
background-color:   #FFFFFF;
color:   #CC0033;
}

h4 {
background-color:   #335588;
color:   #ffffff;
padding: 1px 5px;
margin: 0;
}

h5 {
background-color:   #5577AA;
color:   #ffffff;
text-align: right;
padding: 1px 5px;
margin: 0;
}

A főoldalon látni, hogy a linkeknél a címek sötétkék háttérbe kerültek (az egyetlen alcím jobbra van igazítva), a linkek színe pirosra, háttere pedig fehérre változik, ha egérrel fölé megyünk.

A bejegyzések oldalán (vagyis a bejegyzés címére kattintva, ahol a kommentek is vannak) nem ilyen a linklista, hanem pöttyök vannak a linkek előtt, és egyáltalán, se nem formázatlan alapállapot, se nem olyan, amilyen a főoldalon.
Az benne a jó, hogy ehhez elég volt az első keretes részben lévő blokkot beillesztenem a Blogleírásba vagy a profilba, nem kellett a bejegyzésoldali sablont módosítanom. Erre még majd visszatérek.