Seite 1 von 2
Änderung von #centerthis in stylesheet.css
Verfasst: 10.02.2013 19:23
von cyjo5
Hallo,
ich nutze phpBB 3.0.11 mit Subsilver2.
Ich habe die Breite des Forums auf 70% eingestellt und ein overall Hintergrundbild aufgelegt.
Das Forum ist unter
http://www.aquarienberater.de/forum zu finden.
Nun wollte ich den Bereich zwischen Header und Footer (also zwischen den Menüs und den einzelnen Forenbereichen) nicht komplett transparent lassen.
Das Ergebniss sollte (zumindest weitgehend) so aussehen wie im Shop:
http://www.aquarienberater.de/shop
Zunächst habe ich deshalb mit Firebug den richtigen Bereich rausgesucht (centerthis) und habe den Eintrag wie folgt geändert:
Code: Alles auswählen
#centerthis {
padding: 0 20px;
width: 70%;
background-color: #ECE8E8;
/* zum mittig machen folgendes noch */
margin-left: auto;
margin-right: auto;
}
Somit habe ich nun erstmal einen silbernen Hintergrund zum testen geschaffen. OK, der Bereich stimmte, so war's geplant.
Dann wollte ich das ganze mit einer Grafik überlagern (halt so, wie für das Hintergrundbild).
Also habe ich folgendes reingeschrieben:
Code: Alles auswählen
#centerthis {
padding: 0 20px;
width: 70%;
background-color: #ECE8E8;
background-image: url(./images/Trans50.giv);
background-position: center;
background-repeat: repeat-x;
background-size: cover;
/* zum mittig machen folgendes noch */
margin-left: auto;
margin-right: auto;
}
Die Datei wird auch angezeigt, allerdings nicht semitransparent, oder halt doch, aber die eingestellte bg-c liegt halt noch darunter. Nehme ich diese raus oder setze sie auf transparent, verschwindet dummerweise auch das bg-i.
Wo mache ich da einen Fehler, oder geht das gar nicht so wie ich mir das vorstelle?
Außerdem habe ich noch keine Möglichkeit gefunden, wie ich den Bereich der centerthis schmaler machen kann, damit er direkt auf Forenbreite aufhört und nicht links und rechts etwas übersteht. Kann man das evtl. auch ändern ?
lg Frank
Re: Änderung von #centerthis in stylesheet.css
Verfasst: 10.02.2013 20:02
von Crizzo
Hi,
liegt da nicht ein Tippfehler vor?
.giv soll doch sicher .gif heißen, oder?
Dann machst du einen Fehler in der Regel. Wenn die
background-color entfernt oder auf "transparent" definiert wird, dann bleibt das
background-image trotzdem noch da sein.
Zudem verstehe ich nicht, wieso du
Code: Alles auswählen
background-position: center;
background-repeat: repeat-x;
background-size: cover
Die Position ist überflüssig, wenn du
repeat nutzt.
Cover ist CSS3 und streckt die 10x10px Grafik auf Elementbreite, wieso? Nimm doch das hier:
Aber selbst wenn ich das so einstelle, deine Hintergrundgrafik ist nicht transparent, ich kann wenn die da liegt dahinter nichts mehr sehen.
cyjo5 hat geschrieben:Außerdem habe ich noch keine Möglichkeit gefunden, wie ich den Bereich der centerthis schmaler machen kann, damit er direkt auf Forenbreite aufhört und nicht links und rechts etwas übersteht. Kann man das evtl. auch ändern ?
Finde:
Code: Alles auswählen
#centerthis {
background-image: url("./images/Trans50.gif");
background-repeat: repeat;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
width: 70%;
}
und setze das
padding auf "0".
Grüße
Re: Änderung von #centerthis in stylesheet.css
Verfasst: 10.02.2013 20:37
von cyjo5
Hallo Blackhawk87,
danke für deine Hinweise.
Den Tippfehler hab ich doch glatt übersehen. Sollte wirklich .gif sein.
Das mit der Grafik versteh' ich nicht. Die Verschwindet sobald ich die Farbe lösche. Hab's gerade nochmal probiert (nach deinen Änderungen).
Ich hatte den Code so von der Änderung des Hintergrundes übernommen und hatte geklappt. Leider kenn ich mich immer noch nicht so gut aus.
Aber dein Vorschlag ist kürzer und Eleganter. Habe ihn eingesetzt.
Das padding habe ich auf 0 gesetzt, habe ich irgendwie unbewußt ignoriert, dass ich da was ändern konnte
Nur das mit der Grafik, das ist mir echt zu hoch. Die gleiche Grafik habe ich doch auch im Shop benutzt. Da geht es doch ohne Probleme.
Habe jetzt grade nochmal eine neue 50%transparent erstellt, 1x als gif und 1x als png. Bei beiden der gleiche Effekt. Keine Halbtransparenz.
lg
Frank
Re: Änderung von #centerthis in stylesheet.css
Verfasst: 10.02.2013 20:54
von HabNurNeFrage
Hi,
halbtransparente Gifs gibt es nicht.
Das würde mit einem .png funktionieren.
Hier einiges über Teiltransparenz:
http://aktuell.de.selfhtml.org/artikel/ ... ansparenz/
Nach den Korrekturen an Deiner ID versuch mal Folgendes hinter Deinem Code:
Code: Alles auswählen
#centerthis img {
filter:alpha(opacity=60); /* IE */
-moz-opacity:0.6; /* Mozilla */
opacity: 0.6; /* CSS3 */
}
Dabei sind "60" und die "0.6" Angaben, die 40% Durchsichtigkeit ergeben.
Je nachdem, wie durchsichtig Du es willst, kannst Du die Werte anpassen.
Höhere Werte ergeben weniger Durchsicht.
LG
PS: Hier steht auch noch was hilfreiches dazu:
http://www.w3schools.com/css/css_image_transparency.asp
Re: Änderung von #centerthis in stylesheet.css
Verfasst: 10.02.2013 21:32
von cyjo5
Hallo,
danke für den Tip.
Mit dem gif stimmt. Hatte das im Shop erst mit der gif probiert und weil das nicht ging dann die png genommen.
Fürs Forum hab ich mich dann glatt wieder vertan und die falsche Grafik genommen.
Den Farbeintrag raus, und deine Ergänzung rein, und der Hintergrund wird wie beim Shop mit einer semitransparenten blauen Fläche überzogen.
Nur ein Problem gibt dabei noch: Der gesamte Header wird mit überzogen. Wie kann ich das ändern ? Mit padding geht's nicht.
Ach ja, kann ich das halbtransparente am Unteren Rand irgendwie ein Stück nach oben bekommen, so daß da die Grafik normal zu sehen ist (halt wie im Shop)
lg
Frank
Re: Änderung von #centerthis in stylesheet.css
Verfasst: 10.02.2013 22:10
von Crizzo
Gib #wrapheader einfach einen Hintergrund der nicht durchscheint und den tranparenten überdeckt.
Re: Änderung von #centerthis in stylesheet.css
Verfasst: 10.02.2013 23:25
von cyjo5
Hi,
funktioniert leider nicht. Wenn ich #wrapheader eine Grafik zuweise, wird damit auch der Bereich unter dem Buttonmenü (die Zeilen Anmelden und Dein letzter Besuch) abgedeckt. Am Zustand oben im Header ändert sich dadurch nichts.
Lege ich die Grafik in den Bereich #logodesc, habe ich zumindest nur den oberen Teil damit abgedeckt. Leider liegt das Halbtransparente über der Logografik, die neu eingefügte Grafik aber nicht. Bei einem Grafikprogramm würde ich jetzt sagen, die Logografik muß in die oberste Ebene versetzt werden.
lg
Frank
Re: Änderung von #centerthis in stylesheet.css
Verfasst: 11.02.2013 00:15
von HabNurNeFrage
Hi,
in /styles/subsilver2/template/overall_header.html
ausschneiden:
<div id="centerthis"> => dafür an gleiche Stelle eingeben:
<div align="center">
finden:
<div id="menubar">
füge in Zeile
davor wieder ein:
<div id="centerthis">
ganz unten vor den body-tag dann noch einmal hinschreiben:
</div>
Dann Cache leeren
Solange Du keinen rechts/links-Überstand des halbtransparenten Bereiches neben dem Forenblock haben willst,
ist das eine Möglichkeit, den Header von der vornehmen Blässe auszusparen.
Mit dieser Methode würde ein eventueller Überstand dann unschön unterhalb des Headers einsetzen.
OT: Allerdings fand ich es schöner, als noch ein kleiner Überstand des blaen ins graue um den Forenblock zu sehen war...
Für den Abstand unten zum Fensterrand kannst Du so mal testen:
finde in /styles/subsilver2/theme/stylesheet.css
ersetze mit:
Code: Alles auswählen
#wrapfooter {
text-align: center;
clear: both;
margin-bottom: 10px;
}
LG
Re: Änderung von #centerthis in stylesheet.css
Verfasst: 11.02.2013 00:19
von Talk19zehn
Hello cyjo5,
cyjo5 hat geschrieben:Ach ja, kann ich das halbtransparente am Unteren Rand irgendwie ein Stück nach oben bekommen, so daß da die Grafik normal zu sehen ist (halt wie im Shop)
Du könnest versuchen mit margin-bottom zu operieren:
Code: Alles auswählen
#wrapfooter {
clear: both;
margin-bottom: 22px;
text-align: center;
}
Die ID
bezieht sich ja auf auf alle img´s, da das Forum innerhalb der ID liegt. Damit sind natürlich alle Foren-Grafiken entsprechend dem Vorgabewert von 0.5 transparent.
Nur mal so gedacht:
Hast du probiert, ggf. mit einer namentlich anderen ID oder Klasse vorzugehen ( anstelle von #centerthis img )? Dies müsste doch machbar sein.
Oder du verlegst im Template die ID logodesc
vor die ID centerthis, verlagerst quasi den Div-Container, und richtest die ID logodesc neu aus:
Code: Alles auswählen
#logodesc {
background-image: url("./images/Trans0b.png");
background-repeat: repeat;
margin: 0 auto;
margin-top: 13px;
width: 70%;
}
Mit margin-top experimentiere bitte ein wenig. Der Wert für padding wäre m.E. 0. Von daher löschte ich zunächst jene Zeile.
Viele Grüße
Edit:
HabNurNeFrage war ja wieder fix...
Ich lasse mein Posting dennoch stehen.
LG
Re: Änderung von #centerthis in stylesheet.css
Verfasst: 11.02.2013 10:24
von cyjo5
Hallo und vielen Dank für eure Hilfestellung.
Irgendwie scheine ich aber zu blöd zu sein.
@ HabNurNeFrage: Wenn ich das so mache, bleiben nur noch die beiden Zeilen mit Anmeldung und Dein letzter Besuch hinterlegt und auf 70% Breite. Der Rest ist wieder wie vorher und das Forum und der Header auf 100% Breite.
Die Sache mit dem #wrapfooter hat geklappt, Wert auf 20px eingestellt.
@ Talk19zehn: #wrapfooter hat wie grade schon erwähnt funktioniert.
Das mit der anderen ID oder Klasse ist mir (noch) zu hoch. Da bräuchte ich dann eine Schritt für Schritt Anleitung, was wo zu machen ist (halt für Dummies).
In der stylesheet.css habe ich die #logodesc an der alten Stelle rausgenommen und vor der #centerthis eingefügt. Dann habe ich die Werte nach deinen Vorgaben geändert.
Ergebnis: Der Header wird schmaler, das halbtransparente ist rechts und links daneben zu sehen und die Logografik wird immer noch überlagert. Was habe ich da falsch gemacht ?
Du hast ja geschrieben: "Oder du verlegst im Template die ID logodesc vor die ID centerthis, verlagerst quasi den Div-Container, und richtest die ID logodesc neu aus:"
In meinem Shop-System sind das zwei Dateien, eine style.css (Design) und eine mainpage.tpl.php (Template). Mit phpBB kenne ich mich noch ncht so aus, aber ich habe hier im prosilver nirgendwo etwas gefunden was nach einer sep. template-Datei aussieht.
lg
Frank
Ach ja, und noch 'ne dumme Frage: Kann ich irgendwie das Logobild etwas weiter nach links und nach unten versetzen? Wenn ja, wo und wie?