Consider modifying the following:
.bg_popup-content-bible {color:#000000 !important;}
Disregard the CSS specificity checker as I have already tested the following CSS on your website and confirmed its functionality. Remember to place it in your site.css.
.bg_popup-content-bible p {
color: #000000;
}
The code above must be written exactly like that to override the styling of <p>
that you have previously set in site.css:
p {
color: #f5f5f5
}
UPDATE
The issue does not lie with the script. Based on your comments, it appears that you are having difficulty editing or outputting CSS directly. In this case, the alternative is to modify the script provided earlier:
Replace this section:
tooltip.innerHTML = '<div class="bg_popup-header"><div class="bg_popup-header_title"><strong>'+reference_display+' '+tooltip_content.version+'</strong></div></div><div class="bg_popup-content"><div class="bg_popup-content-bible"><p>'+tooltip_content.text+' <a class="bg_popup-copyright" href="'+bgHost+tooltip_content.version_url+'" target="_blank">('+tooltip_content.version+')</a> <a class="bg_popup-more" href="'+bgHost+'/passage/?search='+tooltip_content.reference+'&version='+tooltip_content.version+'&src=tools" target="_blank">More</a></p></div></div><div class="bg_popup-footer"><a class="bg_popup-bglogo" href="'+bgHost+'/" target="_blank"></a></div>';
with this one:
tooltip.innerHTML = '<div class="bg_popup-header"><div class="bg_popup-header_title"><strong>'+reference_display+' '+tooltip_content.version+'</strong></div></div><div class="bg_popup-content"><div class="bg_popup-content-bible"><p style="color:#000000">'+tooltip_content.text+' <a class="bg_popup-copyright" href="'+bgHost+tooltip_content.version_url+'" target="_blank">('+tooltip_content.version+')</a> <a class="bg_popup-more" href="'+bgHost+'/passage/?search='+tooltip_content.reference+'&version='+tooltip_content.version+'&src=tools" target="_blank">More</a></p></div></div><div class="bg_popup-footer"><a class="bg_popup-bglogo" href="'+bgHost+'/" target="_blank"></a></div>';
As Stack displays the code above a certain way, ensure that you modify the part of the line which reads:
<p>'+tooltip_content.text+'
and alter it to:
<p style="color:#000000">'+tooltip_content.text+'
Currently, my form dynamically adds input fields using code. I am trying to figure out a way to submit the data and proceed to the next page, while ensuring that if someone decides to go back, the newly created input fields will still be populated with the ...
Issue: core.mjs:10132 ERROR TypeError: block.getDepartment is not a function at FirebaseService.mapDatabaseToBlock (firebase.service.ts:54:30) at firebase.service.ts:45:60 at Array.map (<anonymous>) at firebase.service.ts:45:42 at ...
https://i.stack.imgur.com/3lH6h.png I'm currently attempting to set a background image for an Ion-card in order to completely cover the card's area. However, I'm facing an issue where the background image does not cover the entire area and ...
Question Does anyone know why I am encountering this error? ● Test suite failed to run ReferenceError: Cannot access 'mockResponseData' before initialization > 1 | const axios = require('axios'); ...
I'm attempting to fetch the number of files in a folder and compare it with the maxfiles value. Within dropzone.js, there is a function that looks like this: Dropzone.prototype._updateMaxFilesReachedClass = function() { if ((this.options.maxF ...
Encountered an issue while trying to deploy a project on Vercel. The error message is as follows: fileName: comps/Navbar.js imported as import Navbar from "./Navbar"; 16:36:51 ModuleNotFoundError: Module not found: Error: Can't reso ...
Is there a way to vertically center all of the text content, especially focusing on the drop-down button and block, here? Despite my efforts to research and find solutions online, I have not been able to achieve the desired visual results. I am restricted ...
I am working on a project that utilizes Bootstrap 4. Within one of the forms, I have checkboxes representing each state in the U.S. along with a few territories. Currently, these checkboxes are displayed inline, which is good for utilizing available width ...
As I attempted to implement the functionality of this left menu bar, I encountered a roadblock. The click event on the menu button seems to work fine initially - the left bar appears with the first click and closes as expected with the second click. Howeve ...
I am working on animating buttons in my application using GSAP. The idea is that when a user clicks the button, it should animate the maxWidth of the button. I want this to be dynamic by adding a percentage of the max width set using props. Is it possibl ...
How can I make an image clickable in an input with type=file? <label for="formFileSm" class="label_display form-label">avatar</label> <input class="width_input mx-auto form-control form-control-sm" id="fo ...
While working on an Angular2 app using TypeScript, I encountered numerous issues with third-party typings. Frustrated with these problems, I made a bold decision to switch to pure JavaScript. It may sound crazy, especially with the lack of resources availa ...
I am facing a challenge with overriding the active style of links in a universal manner, to restore them to their original state when they cannot be interacted with (such as during scrolling). In my current code, I implemented this: .scrolling a:active { ...
Currently, I am utilizing the code below to implement a slide up/down effect on a div using JavaScript. The slide down action is triggered by a button, while the slide up action is associated with a close text. My goal is to have the button toggle betwee ...
I have a div that has a left border with the following style: border-left: 3px solid #F90; Now, I want the border to fade out gradually from top to bottom, going from full opacity at the top to completely transparent at the bottom. However, my attempt usi ...
I am facing an issue with my emailValidation method. Even though I want it to run when this.$refs.editUserForm.validate('email') returns true, it always seems to return false, especially when a valid email like <a href="/cdn-cgi/l/email-protec ...
I'm trying to work with socket data in a way that allows me to compare it outside of the initial socket.on function. I've attempted using global variables without success. One thought I had was grouping the data, but one is an io.emit and the oth ...
I am looking to target specific DOM elements using jQuery. Below is the HTML code: <li> <span class="node> <span class="con"></span> <span class="check"></span> <img> <a title="high">abc&l ...
Trying to achieve a simple task, but not very proficient in jQuery so struggling to figure it out. Want to send JSON data to an ASP.NET Controller. Data includes strings and a list of objects. The code snippet would appear like this: View: $(document). ...
Attempting to design a TreeView with drag and drop features, I am utilizing the plugin . A demonstration can be accessed here: Despite following the documentation instructions, my TreeView fails to load - what could be the issue? Below is the code snipp ...