Jump to content
  • 0

Override Table Even Row Background with CSS


Becca37
 Share

Question

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?

 

2019-04-24_10-00-32.thumb.png.c0e86c9167cdc7a076d4255dff6287c5.png

 

<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>

 

 

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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)

Link to comment
Share on other sites

  • 1

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.

Link to comment
Share on other sites

  • 0

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.)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...