Override Table Even Row Background with CSS

[Becca37]

I have a Details DataPage with two sections. I want both to have the same background as the first section.

I've tried the suggested CSS overrides for .cbFormTableEvenRow (and more which shouldn't be needed, to my way of thinking) and am having no success.

Anyone have ideas on what I'm doing wrong?

 

 

<table data-cb-name="cbTable" id="cbTable_69d4f79f110319" class="cbFormTableCellspacing_69d4f79f110319 cbFormTable_69d4f79f110319" role="presentation">
	<tbody>
		<tr class="cbFormTableRow_69d4f79f110319">
			<td colspan="2" class="cbFormDataCell_69d4f79f110319"><span class="cbFormData_69d4f79f110319"><div class="caspioClientInfo">CLIENT (1):<b> First Name Unknown Last Name Unknown</b></div> </span></td>
			<td colspan="2" class="cbHTMLBlockContainer_69d4f79f110319">
				<div id="returnToClientDetailsLink"><a href="/clients/client-details/?ClientRID=1" title="Cancels Input or Update">Return to Client Details</a></div>
			</td>
		</tr>
		<tr class="cbFormTableEvenRow_69d4f79f110319">
			<td colspan="4" class="cbFormNestedTableContainer_69d4f79f110319">
				<table class="cbFormNestedTableCellspacing_69d4f79f110319 cbFormNestedTable_69d4f79f110319" role="presentation">
					<tbody>
						<tr>
							<td class="cbHTMLBlockContainer_69d4f79f110319">
								<div class="caspioClientInfo">File Status: <b>Error</b><span class="caspioSpacer"></span>Gender: <b>Unknown</b><span class="caspioSpacer"></span>Race: <b>Unknown</b><span class="caspioSpacer"></span>Born In Year: <b>Unknown</b></div>
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</tbody>
</table>

 

 

[Becca37]

Hi @SunakoChan ... thanks. But that didn't work either.

A lot more poking around and it was NOT being set by a Caspio style at all, {doh!}, it was being set by ...

tbody tr:nth-child(even) 
{
    background: #F1F1F1;
}

... in the CSS of the parent theme to the child theme I'm using in WordPress.

I was able to override it using:

#myUserInfoSnippet tbody tr:nth-child(even)
{
    background: transparent;
}

Thanks everyone! :0)

[kpcollier]

It looks to me like the Classes you are trying to use are using Caspio's randomKey() function, which changes the actual Class name after every load (the random numbers at the end). This makes it impossible to call it simply by the Class or ID name. 

Use this in your header. Change Class Name to adjust to what you want to change. 

<style>
 [class*=cbFormTable] {
 	background-color: transparent;
 }
</style>

I understand you mentioned you do not want to create a new style just for this - however it is pretty simple if you decide to change your mind. On the style you are currently using, click on Duplicate. This will make the same exact style with a different name. Then, just change the background colors of the rows. You can assign this new style to the page you are working on. While it keeps all of the other features of the last style to match other pages, the background would be different.

[SunakoChan]

Hi @Becca37- Could you try 

<style>
 [class*=cbFormTable] {
 	background-color: transparent! important;
 }

or

#myUserInfoSnippet [class*=cbFormTableEvenRow]
{
	background-color: transparent! important;
}
</style>

[Becca37]

Thanks @kpcollier

I tried that, also with no success. 

#myUserInfoSnippet [class*=cbFormTableEvenRow]
{
	background-color: transparent;
}

(The reason I don't want to make a new Caspio Style is that then I'd have to maintain any other Caspio Style changes in two places: the main Style and the modified Style for this one DataPage. Much cleaner maintenance-wise to just override this one instance via CSS.)