Skugga under inläggs rutan

[Julian]

Hallåj,

Hur får jag en skugga under denna rutan, alltså inläggs rutan, på mitt forum. Jag använder samma tema som det här forumet bara att på mitt forum är det inga rundade hörn utan vanliga kantiga samt profilinfon på höger sida.

Det jag vill ha är alltså en liten skugga (gif bild?) under varje inläggsruta... hur får jag till det?

[Julian]

finns ingen som vet?

[Marcus]

Oj... ibland har vi visst bråttom. Om ingen svarat så kan det också bero på att detta forum inte är det som alla våra medlemmar prioriterar högst dygnen runt. Själv prioriterade jag mina barn under söndagen...

[Julian]

Oj... ibland har vi visst bråttom. Om ingen svarat så kan det också bero på att detta forum inte är det som alla våra medlemmar prioriterar högst dygnen runt. Själv prioriterade jag mina barn under söndagen...

ber om ursäkt.

[Marcus]

Man kan skapa skuggor via t.ex. CSS(3), flera moderna webbläsare fungerar det bra i... dock inte i de äldre. Kan man leva med att IE6 får upp sidan utan skuggor så...

box-shadow heter egenskapen.

Om vilka webbläsare som stöjds:
Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera och IE9 (inte ute ännu) ger ett hyfsat bra stöd, även om Mozilla och Webkit kräver "-moz-" respektive "-webkit-" före (OBS! Mozilla Firefox 4.0+ kräver inget prefix.).

Ex. för att det ska fungera i Firefox (före 4.0), -moz-box-shadow.

/marcus

[Sinom]

Hej Julian!

Du kan enkelt lägga till detta som Marcus nämnde, genom att gå till "\styles\prosilver\theme" och öppna "common.css".

Hitta:

Kod: Markera allt

.post {
	padding: 0 10px;
	margin-bottom: 4px;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

Ersätt med:

Kod: Markera allt

.post {
	padding: 0 10px;
	margin-bottom: 4px;
	background-repeat: no-repeat;
	background-position: 100% 0;
	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

Detta skall resultera i följande:


Om du vill ha skuggor på lite fler ställen kan jag skriva en liten guide till detta.

Hugs

[Julian]

Oj! Tusen tack! Det är precis sådär jag vill ha det, förutom skuggan på höger sida. Vill endast ha skugga under rutan, inte på andra ställen.

Dock känner jag efter att ha prövat att CSS inte är vägen att skapa skuggorna för mig, då jag vet att många sitter på just IE. :/ Jag skulle däremot vilja ha precis den skuggan som du visade på bilden (under rutan) i form av gif bild istället.

Så om du har tid och orkar hjälpa mig med hur jag skriver och vart jag skriver det, för att få e gif (skugg) bild sådär under rutan istället för i form av css färger, så skulle jag bli evigt tacksam!

För en bild kan ju alla se Tack för all hjälp än så länge.

[Julian]

Vill inte tjata men måste ändå få fråga...ingen som vet hur man går tillväga för att göra det jag skrev ovan??

[Kjell]

Tar tid att fixa, men att köra en bakgrundsbild vet jag inte om det är så bra....
Skulle behövas taggas med post
http://www.w3schools.com/css/pr_background-position.asp

[Sinom]

Hej Julian!

Jag fixade detta i helgen, men har ännu inte hunnit skriva det här. Skall fixa detta före Fredag.

En notis bara, att endast ha skugga nedanför gör det lite svårt att få det snyggt. Men jag slänger upp en bild så du kan se när jag skriver härnäst.

Hugs

[Julian]

Underbart! Tusen tack!

[Sinom]

Tråkigt att säga, jag hade ersatt hela mitt prosilver thema, när jag svarat på någon annan support-tråd.
Roligt att säga, jag lyckades fixa det igen, och denna gången bättre.

Efter att ha stirrat på detta en bra stund nu kan jag inte längre dömma huruvida det ser naturtroget ut. Så jag låter Er bedömma det.



Om detta är något du vill ha så kan jag skriva hur du gör här.

Hugs

[Julian]

Ja!!! Tusen tack, det är precis såhär jag vill ha det!!!! Hur gör jag?

Tusen tack !

[Sinom]

Då skall vi se.

För att lägga till en bild som skugga under varje post i prosilver:

1 ) Gå till \styles\prosilver\template och öppna viewtopic_body.html.

Hitta:

Kod: Markera allt

<!-- IF postrow.S_FIRST_UNREAD --><a id="unread"></a><!-- ENDIF -->

Lägg till på en ny rad ovanför:

Kod: Markera allt

		<div class="skugga">
		<div class="skuggav">
		<div class="insida">

Hitta:

Kod: Markera allt

<hr class="divider" />

Lägg till ovanför:

Kod: Markera allt

	</div>
	</div>
	</div>

Hitta precis ovanför och ta bort:

Kod: Markera allt

<span class="corners-bottom"><span></span></span></div>

2 ) Gå till \prosilver\theme och öppna colours.css.

Hitta:

Kod: Markera allt

.postbody {
	color: #333333;
}

Lägg till nedanför:

Kod: Markera allt

.skugga {
	background: url("{T_THEME_PATH}/images/skuggram.png") bottom right repeat-x;
}

.skuggav {
	background: url("{T_THEME_PATH}/images/skuggav.png")
	left bottom no-repeat;
	padding-top: 8px;
	padding-left: 0px;
}

.insida {
	position: relative;
	left: 0px;
	top: -9px;
}

3 ) Öppna common.css

Hitta:

Kod: Markera allt

.post {
	padding: 0 10px;
	margin-bottom: 4px;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

Ersätt med:

Kod: Markera allt

.post {
	padding: 0 10px;
	margin-bottom: 1px;
	margin-top: 9px;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

4 ) Spara ner de två bilder jag lägger till här till \prosilver\theme\images

Spara dina ändringar, och uppdatera din stil i Administrationspanel >> Stilar > prosilver > Mallar/Teman/Bildpaket > Uppdatera!

Notis:
Du kan ändra hur mörk skuggan skall vara genom att ändra top: -9px; i colours.css. Testa och hitta det du tycker om!
Jag tog bort de runda hörnen nedtill vid varje post, då det var allt för mycket mer modifiering för att lägga till två kantbilder så det såg bra ut.

Lycka till!

Hugs

[Julian]

Tusen, tusen tack! Du är en stjärna! Ska genast prova detta. Bra beskrivet också.

Återigen TACK!