Til forskel fra Outline-temaet er Ad Clenum lavet således at billederne i headeren er angivet i CSS (Cascading Style Steets) som baggrundsbillede på klasserne #left-pic, #middle-pic og #right-pic. Dette ses og læses af templaten i filen style.css. Derfor står der i header.php kun <div id="middle-pic"></div>.
Man kunne ændre i header.php, så det midterste billede bliver angivet som et billede, i stedet for som baggrund. Det kan give nogle problemer med at billedet "ikke kan være i rammen", hvis man ser din hjemmeside i forskellige browsere.
På A List Apart har de skrevet noget lækker programmering, som gør at billedet kan blive dynamisk, hvis man i style.css henviser til et program i stedet for et billede. Programmet placerer man i en tom folder, som man efterfølgende også placerer de billeder, som kan roteres, i.
Jeg vil tro, at hvis du laver 3 foldere med hvert sin kopi af programmet i, og henviser til hvert sit program (venstre, midten og højre) i style.css, vil alle tre billeder blive roteret.
Dvs. download programmet fra A List Aparts vejledning, omdøb det til rotate.php, og gem programmet i 3 nyoprettede foldere der hedder left, middle og right under templatens image-folder.
Herefter retter du style.css, så du ændrer den fra
#left-pic {
background-image: url(images/study.jpg);
border-bottom: 1px solid #fff;
float: left;
width: 179px;
height: 128px;
}
#middle-pic {
margin: 0px;
background-image: url(images/creation.jpg);
border-right: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
width: 540px;
height: 128px;
float: left;
}
#right-pic {
background-image: url(images/boat.jpg);
border-bottom: 1px solid #fff;
width: 179px;
height: 128px;
float: right;
}
til
#left-pic {
background-image: url(images/left/rotate.php);
border-bottom: 1px solid #fff;
float: left;
width: 179px;
height: 128px;
}
#middle-pic {
margin: 0px;
background-image: url(images/middle/rotate.php);
border-right: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
width: 540px;
height: 128px;
float: left;
}
#right-pic {
background-image: url(images/right/rotate.php);
border-bottom: 1px solid #fff;
width: 179px;
height: 128px;
float: right;
}
placerer billeder i passende størrelser i de 3 foldere.
Det er både smart og nemt, hvis det altså virker :-) Prøv det!
/Frank
not a support question
