/*--- 020-Ab hier Navigationshintergrund Transparent ---*/
#nav_n.nav_n, #nav_n.nav_n li {background-color: rgba(255,0,0, 0.5) !important;}
/*--- 020-Ab hier Navigationshintergrund Transparent Ende ---*/
/*--- 022-Ab hier Schatten nach innen im Body ---*/ body { box-shadow: 0 1px 16px inset; -moz-box-shadow: 0 1px 16px inset; -o-box-shadow: 0 1px 16px inset; -webkit-box-shadow: 0 1px 16px inset; -khtml-box-shadow: 0 1px 16px inset; } /*--- 022-Ende Schatten nach innen im Body ---*/
/*--- 021-Ab hier Rahmen und Schatten um Zitate in den Beitraegen ---*/ blockquote { border-color: #e6e6e6; border-radius: 10px 10px 10px 10px; border-style: solid; border-width: 8px 2px; box-shadow: 0 2px 15px; -moz-box-shadow: 0 2px 15px; -o-box-shadow: 0 2px 15px; -webkit-box-shadow: 0 2px 15px; -khtml-box-shadow: 0 2px 15px; } /*--- 021-Ende Rahmen und Schatten um Zitate in den Beitraegen ---*/
/*--- 020-Ab hier Schatten um Forenkorpus, sowie den Beiträgen und dem grossen Chat ---*/ .c_r_content1, .c_r_content2, .c_r_content3, .a_r_content2 { box-shadow: 0 2px 10px inset; -moz-box-shadow: 0 2px 10px inset; -o-box-shadow: 0 2px 10px inset; -webkit-box-shadow: 0 2px 10px inset; -khtml-box-shadow: 0 2px 10px inset; } /*--- 020-Ende Schatten um Forenkorpus, sowie den Beiträgen und dem grossen Chat ---*/
/*--- 018-Ab hier horizontalen Hauptlinien fuer Uebersicht und Beitraege von 1px auf 2px erhoeht und Schatten --- */ hr { box-shadow: 2px 2px 8px; -moz-box-shadow: 2px 2px 8px; -o-box-shadow: 2px 2px 8px; -webkit-box-shadow: 2px 2px 8px; -khtml-box-shadow: 2px 2px 8px; border-bottom: medium none transparent; border-top: 2px solid #e6e6e6; } /*--- 018-Ab hier horizontalen Hauptlinien fuer Uebersicht und Beitraege von 1px auf 2px erhoeht und Schatten --- */
/*--- 015-Ab Hier Hintergrund im Hilfe-Kontext des Login-Menues ---*/ #reg_help { background-image: url("http://up.picr.de/20724470km.jpg"); } /*--- 015-Ende Hintergrund im Hilfe-Kontext des Login-Menues ---*/ /*--- 014-Ab hier Hintergrund und Rahmen fuer das Menue -Gehe zu- unterhalb der Beitraege ---*/ .jumpTo { background-image: url("http://up.picr.de/20724470km.jpg"); border-left: 1px solid #030003; border-right: 2px solid #030003; border-top: 1px solid #030003; border-bottom: 2px solid #030003; } /*--- 014-Ende Hintergrund und Rahmen fuer das Menue -Gehe zu- unterhalb der Beitraege ---*/
/*--- 006-Ab hier Hintergrundfarbe, Grafik und Rahmen im WYSIWYG-Editor --- */ .xob_subiconlist { background-color: #transp; background-image:url("http://up.picr.de/20724470km.jpg"); border: 1.5px solid #030003; } /*--- 006-Ende Hintergrundfarbe, Grafik und Rahmen im WYSIWYG-Editor --- */
<center><a href="http://www.hilfe-tricks-tipps.de/t845f31-quot-Achtung-Bauarbeiten-quot-fuer-halbfertige-Beitraege-quot.html"><img src="http://www.bilder-hochladen.net/files/1tys-57.jpg" border=0></a><p><div style="background-color:#013579;padding:2px;border:2px solid #0000aa;color:#FFFFFF;border-radius:8px;"><a href="http://www.hilfe-tricks-tipps.de/t845f31-quot-Achtung-Bauarbeiten-quot-fuer-halbfertige-Beitraege-quot.html"><span style="color:#ffffff;"><u>Achtung Baustelle!</u></span></a> Der Beitrag wird bald zur Verfügung stehen</div></p></center><br><br><div class="admin"> .... </div>
<center><img src="http://www.bilder-hochladen.net/files/1tys-57.jpg" border=0><p><div style="background-color:#013579;padding:2px;border:2px solid #0000aa;color:#FFFFFF;border-radius:8px;"><span style="color:#ffffff;"><u>Achtung Baustelle!</u></span> Der Beitrag wird bald zur Verfügung stehen</div></p></center><br><br><div class="admin">......</div>
<center> <img src="http://www.bilder-hochladen.net/files/1tys-57.jpg" border=0> <p> <div style="background-color:#013579;padding:2px;border:2px solid #0000aa;color:#FFFFFF;border-radius:8px;"> <span style="color:#ffffff;"> <u>Achtung Baustelle!</u> </span> Der Beitrag wird bald zur Verfügung stehen </div> </p> </center> <br><br> <div class="admin">
Mal abgesehen davon daß die
-Verschachtelung falsch ist, ist vieles überflüssig. Links werden nicht gebraucht und Styles sollen einstellbar werden. Also habe ich es so gekürzt:
1 2 3 4 5 6 7 8 9 10 11
<center> <img class="baustellenschild" src="http://www.bilder-hochladen.net/files/1tys-57.jpg" border=0> <div class="baustellenhinweis" style=""> <span> <u>Achtung Baustelle!</u> </span> Der Beitrag wird bald zur Verfügung stehen </div> </center> <br><br> <div class="admin">
Das Bild hat eine eigene Klasse bekommen und der Textbalken auch.
Im PI werden die Styles für den Balken nun so gesetzt:
Zusätzlich soll nun das Schild für einen Admin anders dargestellt werden. Z.B. etwas kleiner. Also habe ich die Styleanweisung in das start-else-end integriert:
Für Admins ist das Schild nun klein und für alle anderen ist es normal groß. In das start-else-end könnte man nun auch noch die Styles des Balkens für den Admin ändern. Das kannst du aber selbst machen. Evtl. muss dort nur ein !important jeweils rein damit sich beide Einträge nicht in die Quere kommen.
Nun soll noch der Text des Balkens für Admins anders aussehen. Dazu habe ich per jQuery den Inhalt der DIV geändert. Das muss aber in "untere Leiste" "header" weil es erst greifen kann wenn der Beitrag geladen ist.
Am Ende sieht der Forencode so aus:
1 2 3 4 5 6 7 8 9 10
[baustelle] ... [/baustelle]
mit
<center><img class="baustellenschild" src="http://www.bilder-hochladen.net/files/1tys-57.jpg" border=0><div class="baustellenhinweis"><span><u>Achtung Baustelle!</u></span>Der Beitrag wird bald zur Verfügung stehen</div></center><br><br><div class="admin"> .... </div>
Falls das Bild austauschbar sein soll, könnte man den Code noch etwas abändern.
Neuer Kommentar