Support Center Visit Demo License manager Buy @ envato

shortcode section how can I make it transparent or force background image

matthewlockmatthewlock
in Theme support
I'm using a shortcode on my front page for a music player which uses a shortcode. I'm inserting the shortcde using a "code" section but it has no other properties to select. I've tried adding a background image via custom css but I'm not getting any luck.

Please see screenshot. The white border around the radio player I need transparent or to specify a bg image.
Many thanks

image

Comments

  • matthewlockmatthewlock
    the site is behind a coming soon plugin but this should work:
  • PabloPablo
    Hello,
    You should change the section background color to transparent, see the screenshot:

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • matthewlockmatthewlock
    Thanks, it already is set like that. 
    To further troubleshoot, I cloned the section and rather than have a short code for my radio player I replaced it with a video and that displays fine (see attached). I've left this in place for the moment if you want to take a look.

    This leads me to think the theme is automatically adding padding to the shortcode area. Is there some css I can add to make sure there is no padding or that it is transparent?

    image
  • PabloPablo
    The "Column" item has the "margin-bottom" applied by the default, to disable it, please edit that item and set the 0px value in dropdown menu.
    See screenshot:

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • matthewlockmatthewlock
    This doesn't change the appearance at all. Would it be easier for you to take a look in my admin area?
  • matthewlockmatthewlock
    I've been using the inspector in chrome and I can see where the problem is, specifically with the way pre codes are displayed and by unticking the boxes I can make it appear as desired but I don't know how to tell this to BeTheme

    image
  • matthewlockmatthewlock
    Specifically the line I've highlighted in the inspector. If I untick this line, the white border is gone and the item displayed is semi-transparent as wanted.
    image
  • matthewlockmatthewlock
    Ive almost done by editing the base.css file for the pre style.

    But I've no idea if this will mess up how anything else is displayed?
  • PabloPablo
    Please restore the original base.css file, do not change anything in that file!
    It could break the CSS code of your website and it could make it work badly.
    After restoring it, please disable the under-construction mode for a moment and send me a link to your website - it's hard to say where the problem is without looking at it.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.