"Enhance your website with WP Bakery Accordion and make your text

Currently, I am working on customizing the appearance of the active content header in my accordion for WP Bakery. After successfully changing the background color using the code below, I am now looking to make the text white:

.vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-title { 
  background-color: #8B68AC !important;
}

I attempted the following:

.vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-title { 
  background-color: #8B68AC !important; 
}

While the background color change was successful, I'm still trying to figure out how to set the text color to white.

htmlcsswpbakery

Answer №1

To change the font color to white in your code, simply set the color property to white. This will apply the white text color to all elements under the specified class.

.vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-title { 
  background-color: #8B68AC !important; 
  color: white !important;
}

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

Flex layout clips shadow when overflow-hidden or overflow-auto is applied

Exploring the given markup with Bootstrap classes: The layout showcases two cards aligned left and right using flex-row. These cards are adjusted to fit the available vertical space using flex-fill. Although the cards occupy the vertical space, their cont ...

cssflexboxbootstrap-5

What is the proper way to retrieve this stylesheet and add it to the header of my HTML file?

I want to utilize a style sheet from Wikipedia. However, when I fetch the style sheet and attempt to pass the URL retrieved through AJAX to the head of my HTML document, the URL behaves unexpectedly. Initially, I tried to use the fetched URL directly: var ...

htmlcssajaxappend

Link hidden in Safari and Chrome on iPad due to relative positioning

I've encountered a challenge with my web page layout where I'm trying to position a button in a fixed location on the top-right corner, just below a fixed header. While it works perfectly on Chrome for Windows, Mac, and Android, it fails to displ ...

htmlcssbootstrap-4

Find the preceding element of the element that includes a specific link text

Can someone help me figure out how to click on a <td> element that precedes the <td> element with the linkText "Main" using Selenium? The element I'm looking to click is shown in the highlighted area of this image: https://i.sstatic.net/Q ...

javahtmlcssseleniumxpath

Looking for assistance in designing a responsive web page with CSS, specifically in determining the optimal page width

Currently, I am working on making my web page responsive for four different screen sizes (320px, 640px, 980px, and 1024px). Everything looks great and adapts well when I resize the site up to 1024px. However, once the size goes beyond that, I want to preve ...

htmlcssresponsive-designviewport

Personalize Dropdown Menu, determining when to initiate the hide menu action

When creating a dropdown using ul and li tags, I am faced with the dilemma of determining the ideal time to hide the dropdown menu. The dropdown menu is designed to display values based on user input as they type, updating dynamically. Initially, I had se ...

javascriptjqueryhtmlcssdrop-down-menu

Attempting to align a navigation block next to an SVG image

On my website, I envisioned a photoshopped image featuring a SVG picture of a book on the left and a "navigation block" on the right. The navigation block consists of links that redirect to other pages but it's not displaying properly. You can view th ...

htmlcss

Combining the elements p and div on a single line

I've designed a card layout with 3 rows containing a paragraph and a div element each. I want both elements in each row to be displayed on the same line. How can I achieve this? Sample HTML: <div class="user_card"> <div class="skills"&g ...

htmlcss

Only allow the next button to navigate to another tab if the JSON response is verified as true

This particular HTML form entails a tab-pane with specific data and inputs to be filled out. <div class="tab-pane" id="step1"> <form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmi ...

javascriptjqueryhtmljsonvue.js

Adding a new div using Jquery after a specific table row

I am having trouble displaying additional data in a table when a specific row is clicked. Here is the table structure I am working with: <div id="display"> <div class="displayRow"> <img src="images/expand-arrow.gif" class="expandArrow ...

javascriptjqueryhtmlcss

Insert a line break element following every 12th character within a given string

$my_string = "Lorem Ipsum is simply dummy text of the printing and typesetting industry." Desired Output : "Lorem Ipsum <br/> is simply<br/> dummy text<br/>of the printing<br/> and typesetting<br/> industry." The tag should ...

phphtmlstring

Include previous input as a "phantom" thumbnail to the slider element of type "range"

https://i.stack.imgur.com/JnuCN.png Using a tutorial from w3schools, I have customized a regular range slider. The objective is to send a new value command to an external MQTT-based home automation system and display the previous value as a ghost-thumb in ...

javascripthtmlcssinputrange

What is the best way to position two elements inline?

I was trying to create a container named project-item that looks like the image linked below: https://i.stack.imgur.com/6XzZ9.png My goal was to align the project logo and the title (h3) in one line, but I struggled to find a suitable solution. This is ...

htmlcss

What's the reason for the malfunction of the "required" attribute in my Angular form?

I'm a beginner when it comes to using Angular. Here's the template I've set up for a Register page in Angular. All labels and inputs are enclosed within the form tag. However, I'm facing an issue where the default behavior of 'requ ...

htmlangularformsbootstrap-5

Issue with window.localStorage.setItem not functioning properly on mobile devices

Currently, I am developing an HTML5 mobile application with jQuery Mobile. Below is a snippet of my code: $(document).on("click","#send_mobile_number",function(){ var mobile = $('#mobile_number').val(); var user_id = sessionStorage.get ...

androidjqueryhtmljquery-mobilelocal-storage

Alter the language setting for the input tag in a React application to replace the default browser-dependent language

In my React TS application, I'm facing an issue with i18n where the base language of the date input depends on the browser settings rather than the language selected within the app. It doesn't seem to be affected by the lang property either. Fo ...

htmlreactjstypescriptinput

Attempting to adjust the spacing between my <h2> and <ul> tags to be more concise

I'm having trouble reducing the space between my h2 and ul elements. It seems that margins are not effective for ul elements and I can't seem to achieve the desired spacing. Is there a specific trick or technique that can be used to address this ...

htmlcss

Angular's HTML attribute conditional rendering

I want to dynamically assign a property to an HTML tag in Angular based on a condition. Here's an example: <button {{condition === true ? mat-raised-button : mat-button}} class="edit-button" > <span>Click here</span ...

htmlangular

Issues with the alignment of spans

What is the reason behind the *asdf being aligned to the bottom of its parent div in the following HTML code? <html> <style> .tag_editor { float: none; width: 400px; height: 33px; border-style: solid; border-color: #B2B2B2; border-width: thin; ...

htmlcss

Harmonizing controls with ASP.NET using CSS styling

I have created a web form application which is displayed in the image provided. However, when I view the same page in the browser, the output appears completely misaligned despite the designer file being perfect. The markup for this form is quite lengthy ...

htmlasp.netcss