[3.2] Div über den ganzen Wrap - geht das?

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.1/3.2, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 1347
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

[3.2] Div über den ganzen Wrap - geht das?

Beitragvon Tastenplayer » 14.10.2018 20:37

Hallo

Habe vermutlich eine sehr doofe Frage respektive ich denke es ist unmöglich.

Kann ich einen div über den ganzen Wrap machen? Meine Versuche sind leider alle fehlgeschlagen.
Versuch habe ich in overall_header.html gemacht. Müsste doch diese html Datei sein, oder?
Mein Effekt war leider am Ende des PC Bildschirms zu sehen und nicht über dem ganzen Wrap :D
Schlussendlich habe ich nur eine abgespeckte Version in der css direkt beim Wrap geschafft. [ externes Bild ]:D

Code: Alles auswählen

<div class="box effect8">
Das ist ein spezieller Shadow Border. Wo die div class hin muss - vor dem Wrap denke ich doch. Aber wo muss der Abschluss hin?

CSS

Code: Alles auswählen

* Effect 8
 * ===============================================*/
.effect8 {
   position:relative;
   -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after {
   content:"";
   position:absolute;
   z-index:-1;
   -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
   -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
   box-shadow:0 0 20px rgba(0,0,0,0.8);
   top:10px;
   bottom:10px;
   left:0;
   right:0;
   -moz-border-radius:100px / 10px;
   border-radius:100px / 10px;
}
.effect8:after {
   right:10px;
   left:auto;
   -webkit-transform:skew(8deg) rotate(3deg);
   -moz-transform:skew(8deg) rotate(3deg);
   -ms-transform:skew(8deg) rotate(3deg);
   -o-transform:skew(8deg) rotate(3deg);
   transform:skew(8deg) rotate(3deg);
}


Code ist von hier https://codepen.io/haibnu/pen/FxGsI
Mein Portal: https://www.portal.my-tastenworld.ch/ Mein Forum: https://www.forum.my-tastenworld.ch/
The best online translator comes from Köln DE
Be the best version of yourself rather than a bad copy of someone else!

Lehrling
Supporter
Supporter
Beiträge: 3213
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.2] Div über den ganzen Wrap - geht das?

Beitragvon Lehrling » 14.10.2018 21:27

Das hier [/div] muss in den overall_footer.html.

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 1347
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: [3.2] Div über den ganzen Wrap - geht das?

Beitragvon Tastenplayer » 14.10.2018 22:04

Lehrling hat geschrieben:Das hier [/div] muss in den overall_footer.html.

Hab jetzt grad ne definitive lange Leitung
Das

Code: Alles auswählen

<div class="box effect8">
muss in overall_header und der Abschluss

Code: Alles auswählen

[/div]
in overall_footer. :-? Aber irgendwie ist es ja auch logisch. Der Wrap geht ja über das ganze Forum.
Na gut versuch ich morgen einfach mal. Aber auf jeden Fall wieder zuerst im Prosilver. Bei mir im Style hat es ja noch andere Sachen, da weiss man nie.

Edit: Es ist eben manchmal ziemlich schwierig, man versucht sich das als Ganzes vorzustellen, aber man denkt es irgendwie nicht bis zum Ende! Irgendwie lässt man sich von den dazwischen liegenden Dateien verwirren. Das war dann wohl auch so, als ich versuchte einen Style von A-Z neu aufzubauen und immer zwei Wrap erhielt :)

Edit: Hat trotzdem bisher nicht geklappt. Es gibt nur links und rechts aussen im Background einen Bogen, trotz

Code: Alles auswählen

[/div]
in overall_footer. :D . Aber klar, ich versuch das weiter.

Im Moment mit neuem Code sieht es langsam immer besser aus. Muss nur noch schauen, dass ich es links noch etwas weiter nach oben hinbekomme . Und klar, auch einmal nachsehen, wie das dann in uralt Browser aussieht. [ externes Bild ]

Code: Alles auswählen

.mytaste_wrap {
   background-color: #CCCCCC;
   background-image: url("./images/wrap.jpg");
   border-radius: 8px;
   margin: -11px auto 20px;
   max-width: 1320px;
   padding: 15px;
   box-shadow: 0 3px 25px #000;
   transition: all 0.7s linear;
   -webkit-transition: all 0.7s linear;
   -moz-transition: all 0.7s linear;
   -o-transition: all 0.7s linear;
   -ms-transition: all 0.7s linear;
}
Mein Portal: https://www.portal.my-tastenworld.ch/ Mein Forum: https://www.forum.my-tastenworld.ch/
The best online translator comes from Köln DE
Be the best version of yourself rather than a bad copy of someone else!


Zurück zu „Styles, Templates und Grafiken“