When you create a custom content layout component in the Developer Console, it appears in Community Builder in the New Page and the Change Layout dialog boxes.
To appear in the New Page and the Change Layout dialog boxes in Community Builder, a content layout component must implement the forceCommunity:layout interface.
<aura:component implements="forceCommunity:layout" description=”Custom Content Layout” access="global"> <aura:attribute name="column1" type="Aura.Component[]" required="false"></aura:attribute> <aura:attribute name="column2" type="Aura.Component[]" required="false"></aura:attribute> <div class="container"> <div class="contentPanel"> <div class="left"> {!v.column1} </div> <div class="right"> {!v.column2} </div> </div> </div> </aura:component>
Next, add a CSS resource to style the content layout as needed.
Here’s the sample CSS for our simple two-column content layout.
.THIS .contentPanel:before, .THIS .contentPanel:after { content: " "; display: table; } .THIS .contentPanel:after { clear: both; } .THIS .left { float: left; width: 50%; } .THIS .right { float: right; width: 50%; }
CSS resources must be named componentName.css.
You can include an SVG resource in your component bundle to define a custom icon for the content layout component when it appears in the Community Builder.
The recommended image size for a content layout component in Community Builder is 170px by 170px. However, if the image has different dimensions, Community Builder scales the image to fit.
SVG resources must be named componentName.svg.