Skip to main content
Nintex Community Menu Bar
Question

Make Template background transparent for Wrapper image to show through?

  • July 11, 2024
  • 1 reply
  • 4 views

Forum|alt.badge.img+7

I want a background image on a page with text laying on top of it. 

I created a wrapper to hold the image. Then I put a Panel set inside to limit the width. Then, I added a Field Editor with Html Templates to pull in text from fields on the objects and have the data show with specific fonts. 

The template fields all have white box backgrounds, so the wrapper image is not showing through. 

Is there a setup where this text can lay on top of the graphic without white boxes behind it?

Translate
Did this topic help you find an answer to your question?
This topic has been closed for comments

1 reply

Forum|alt.badge.img+7

Anna,

The template has a background color because the field editor has a background color. If showing text over an image like this is a pattern that you want to use across multiple pages, you can create a custom theme and then edit the properties of field editors within that theme to make them transparent. If you just want the background to be transparent for this one page, you can use CSS to modify just the field editor on this page. Go to the field editor properties -> Display -> Advanced and give the field editor a CSS Class name such as transparentBackground. Then, under the CSS section of the page composer add a new CSS resource of type In-Line and paste this into it: 

.transparentBackground .nx-basicfieldeditor-item {<br>&nbsp; &nbsp; background:transparent;<br>&nbsp; &nbsp; border-bottom:none;<br>}

Make sure that the CSS Class name of the field editor matches that first part of the CSS resource. You’re basically targeting a specific part of the field editor that has a background color and setting the background to transparent. That part also has a border that will show as lines under each row if you don’t include the border-bottom:none part. If you have other field editors on this page that you also want to be transparent, you can add the CSS Class name to all of them, and they’ll all pick up on the changes from the CSS resource.

Thanks!
Amy

Translate

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings