Tutorials von Thomas Frei-Herrmann

Visual Lightbox 5.0 - mit Hintergrundbild und weiterem Abstand zwischen den Thumbnails

Hier habe ich lediglich einen zusätzlichen Layout-Bereich aufgezogen und diesem mein Hintergrundbild gegeben.

> Layout-Bereich aufziehen > Fenster “Layout-Bereich-Eigenschaften” > mittlere Button “Hintergrund” und mein Bild gewählt

Dann habe ich die von der Visual Lightbox erstellte Datei,

vlightbox1.css

die sich im Verzeichnis

\engine\css

befindet, mit meinem Windows-Editor geöffnet und die hier markierten “margin” (Randabstand) Befehle hinzugefügt, wobei Ihr Euch den Abstand von oben (margin-top), hier 95px und von links (margin-left), hier 35px natürlich ausrechnen oder ausprobieren müsst.

#vlightbox1 {
width:100%;
zoom:1;
}
#vlightbox1 .vlightbox1 {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
width:160px;
margin-top:95px;
margin-left: 35px;
padding:6px;
border:solid 1px #b8b8b8;
background-color:#f4f5f5;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-align:center;
opacity:0.87;
}
#vlightbox1 .vlightbox1 a{
margin:0;
padding:0;
border:none;
}
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{
opacity:1;
}
#vlightbox1 .vlightbox1 img{
display:block;
border:none;
margin:0;
}
#vlightbox1 .vlightbox1 div {display:none}

nach oben

Viel Spaß !