Modifying the titles of posts with a tampermonkey script to change their background color in a vBulletin forum

I'm currently working on developing a Tampermonkey script to alter the theme of a website: which seems to be built on vBulletin.

This is the script I have been experimenting with:

// ==UserScript==
// @name         vBulletin Forum Dark Mode
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Activate 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;
        }

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

        /* Include more styles here as necessary */
    `);

})();

Despite my efforts, I have not been able to change the background color of the titles as illustrated with the red rectangles above. I am unable to locate the corresponding element to adjust its properties:

https://i.sstatic.net/JcS8D.jpg

In essence: How can I modify the background color of the highlighted elements in the screenshot to black?

Your assistance would be greatly valued.

cssthemestampermonkeydarkmodevbulletin

Answer №1

It seems like the issue is related to CSS selectors.

To solve this problem, you will need to target the correct table(s) that contain each post - specifically, 

all tables with an ID that starts with the characters "post"
:

table[id^="post"]

Once you have selected the appropriate table, you should then target the first row (TR) within that table and style each of its table cells (TDs).

Consider including the following code snippet in your CSS:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using an External Style Sheet on AMP Pages is not allowed

I'm currently in the process of converting my HTML page into AMP Pages. I recently came across a test url on to validate my AMP pages. Here's a screenshot for reference: https://i.sstatic.net/wcDLH.png However, I encountered an issue when tryi ...

htmlcssamp-html

I'm having trouble getting my <aside> HTML tag to align properly within my grid section

I'm struggling with setting up grids. I have defined the boundaries and everything seems to fall into place within the grid, except for my aside element that I want to appear on the right side of the screen. Interestingly, this issue arises when using ...

htmlcsssasscss-grid

Disable, Hide, or Remove Specific Options in a Single Dropdown Selection

A challenge I am facing involves creating a form with multiple select options that need to be ranked by the user from 1-8. However, I am encountering some difficulties in hiding, removing, or disabling certain select options. Below is an excerpt from my f ...

javascriptjqueryhtmlcssforms

Specify the height of a div tag based on a certain condition

I'm trying to style a div tag in a specific way: If the content inside the div is less than 100px, I want the div tag's height to be exactly 100px. However, if the content's height exceeds 100px, I want the div tag's height to adjust au ...

htmlcss

What is the best way to insert a character (::before) before an element?

I am trying to add a circle/dot using ::before on an element. • • However, I cannot seem to make it visible! .line ::before{ content:'•'; } and .line ::before{ content:'•'; } (Still not showing) I ...

csshtml-entitiescss-content

CSS gallery slideshow with images that smoothly fade-in and fade-out at a specified location

In the image below, at position 4 (marked by yellow circle) from the left where picture 6 is displayed, I want a cross-fade (fade-in/fade-out) gallery of images to take place. Specifically at position 4, I am looking for a cross-fade (fade-in/fade-out) ef ...

htmlcsscss-animationsfadeinfadeout

Ideal C++ tool for displaying a non-changing HTML page

I am looking to develop a simple cross-platform C++ project for displaying HTML pages, like an application that showcases help materials. These pages may contain images and styles (CSS embedded in HTML). I am researching the best way to incorporate the fol ...

htmlc++cssqtzooming

Floating container leads to delays

My goal is to create a div that changes when I hover over it. However, when I move my mouse into the div, there seems to be some lagging and the content does not appear clearly. Below is the HTML and CSS code I have used: .unshow-txt:hover, .unshow-txt: ...

htmlcss

Adjust the CSS styling for a newly added row in a JavaFX TableView

Apologies for any errors, I am French. I am currently facing an issue with an empty tableView in my project. There is a button labeled "Add" that adds a row to the tableView when clicked. Another button labeled "Cancel" appears when a row in the tableView ...

cssjavafxtableview

The disappearance of the checkbox is not occurring when the text three is moved before the input tag

When I move text three before the input tag, the checkbox does not disappear when clicked for the third time. However, if I keep text three after the input tag, it works fine. Do you have any suggestions on how to fix this issue? I have included my code be ...

javascriptjqueryhtmlcssangularjs

Toggle the slide when you hit submit

I'm considering the functionality of my code. I am interested in creating a slide toggle effect on a div or span when hovering over an input submit button. Here is an example: https://i.sstatic.net/pBSK8.png What is the best approach to achieve thi ...

jqueryhtmlcss

Can you guide me on implementing a transition animation through class toggling?

I am facing an issue where certain elements need to be highlighted or unhighlighted conditionally. To achieve this, I have assigned a class called highlight to the elements that require highlighting with a transition animation. The challenge arises when t ...

htmlcsscss-transitions

Wrapping an anchor tag with a div in Codeigniter

Can a div tag be used inside an anchor function? I have a div with the following CSS: #first{ opacity:0; } Now, I want to include it in my anchor element. Here is the code snippet: <?php if(is_array($databuku)){ echo '<ol>&l ...

javascriptjqueryhtmlcsscodeigniter

What is the best way to achieve this Bootstrap design without copying the content?

Trying to achieve a specific Bootstrap layout without repeating content is my current challenge. Essentially, I aim to divide some content into 2 columns at the sm/md breakpoints and then switch to 3 columns for the lg breakpoint. The layout for sm/md bre ...

htmlcsstwitter-bootstrap

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Source Code Repository: https://github.com/qcaodigital/cocktail_curations Live Site: I recently deployed my NextJS project to Netlify and everything seems to be working fine, except for one issue. Each page has an exit animation (currently set to change ...

cssreactjsnext.jscss-modulesframer-motion

PHP Bootstrap Confirmation Dialog Tutorial

Is there a way to implement a delete confirmation dialog? When 'yes' is clicked, the message should be deleted, and when 'no' is clicked, the delete operation should be canceled. At present, this is how it looks in my view: <a href ...

phpjavascriptjqueryhtmlcss

Restoring styles back to the default CSS settings

I am currently working on creating visualizations using D3, and one challenge that I have encountered is the need to define a lot of styles within my code instead of in my CSS where I would prefer them to be. This necessity arises mainly to support transi ...

javascriptcssd3.js

What is the proper way to incorporate html entities in my specific situation?

In my application, I am attempting to incorporate double macron characters. My current method involves using the &#862; entity, like this: t&#862;t, which results in t͞t. However, I have encountered issues with reliability, as sometimes the ...

htmlcss

Adjusting height in Google Maps to fill the remaining space

Currently, I am developing a map application where I want the Google Maps DIV to occupy the remaining height under the header. Here is the code snippet: <!DOCTYPE html> <head> <title>Map Application</title> <style type ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

What is the method for choosing multiple IDs using CSS?

Is there a way to target multiple IDs in CSS? For instance: #test_id_*{ } <div id="test_id_10"></div> <div id="test_id_11"></div> ...

css