Styling custom components

Hi kentgilliam, try wrapping your custom component's content with the following HTML:

 

<div class="lia-panel lia-panel-standard">
  <div class="lia-decoration-border">
    <div class="lia-decoration-border-top"><div></div></div>
    <div class="lia-decoration-border-content">
      <div>
        <div class="lia-panel-heading-bar-wrapper">
          <div class="lia-panel-heading-bar"><span class="lia-panel-heading-bar-title">Panel Heading</span></div>
        </div>
        <div class="lia-panel-content-wrapper">
          <div class="lia-panel-content">
            <p>Your custom content here.</p>
            <p>Optional:</p>
            <div class="lia-text">
              <p>(Content in this div will have margins and some text formatting because of the "lia-text" class.)</p>
            </div>
          </div>
        </div>
      </div>
   
    </div>
    <div class="lia-decoration-border-bottom"><div></div></div> 
  </div>
</div>

 

You'll be replacing everything in the "lia-panel-content" div with your content, as well as editing "Panel Heading" to the panel heading title you want.

 

I believe the reason Custom Content was suggested is because it has the decorative panel wrapper by default, and can be toggled off with panel="false" in the XML. (See my reply here: http://lithosphere.lithium.com/t5/Customer-Connection-Private/Custom-Content-HTML-Codes/m-p/31385#M1651)

 

Hope that helps.

The support response you received isn't entirely off base. By default* yes, custom content areas will inherit the same panel (module/widget/whatever your preferred nomenclature is) border styling. In some cases these borders are actually images to ensure all browsers display rounded corners.

 

May I ask why you've chosen to add a custom component vs. custom content? Typically custom components were reserved for code (freemarker, JS, etc.) and content that would be dynamic in function & display but rarely if ever updated by hand once it's been created. Custom Content is typically used for announcements or other blurbs of text/images that can potentially be updated frequently by a community admin. Because this content lives in the community's database, you could update your custom content on production, on the fly without having to wait for a studio push and maintenance window to update your community.

 

So just to clarify custom component = lives in plugin, updates require a "push" and community restart , custom content = lives in the database, where production updates can be done instantly.

 

*As Chudo has already mentioned, the default panel styling can be toggled off with panel="false" in the XML view of the page inside studio