Kysymys CSS-tuntijoille

[Jasper]

Elikkäs kun JAlbumilla on luonut albuminsa, ilmestyy kohdekansioon "styles"-tiedosto, jossa ulkoasua pääsee muuttelemaan CSS:llä.

Camera Geek -skinissä thumbnailien ympärille muodostuu kehys, jota pääsee muokkaamaan tästä (copypasteus styles-muistiosta):

}

/* Put a border on all generated images */
.image {
border-width: 2;
border-color: #FFFFFF;
border-style: solid;
margin: 5;
}

Minun tavoitteena on kuitenkin laittaa kehykset myös slideshow-kuviin. No sehän onnistuu kun kumittaa tuosta sanan "generated", jolloin teksti on "Put a border on all images". Silloin kuitenkin kehys on kummassakin - niin thumbnailissa kuin slideshow -kuvassakin - yhtä paksu ja saman värinen. Onko jotenkin mahdollista, että CSS-pilkunviilaukset voi laittaa erikseen slide-kuvaan ja thumbnailiin, siten että thumbnailin kehys on ohuempi ja eri värinen kuin slide-kuvan kehys?

Kiitos, ja jos kysymys ei auennut, niin pyytäkää rohkeasti selvennystä.

[lumitykki]

/* Put a border on all generated images */

Minun tavoitteena on kuitenkin laittaa kehykset myös slideshow-kuviin. No sehän onnistuu kun kumittaa tuosta sanan "generated", jolloin teksti on "Put a border on all images". Silloin kuitenkin kehys on kummassakin - niin thumbnailissa kuin slideshow -kuvassakin - yhtä paksu ja saman värinen. Onko jotenkin mahdollista, että CSS-pilkunviilaukset voi laittaa erikseen slide-kuvaan ja thumbnailiin, siten että thumbnailin kehys on ohuempi ja eri värinen kuin slide-kuvan kehys?

JAlbum ei ole minulle tuttu mutta CSS:ää tunnen jonkin verran. Sen voin sanoa 100% varmuudella, että teksti:

/* Put a border on all generated images */

Ei vaikuta millään tavalla lopputulokseen.
Merkkien /* ja */ välissä oleva teksti on vain kommenttitekstiä, joten noiden merkkien välissä saa olla mitä tahansa.

.image{

}

Kaarisulkujen välissä olevat määrittelyt määrittelevät miltä kuvan kehykset näyttää. Tässä tapauksessa kaikki kuvat ovat samanlaisia.

Jos haluat tehdä erilaisia kehyksiä, niin silloin itse kuvan tulostuskohdassa pitää määritellä, että mitä tyyliä ko. kuva käyttää.

Esim:
.image1 {
border-width: 4;
border-color: #FFFFFF;
border-style: solid;
margin: 5;
}

.image2 {
border-width: 2;
border-color: #FFFFFF;
border-style: solid;
margin: 5;
}

Koodi: Valitse kaikki

<img src="kuva.jpg" class=image1>

Koodi: Valitse kaikki

<img src="kuva.jpg" class=image2>

Ylimmäinen tulostaa kuvan 4 pikselin kehyksillä ja jälkimmäinen kahden pikselin kehyksillä.

[Santtu]

Kuten lumitykki jo totesi, niin joudut tekemään tyylitiedostoon sopivat määritykset, että tuo onnistuu, sekä muokkaamaan hieman index.htt ja slide.htt tiedostoja.


Siinä kohtaa missä JAlbumissa määritetään ulkoasu, löytyy nappula muokkaa. Valitse haluamasi tyyli. Klikkaa Muokkaa-nappulaa. Avautuu kansio, jossa on tiedostoja, sekä kansio nimeltä styles.

hae sieltä se tyylitiedosto, joata käytät, esim. Bright.css. Lisää sinne uudet tyylit (esim. nuo lumitykin tekemät), ja tallenna.

Palaa avautuneeseen kansioon, ja avaa index.htt tieodsto johonkin editoriin (vaikkapa notepadiin/muistioon)

Etsi kohta

Koodi: Valitse kaikki

<!-- Iterate through images and produce an index table -->
<table CELLSPACING=0 CELLPADDING=10>
<ja:rowiterator>
	<tr>
	<ja:coliterator>
		<td  width="<%=1.5 * maxThumbWidth%>">
			<ja:if exists="iconPath">
				<!-- No frames around icons like folders and movie files -->
				<a href="$closeupPath">
				<img src="$iconPath" width="$thumbWidth" height="$thumbHeight" border=0><br>

Muuta rivi

Koodi: Valitse kaikki

<img src="$iconPath" width="$thumbWidth" height="$thumbHeight" border=0>

muotoon

Koodi: Valitse kaikki

<img src="$iconPath" width="$thumbWidth" height="$thumbHeight" border=0 class="image1">

Image1 on sen tyylin nimi, jota käytetään indeksi sivulla.

Seuraavaksi avaa editoriin slide.htt tiedosto. Sieltä pitää hakea kohta

Koodi: Valitse kaikki

<!-- Image, maybe with link to original -->

<ja:if exists=originalPath>
	<a href="$originalPath">
		<img src="$imagePath" width="$imageWidth" height="$imageHeight" alt="Original image">
	</a>
</ja:if>
<ja:else>

	<img src="$imagePath" width="$imageWidth" height="$imageHeight"></ja:else>

Nuo kaksi image tagia, eli

Koodi: Valitse kaikki

		<img src="$imagePath" width="$imageWidth" height="$imageHeight" alt="Original image">

ja

Koodi: Valitse kaikki

	<img src="$imagePath" width="$imageWidth" height="$imageHeight"></ja:else>

Muutetaan seuraavanlaisiksi

Koodi: Valitse kaikki

		<img src="$imagePath" width="$imageWidth" height="$imageHeight" alt="Original image" class="image2">

ja

Koodi: Valitse kaikki

	<img src="$imagePath" width="$imageWidth" height="$imageHeight" class="image2"></ja:else>

Ja image2 on sen tyylin nimi, jota varsinaisella kuvasivulla käytetää.

Voi kuulostaa hankalalta, mutta on oikeasti helpompaa miltä kuulostaa ^_^