Make Template background transparent for Wrapper image to show through?

edited May 21, 2019 in Questions
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?
image

Comments

  • Amy DewaalAmy Dewaal ✭✭
    edited May 21, 2019
    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 {
        background:transparent;
        border-bottom:none;
    }
    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
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!