Search code examples
cssthemestampermonkeydarkmodevbulletin

Changing the background color of posts' titles in a vBulletin forum using tamperonkey script

I am trying to create a Tampermonkey script to change the theme of the website: https://www.cfd-online.com/Forums/comsol/70028-shear-stress-velocity-profile.html which I believe is based on vBulletin.

I have tried the following script:

// ==UserScript==
// @name         vBulletin Forum Dark Mode
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Enable dark mode for vBulletin forum posts
// @author       Me
// @match        https://www.cfd-online.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Add custom CSS styles for dark mode
    GM_addStyle(`
        /* Dark mode styles */
        .alt1, .alt2, .aalt1, .aalt2, table, tbody, tr, .thead, .tborder, #posts, .smallfont td {
            background-color: #1e1e1e !important;
            color: #dcdcdc !important;
        }

        a, .smallfont {
            color: #81a2be !important;
        }

        a {
            color: #81a2be !important;
        }

        /* Change the background color of the post title section in each reply */
        .tborder tbody tr, #posts{
            background-color: #1e1e1e !important;
        }

        /* Add more styles here as needed */
    `);

})();

But I cannot change the background color of the titles as shown above with the red rectangles. I can't find the corresponding element to change its attributes:

enter image description here

In summary: How to change the background color of the highlighted elements in the screenshot to use black color?

Any help is appreciated.

Solution

  • This is a CSS selectors issue.

    First, each post is within a table - so you must select the correct table(s) - all tables with an ID that begins with the characters "post":

    table[id^="post"]

    And then you need to select the first TR within that table... and style each of its TDs.

    Try adding this to your code:

    table[id^="post"] > tbody > tr:first-of-type td {
   background: black;
   color: white;
}