Change background color at widget table

[StudioC]

I would like to change the background color of a row of content.
PB creates a table with the class "widget-columns-table," I should change the background color in a tr of the table ... how do I?
If I modify the css without adding a specific selector, PB changes the background to all tables that have that class and it is not what I want.
Tnx a lot!

 

[coolemail2]

StudioC,
When in "Edit" mode for the relevant text/image module, click one cell in the table on the row that you wish to change
Click the "Table Cell Properties" icon in the edit panel
Click "Advanced" tab
Change the background colour then from the dropdown on that screen select "Update all cells in row"
I hope that is what you want to do.

 

[StudioC]

I would have preferred to assign a color to the whole block, so instead I have to add a block of text, and inside a table with a colored background
But if it is the only way thanks for the quick response.

 

[StudioC]

But it is impossible to assign a background color to the block Text & Images without having to use a table inside it?

 

[dave-ha]

Hello StudioC,

Thanks for posting your issue. The current WPB versions create tables for columns of content - which is a pain for web accessibility - and these tables don't have an ID.

However, you can try this tweak using CSS:

1. View the source code of the page and look up the ID of the module that preceeds the table, something like this: widget-cbmc59fd-vmg7-7223-2bc5-d4a3b8xbc155. If no module preceeds it then open the editor, put an empty one on top of the table, publish the site and check the source code again.
2. In the editor go to Settings, Advanced, Edit Metadata.
3. Add the withstanding code, save the settings and publish the site.

<style type="text/css">
<!--
#widget-cbmc59fd-vmg7-7223-2bc5-d4a3b8xbc155 + table tr {
     background-color: #ccc;
}
-->
</style>

Replace the widget id (#widget-.....) by your own widget id and the colour by the one of your preference.

This is a temporary fix. It will break as soon as you move/delete the preceding module. I hope it helps anyway. WPB version 12 will probably bring UI controls for this.

@ Parallels: What are your plans to enhance WPB to use CSS instead of tables to generate such columns?

 

[StudioC]

Hello StudioC,

Thanks for posting your issue. The current WPB versions create tables for columns of content - which is a pain for web accessibility - and these tables don't have an ID.

However, you can try this tweak using CSS:

1. View the source code of the page and look up the ID of the module that preceeds the table, something like this: widget-cbmc59fd-vmg7-7223-2bc5-d4a3b8xbc155. If no module preceeds it then open the editor, put an empty one on top of the table, publish the site and check the source code again.
2. In the editor go to Settings, Advanced, Edit Metadata.
3. Add the withstanding code, save the settings and publish the site.

<style type="text/css">
<!--
#widget-cbmc59fd-vmg7-7223-2bc5-d4a3b8xbc155 + table tr {
     background-color: #ccc;
}
-->
</style>

Replace the widget id (#widget-.....) by your own widget id and the colour by the one of your preference.

This is a temporary fix. It will break as soon as you move/delete the preceding module. I hope it helps anyway. WPB version 12 will probably bring UI controls for this.

@ Parallels: What are your plans to enhance WPB to use CSS instead of tables to generate such columns?

thanks for the reply dave, but my situation is this:



I added the blank form before of the two to which I want to change the background, but PB add a table tag that has no reference ID.

 

[dave-ha]

Hello StudioC,

You would like to modify the background of the tables that follow the empty widget, correct?

The proposed solution should work for your case. Please have a try and advise if it was successfuly or we try to find another way.

 

[IgorG]

As possible workaround you can try add following code in Settings->Advanced->Edit Metadata

<style>
.widget-columns-table:nth-of-type(2) {
background-color: red;
}
</style>

It will not apply background for tables with class widget-columns-table but for tables with condition nth-of-type(2). Details can be found here - http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo

@ Parallels: What are your plans to enhance WPB to use CSS instead of tables to generate such columns?

It is not excluded.