Styling custom components
We just launched out community less than a month ago and for some reason our custom components don't have the rounded-corner box like all the content widgets and custom content blocks. Lithium Support's suggestion was "don't use custom components and just use custom content." Since that's the lamest response I hope I'll ever get, I was hoping someone could help me with any CSS they used within a custom component to get the same affect. I know what the CSS classes are but they don't seem to work in custom components. Anything someone can throw my way would be a huge help.
Kent
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
