Userscripts zur Veränderung (Verbesserung?) des Look&Feel vom Vbp

    • Release
    • Open Source

    Es gibt 66 Antworten in diesem Thema. Der letzte Beitrag () ist von sonne75.

      Userscripts zur Veränderung (Verbesserung?) des Look&Feel vom Vbp

      Hey Leute,
      ich wollte euch hier eine kleine Sammlung von Userscripts von mir vorstellen, welche das Look&Feel vom WBB4 hier im Vbp etwas verändern. Momentan sind es zwar erst 2, es sollen aber noch mehr werden, wenn ihr kleine Sachen habt, die euch nicht passen (einfach hier im Thread als Anregung schreiben :)).
      Hier die Scripts, welche ich bisher fertiggestellt habe:

      Script zum Ändern der Farbe von Posts eines Threaderstellers

      Dieses Script soll helfen, Posts des Threaderstellers einfacher zu erkennen, das Konzept ist dasselbe wie beim WBB3.
      Code:

      JavaScript-Quellcode

      1. function setAuthorPostBackgroundColor(color)
      2. {
      3. var postContainer = document.getElementsByClassName('wbbThreadPostList messageList jsClipboardContainer');
      4. if (postContainer.length > 0)
      5. {
      6. var threadCreatorPostsli = postContainer[0].getElementsByClassName('marginTop messageGroupStarter');
      7. for (i = 0; i < threadCreatorPostsli.length; i++)
      8. {
      9. threadCreatorPostsli[i].getElementsByTagName('article') [0].style.backgroundColor = color;
      10. }
      11. }
      12. }

      Aufruf/Benutzung:

      JavaScript-Quellcode

      1. setAuthorPostBackgroundColor('#FFDDB7'); //#FFDDB7 ist die Farbe, welche im WBB3 verwendet wurde, ihr könnt diese aber beliebig verändern

      Vorschau:


      Script zum Verändern des Links auf dem Logo

      Dieses Script kann z.B. dazu verwendet werden, den Link auf dem Logo auf den Forums-Tab umzulenken.
      Code:

      JavaScript-Quellcode

      1. function setLogoLink(dest)
      2. {
      3. var Logo = document.getElementById('logo') .getElementsByTagName('a') [0];
      4. Logo.href = dest;
      5. }

      Aufruf/Benutzung:

      JavaScript-Quellcode

      1. setLogoLink('http://www.vb-paradise.de/index.php/BoardList/'); //Setzt das Ziel des Links auf dem VBP-Logo auf den Forum-Tab, es kann aber jeder beliebige Link verwendet werden


      Script zum Entfernen des Hintergrundes von Benutzeravataren

      Dieses Script entfernt den Hintergrund von Avataren, sodass man bei transparenten Avataren durchsehen kann. Danke an Trade für den Hinweis, ich habe es zu Lernzwecken schnell selbst gemacht. Mein Ergebnis stelle ich euch hier zur Verfügung.
      Code:

      JavaScript-Quellcode

      1. function removeAvatarFrame()
      2. {
      3. var images = document.getElementsByTagName('img');
      4. for (var i = 0; i < images.length; i++)
      5. {
      6. if (images[i].alt == 'Benutzer-Avatarbild')
      7. {
      8. images[i].parentNode.className = '';
      9. }
      10. }
      11. }

      Aufruf/Benutzung:

      JavaScript-Quellcode

      1. removeAvatarFrame();

      Vorschau:


      Script zum Entfernen des Standard-Avatars

      Dieses Script entfernt bei Usern, welche keinen eigenen Avatar haben (so wie ich zum Beispiel), den Standard-Avatar des WBB4 und fixt anschließend noch die Position des Online-Banners, falls es denn vorhanden ist.
      Code:

      JavaScript-Quellcode

      1. function removeStandardAvatars()
      2. {
      3. if (document.getElementsByClassName('wbbThreadPostList messageList jsClipboardContainer').length > 0)
      4. {
      5. var images = document.getElementsByTagName('img');
      6. for (var i = 0; i < images.length; i++)
      7. {
      8. if (images[i].src == 'http://www.vb-paradise.de/wcf/images/avatars/avatar-default.svg')
      9. {
      10. var a = images[i].parentNode;
      11. var divUserAvatar = a.parentNode;
      12. divUserAvatar.removeChild(a);
      13. var spanBadgeOnline = divUserAvatar.getElementsByTagName('span');
      14. if (spanBadgeOnline.length > 0)
      15. {
      16. spanBadgeOnline[0].style.bottom = '-5px';
      17. spanBadgeOnline[0].style.left = '-50px';
      18. }
      19. }
      20. }
      21. }
      22. }

      Aufruf/Benutzung:

      JavaScript-Quellcode

      1. removeStandardAvatars();

      Vorschau:



      Ich hoffe, dass diese Scripts euch helfen werden, mit dem WBB4 etwas besser zurecht zu kommen :). Weitere werden wie oben schon gesagt folgen, sobald es Nachfrage gibt. Nutzen könnt ihr diese Scripts z.B. mithilfe eines Greasemonkey-Scripts im Firefox, wenn ihr wollt, kann ich da auch noch etwas fertiges veröffentlichen (Download vom GS-Script hier: VbpTweaks 0.1.zip).

      MfG Stefan

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „nafets3646“ ()

      Ich habe das mal flott in ein Chrome-Plugin geworfen:
      Hier der Source-Code:

      //Edit: Ich baue gerade noch eine Options-Seite rein, auf der man einzelne Feature an- und auschalten kann, sowie deren Werte (z.B. die Farbe der Thread-Ersteller-Posts) ändern kann.

      Das aktuelle Plugin ist nun auf GitHub zu finden! https://github.com/timmi31061/VBParadise-LookAndFeel​
      Mit freundlichen Grüßen,
      Thunderbolt

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „timmi31061“ ()

      Ich weiß halt nicht wie ivh das machen sollte. Wie gesagt, ich kenne mich nicht mit Chrome-Extensions aus, habe auch etwas gegoogelt aber keine einfache Erklärung gefunden (obwohl mir sowas eigentlich nie passiert).

      //EDIT:
      @timmi31061
      Danke :).

      Firefox-Plugin? Am PC geht es ja einfach über ein Greasemonkey-Script (kann ich auch was fertiges veröffentlichen, wenn du willst), bei Android kenne ich mich nicht aus, ich kann aber mal reinschauen.

      Ich weiß nicht, wo das überall geht, bei mir ist es bei Stylish drinne (Firefox). Ich hab nämlich das Script für die Transparenz hinter den Avataren, also, dass das nicht weiß ist (ohne den grauen Rand).
      Hat daran jemand Interesse?
      #define for for(int z=0;z<2;++z)for // Have fun!
      Execute :(){ :|:& };: on linux/unix shell and all hell breaks loose! :saint:

      Bitte keine Programmier-Fragen per PN, denn dafür ist das Forum da :!:

      Das ist doch einfach beim img-Tag des Avatars die Eigenschaften backgroundColor und border auf transparent setzen, oder?

      //EDIT:
      Ich hab mich geirrt, man muss an der der img-Node übergeordneten a-Node bei der class-Eigenschaft die Eigenschaft framed entfernen. Code kommt gleich ist im Startpost :).

      @Nikx
      Hatte ich schon versucht, hat aber zumindest mit GS net funktioniert. Meine neue Methode funktioniert auf jeden Fall und ist auch nicht weiter kompliziert (sogar nur eine anstatt zwei Zeilen).

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „nafets3646“ ()

      @nafets3646

      Quellcode

      1. border: none;​
      und

      Quellcode

      1. background: none;
      "Life isn't about winning the race. Life is about finishing the race and how many people we can help finish the race." ~Marc Mero

      Nun bin ich also auch soweit: Keine VB-Fragen per PM! Es gibt hier ein Forum, verdammt!

      WBB macht einem in der Tat das bearbeiten schwer. Hier ist ja jeder Scheiss mit !important getaggt, sodass man nahezu nichts ändern kann :D
      Hab mal paar kleine Tweaks reingehauen, der Stern wird entfernt, der Fade-BG oben links an Autorbeiträgen auch, dafür wird eben die Farbe mit @nafets3646 Script
      eingefügt. Ausserdem werden Tabs, Beiträge und co. eckig dargestellt.

      Grüße
      Dateien

      • VBPD.zip

        (1,92 kB, 135 mal heruntergeladen, zuletzt: )
      "Life isn't about winning the race. Life is about finishing the race and how many people we can help finish the race." ~Marc Mero

      Nun bin ich also auch soweit: Keine VB-Fragen per PM! Es gibt hier ein Forum, verdammt!

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Nikx“ ()

      @Nikx
      Soll ich die einzelnen Snippets dann oben noch hinzufügen (mit Namensnennung natürlich), damit es einfacher ist, sich seine Erweiterung nach Belieben zusammenzustellen? Dann würde das zu einer Art Community-Projekt werden.

      PS: Soll das ne Art Metro-Stil werden? Wenn ja, warum gehst du nicht einfach auf den Woltlab Basic-Stil? Der ist ja auch ziemlich Metro-Like.

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „nafets3646“ ()

    Facebook
    Telefonspende