[phpBB2] Scrollbox in Tabelle, Farben anpassen

Hallo!
Ich habe eine Nachricht auf der Startseite meines Forum erstellt und dort eine Tabelle eingefügt, soweit so gut. Es sieht alles so aus, wie es sein soll und es funktioniert alles. Jetzt wollte ich in der zweiten Zeile, in der linken und der rechten Zelle je eine Scrollbox einfügen, das hat auch funktioniert, doch die ganz normalen Scrollleisten sehen ja nicht so hübsch aus, vor allem stechen sie sehr heraus, wenn der Forenstyle insgesamt ganz anders ist. Deswegen wollte ich die Farben anpassen und hatte auch schon die CSS Befehle die ich dann in den Code eingefügt habe, jedoch ist dabei nichts passiert.
Ich habe es über eine class versucht und über eine id, doch beides brachte mit kein Ergebnis ein. Ich habe auch versucht die Befehle direkt über <div style=""> einzufügen, hab damit allerdings auch nichts erreicht.

Hier einmal der Code von der Tabelle

Code:

<style type="text/css">
.tg{border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Cambria, sans-serif;font-size:12px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.tg th{font-family:Cambria, sans-serif;font-size:12px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
</style>            
<table class="tg" style="width:808px;">
                
   <tbody>
                  
      <tr>
                      
         <th style="width:311px; text-align:center;" class="tg-031e">
                  <strong>Daily Prophet</strong>      
         </th>
                      
         <th style="width:174px; text-align:center;" class="tg-031e">
                   <strong>Floo Network</strong>      
         </th>
                      
         <th style="width:317px; text-align:center;" class="tg-031e">
                   <strong>Inplay</strong>      
         </th>
                      
      </tr>
                  
      <tr>
                      
         <td style="width:317px; text-align:left;" class="tg-031e"> /* Hier die erste Scrollbar */
                   <strong>3. August 2015</strong><br />Das Forum wurde eröffnet und der Style ist soweit fertig. Ob und wann es zur Eröffnung kommt steht in den Sternen - wahrscheinlich aber gar nicht.      
         </td>
                      
         <td style="width:174px; text-align:center;" class="tg-031e">
                   <strong><a href="http://hogwartsishome.forumieren.com/f4-rules">Regulations</a><br /><a href="Storyline.htm">Storyline</a><br /><a href="yacht.htm">Requests</a><br /><a href="Listen.htm">Wanted & Unwanted</a><br /><a href="swimmingpool.htm">Our beloved Ones</a><br /><br /><a href="auto.htm">Your Team</a><br /> </strong>      
         </td>
                      
         <td style="width:317px; text-align:left;" class="tg-031e"> /* Hier die zweite Scrollbar */
                   <img style="float:left;" src="http://i18.servimg.com/u/f18/16/84/06/28/grafik14.png" /> <em>Date:</em><br /><em>Weather:</em><br /><br />Hier kommen eigentlich Infos zum Inplay hin. Der Aktuelle Plot wird hier in einer kurzen Übersicht zusammengefasst und mit einem kleinen Link könnt ihr auch direkt ins entsprechende Forum wechseln und euch den Plot ausführlicher angucken.<br /><br />                    
            <div align="center">
                                   <a href="Inplay.htm"><em>Actual Story</em></a>      
            </div>
                        
         </td>
                      
      </tr>
                  
   </tbody>
</table>

Und hier der Code für die Umgestaltung der Scrollbar, die angegebenen Farben sind schon die Richtigen.

Code:


scrollbar-face-color: #5fa3c2;
scrollbar-highlight-color: #5fa3c2;
scrollbar-3dlight-color: #5fa3c2;
scrollbar-darkshadow-color: #5fa3c2;
scrollbar-shadow-color: #5fa3c2;
scrollbar-arrow-color: #2e2e2e;
scrollbar-track-color: #2e2e2e;


Wie kann ich nun die Farben in die Tabelle einbringen? Oder funktioniert das überhaupt nicht?

http://hogwartsishome.forumieren.com

Du kannst bitte mal nach deiner Frage Googeln.
Wichtig hierbei ist, das du wissen musst, das diese Funktion nicht dem Standard entspricht.
Wenn du dir das hier mal bitte durchliest:
http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Benutzeroberfläche/Scrollleisten
Dort wird erklärt, das der CSS Code den du hier verwendest, nur für den Internetexpolrer gültig ist.
Das selbe wird auch hier erklärt:
http://www.gaijin.at/olsbarcss.php

Um deine Scrollbars auch mit anderen Browsern anzeigen zu können, must du auch die Eigenschaften für die übrigen Browser hinzufügen.
Auch dabei kann dir ein Generator helfen:
http://snapbuilder.com/code_snippet_generator/chrome_scrollbar_css_color_code_generator/

Danke für den Tipp, ich probiere es mal aus (:

So, ich hab nun den Code generiert, habe aber Probleme damit, ihn richtig in den Tabelle einzufügen. Muss das über eine class gemacht werden?

Code:

<style type="text/css">
<!--
body {
/* Begin ::-webkit Scrollbar CSS Color Code by http//:snapbuilder.com */
::-webkit-scrollbar {width:2px;height:185px;}
::-webkit-scrollbar-button {background-color:rgba(95,163,194,1);}
::-webkit-scrollbar-track {background-color:rgba(46,46,46,1);}
::-webkit-scrollbar-track-piece {background-color:rgba(46,46,46,1);}
background-color:rgba(95,163,194,1); border-radius:2px;}
::-webkit-scrollbar-corner {background-color:rgba(46,46,46,1);}
-->
</style>

Hallo @Tinka,

Frank hat dir oben gute Links mit Erklärungen gegeben. Die wichtigste Info daraus: Nur Chrome und Internet Explorer unterstützen Styleänderungen der Toolbar! User mit anderen Browsern wie Firefox werden davon überhaupt nichts mitbekommen.

Falls du die Änderung trotzdem vornehmen möchtest, sollte der CSS-Code für IE und Chrome ins CSS-Stylesheet eingefügt werden...
AB -> Anzeige -> Bilder & Farben -> Farben -> Reiter "CSS Stylesheet"
... und als Beispiel so aussehen:

Code:

.scrollbar {
  height: 200px;
  overflow: scroll;
  scrollbar-face-color: #5fa3c2;
  scrollbar-highlight-color: #5fa3c2;
  scrollbar-3dlight-color: #5fa3c2;
  scrollbar-darkshadow-color: #5fa3c2;
  scrollbar-shadow-color: #5fa3c2;
  scrollbar-arrow-color: #2e2e2e;
  scrollbar-track-color: #2e2e2e;
}
.scrollbar::-webkit-scrollbar {width:3px;height:3px;}
.scrollbar::-webkit-scrollbar-button {background-color:rgba(95,163,194,1);}
.scrollbar::-webkit-scrollbar-thumb {height:50px; background-color:rgba(95,163,194,1); border-radius:2px;}
.scrollbar::-webkit-scrollbar-track {background-color:rgba(46,46,46,1);}
.scrollbar::-webkit-scrollbar-track-piece {background-color:rgba(46,46,46,1);}
.scrollbar::-webkit-scrollbar-corner {background-color:rgba(46,46,46,1);}

Im HTML der Tabelle lässt sich eine Scrollbox am besten über ein div-Element innerhalb einer Zelle umsetzen. Einfaches Beispiel:

Code:

<table>
  <tr>
    <td width="250"><div class="scrollbar">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></td>
    <td width="250"><div class="scrollbar">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></td>
  </tr>
</table>

Gut, ich habe den Code jetzt im Stylesheet eingefügt und sehe, dass es mir nur im IE richtig angezeigt wird.
Wenn ich jetzt aber zum Beispiel auf den dritten Link gehe, den Frank mir gezeigt hat wird mir die große Scrollbar, die zum Browser gehört ja auch anders dargestellt und ich benutze Opera. Wie kann das sein, wenn diese Art der Modifikation eigentlich nicht mit Opera kompatibel ist?

Opera verwendet auch Teile der Webkit-Engine (Chrome ist zu 100% Webkit) und deshalb kann es sein, dass du Änderungen auch damit siehst.
Aber wie gesagt: Vollständig funktioniert die Änderung nur mit IE und Chrome und ein großer Teil deiner User, der andere Browser verwendet, wird die Änderung nicht sehen.

Dein Anliegen sollten wir damit aber gelöst haben, oder?

Ja, ist jetzt geklärt (: