Disabling css styles

Resolved Sanya Kuzovlev
(@sanya1917)

1 year, 8 months ago
I created a simple table with one row. In this row, I highlighted the first cell in yellow and saved the table. Later I removed the selection, but now I have styles appearing in the page code all the time.
```
<style id="wpdt-custom-style-17"></style>
<style>
/* th background color */
.wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable.bt[data-has-header='1'] td.wpdt-header-classes,
.wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable thead th,
.wpdt-c .wpDataTablesWrapper table.wpDataTable thead th,
.wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting {
	background-color: #FEEA33 !important;
    background-image: none !important;
}
</style>
```
How can I remove and completely disable styles in this and necessarily on other tables so that they are not shown on the pages at all?

By the way, this style insertion does not pass code validation https://validator.w3.org/

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author wpDataTables
(@wpdatatables)

1 year, 8 months ago
Hi there.

Thank you for reaching out to us. We tried replicating this issue locally, but we couldn’t. This is a result of a 1-row simple table with the background color set to yellow:
```
<style id="wpdt-custom-style-3">
        .wpdt-bc-FFEB3B { background-color: #FFEB3B !important; }
 </style>
```
When the color is removed, it’s just an empty style:
```
<style id="wpdt-custom-style-3"></style>
```
Since you have “thead”, td, and th, it appears you’re not using Simple Tables, but instead a different table type. Which table type was that? Did you manually define the background color, or did you define a rule for the background color? We tried replicating the issue in a CSV-based table, and we couldn’t. Can you please explain in more detail and we’ll gladly explore this issue further?

The issues reported by validator.w3.org are related to the HTML structure, not the CSS code itself. The CSS code you provided is valid, but when validating through an HTML validator, it’s important to ensure the HTML document is properly structured.

If you were to enclose this CSS in HTML (as it’s enclosed on an actual page), it wouldn’t return any errors. You can try this:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <style id="wpdt-custom-style-17"></style>
    <style>
    /* th background color */
    .wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable.bt[data-has-header='1'] td.wpdt-header-classes,
    .wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable thead th,
    .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th,
    .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting {
        background-color: #FEEA33 !important;
        background-image: none !important;
    }
    </style>
</head>
<body>
    
</body>
</html>
```
- This reply was modified 1 year, 8 months ago by wpDataTables.
Thread Starter Sanya Kuzovlev
(@sanya1917)

1 year, 7 months ago
Thanks a lot for the detailed answer. The main question was precisely that https://validator.w3.org writes an error on the HTML structure: style inside the div. I tried the suggested method, added the code to the head, but nothing happened.
```
function add_custom_style_to_head() {
    echo '
    <style id="wpdt-custom-style-17"></style>
    <style>
    /* th background color */
    .wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable.bt[data-has-header="1"] td.wpdt-header-classes,
    .wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable thead th,
    .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th,
    .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting {
        background-color: #FEEA33 !important;
        background-image: none !important;
    }
    </style>
    ';
}
add_action('wp_head', 'add_custom_style_to_head');
```
The error remains the same.
1. Error: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)From line 681, column 7; to line 681, column 40le>↩</div><style id='wpdt-custom-style-132'>↩.wpdtContexts in which element style may be used:Where metadata content is expected.In a noscript element that is a child of a head element.Content model for element div:If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.If the element is not a child of a dl element: flow content.
Plugin Author wpDataTables
(@wpdatatables)

1 year, 7 months ago
Hello,
We spoke with our developers for advice, they went through all the details you sent.
They notice one line you used :
```
 <style id="wpdt-custom-style-17"></style>
```
Can you please try removing that part, then check, does that resolve the said error?
Thank you.
Plugin Author wpDataTables
(@wpdatatables)

1 year, 7 months ago

Hello again,
Apologies, we forgot to add one more detail our developers mentioned.
If the said suggestion from above does not help, can you please try to elaborate/clarify a bit more, if you can send us more details as to where are you implementing this element exactly, perhaps the issue could be with the method/way how you are trying to achieve/add it.

You can add screenshots or even better record a Video of your screen to show us these details/steps etc.
If the screenshots/ Video contains any sensitive data, then it is best to open a private new ticket on our main Support platform here, and one of our Agents will respond as quickly as possible to proceed there in further details, you can just refer to our correspondence.

If you don’t have a licence (or if it expired), please open a pre-purchase ticket which doesn’t require a purchase code.

Premium products are not supported in these forums, as per this comment by WordPress.org moderators.

Thank you for understanding.

Kind regards.

Plugin Author wpDataTables
(@wpdatatables)

1 year, 7 months ago

Hello,
Apologies for going back and forth like this today.
Our developers went through everything again and we found useful details for you.

Basically, the first part of the code <style id=”wpdt-custom-style-17″></style> is from the Simple table creation.

Our Plugin is automatically generating this, so you should remove it if there is no custom style included with it.

The second part is coming from your Global Plugin settings ( Main Plugin settings/Color and Font settings), where you most probably still have the style you added there.

Can you please check and reset those settings, then the issue should be resolved?

Let us know how it goes.
Thank you.