[gelöst] Hintergrund teil-transparent machen Dragonia-Style

[Luriel]

Hallo,

Ich möchte mein Forum ein wenig abändern.

Verwendeter Style: EZ-Dragonia
http://www.phpbb3styles.net/db/style/Dr ... cc62ebed11

Ich habe bereits ein anderes Hintergrundbild eingefügt. Nun würde ich gerne die schwarzen Teile im eigentlichen Forum ein wenig transparent machen, so das man das Hintergrundbild ein wenig durchcheinen sieht.

Des weiteren soll es an den Stellen, an denen man mit der Maus über eine Zeile fährt wieder ein wenig dunkler werden.

Was auch noch recht schön wäre: wenn das Hintergrundbild fest stehen würde und nicht mit dem Forum mitscrollen.

Ist das überhaupt möglich?
Und wenn ja - an welcher Stelle muss ich änderungen vornehmen?


Gruß
Luriel

[Talk19zehn]

Hi Luriel, ich beziehe mich auf dein Vorhaben, welches du mit den Worten "ein wenig" umschreibst:
Von daher nur eben mal auf die Schnelle gedacht....

suche:

Code: Alles auswählen

.bodyfill {
	background-color: #E4D0A6;
	background-image: url("./styles/Dragonia/theme/images/body.jpg");
	background-position: center top;
	background-repeat: repeat;
}

ersetze mit:

Code: Alles auswählen

.bodyfill {
	background-position: center top;
	background-repeat: repeat;
}

oder ( nur alternativ ) ersetze mit:

Code: Alles auswählen

.bodyfill {
	background-color: #000000;
	background-position: center top;
	background-repeat: repeat;
	opacity: 0.7;
}

Bitte prüfe die Ansicht in den jeweiligen Templates, da ungetestet und teste selbst zudem bitte in den jeweiligen Browsern.

Für weitere Bereiche, wie bspw. Border wären m.E. teiltransparente Grafiken nötig. Der Aufwand ist jedoch recht hoch, wie ich meine.

Grüße

[Luriel]

Hallo,

Besten Dank für die Hilfe.

Unter Firefox sieht es nun fast so aus, wie ich es möchte - muss noch ein wenig mit den Werten Experimentieren. Im InternetExplorer ist von der Transparenz allerdings nichts zu sehen. - Ist aber auch nicht die aktuelle Version.


(Ich habe für die Transparenz die 2. Variante genommen, da die 1. variante nur eine komplette Transparenz lieferte).


Gruß Luriel

[Talk19zehn]

Hi, im Blog-Archiv von Peter Kroener findest du Hinweise auf die Problematik teiltransparenter Hintergründe

Archiv | Alte Blogposts von peterkroener.de
Teiltransparente Hintergrundfarben in allen Browsern (fast) ohne PNG-Dateien
2. Juni 2009  ·  25 Kommentare

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

Ich schraube im Moment an einem Projekt, bei dem ein Designer vielen Elementen einfarbig teiltransparente Hintergründe verordnet hat. Nun gibt es ja dank CSS3 Möglichkeiten, so etwas in Form einfacher Farbangaben (RGBa oder HSLa) einzubauen – allerdings ist es natürlich wie immer so, dass diese Features mit einem eklatanten Mangel an Browserunterstützung zu kämpfen haben. Schuldig im Sinne der Anklage ist neben dem Internet-Explorer-Clan auch Opera.

In dem Zusammenhang kannst du dich u.a. über die Anwendung von Teiltransparenz bspw. informieren auf:
http://www.mediaevent.de/css/transparenz.html
http://tobias-otte.de/essays/css-transparenz/

Der Generator ist ggf. hilfreich: http://timbaumann.info/alphacolor/

CSS3 ist, wie du bemerkt hast, (IE) im Kommen: http://www.w3schools.com/cssref/css3_browsersupport.asp

Viele Grüße

[Luriel]

Hallo,

Danke für den 2. Tipp. Hiermit funktioniert es nun auch im IE.



Für alle, die ebenfalls auf der Suche waren:

Ich habe nicht wie oben angegeben die .bodyfill ergänzt, sondern:

In der Datei: "Dragonia\theme\borders.css" an folgenden 3 Stellen:

Code: Alles auswählen

#menubase_block {
    margin: 0px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    clear: both;

Code: Alles auswählen

#border_block {
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding: 0px;
    width: 100%;
    min-height: 100%;
    height: 100%;
    clear: both;

Code: Alles auswählen

#footer_block {
      margin: 0px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: -20px;
     padding: 0px;
      width: 100%;
    clear: both;

Jeweils folgende 3 Zeilen am Ende vor der Klammer eingefügt:

Code: Alles auswählen

    background-color: #000000;
    opacity: 0.8;
	filter: alpha(opacity=80);

Des weiteren im Verzeichniss : "Dragonia\theme\images\cadre" sämtliche Grafiken in PNG´s umgewandelt und die schwarzen Bereiche darin transparent gemacht.
Dann natürlich auch noch in der obigen Datei: "Dragonia\theme\borders.css" die entsprechenden Dateiaufrufe von ".jpg" in ".png" umbenannt.


Hier das Ergebniss:

http://dragon-cave.de/phpBB3


Gruß
Luriel

[Talk19zehn]

Hello Luriel, ist doch ganz schick geworden. Ich vermisse die Ausrichtung der Hintergrundgrafik bspw. mittels
background-position: center top; und evtl. gar eine Anpassung der Hintergrundfarbe (#CBA45F, #CDB088), die sich an das Bild ein wenig harmonischer "anschmiegt".

Grüße


PS.:
In deinen obigen Angaben = BBCode Code = fehlen am Ende die geschweiften Klammern, die die Notationen schließen.

[Luriel]

Hallo,

Das mit dem Center kann ich noch gleich mit reinschreiben.

Die End-Klammer habe ich absichtlich weggelassen, damit klar ist, das die 3 Zeilen vor der Klammer einzufügen sind. Deshalb hatte ich in der Erklärung nochmal darauf hongewiesen, das es vor die Klammer kommt.


Also das Ergebniss sollte nacher so aussehen:

Code: Alles auswählen

#menubase_block {
    margin: 0px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    clear: both;
    background-color: #000000;
    opacity: 0.8;
	filter: alpha(opacity=80);
}

Code: Alles auswählen

#border_block {
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding: 0px;
    width: 100%;
    min-height: 100%;
    height: 100%;
    clear: both;
	  background-color: #000000;
   opacity: 0.8;
	filter: alpha(opacity=80);
}

Code: Alles auswählen

#footer_block {
      margin: 0px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: -20px;
     padding: 0px;
      width: 100%;
    clear: both;
	  background-color: #000000;
   opacity: 0.8;
	filter: alpha(opacity=80);
}

Gruß Luriel