I am trying to create a page layout with full width and 0 margin in custom layout.
Community Theme Full width layout
I have gone through the above post as well but it doesn't seems to be working in my situation.
<aura:component implements="forceCommunity:layout" description="Custom Content Layout" access="global">
<aura:attribute name="header" type="Aura.Component[]" required="false"></aura:attribute>
<aura:attribute name="bottom" type="Aura.Component[]" required="false"></aura:attribute>
<aura:attribute name="leftVal" type="Aura.Component[]" required="false"></aura:attribute>
<aura:attribute name="cernterVal" type="Aura.Component[]" required="false"></aura:attribute>
<aura:attribute name="rightVal" type="Aura.Component[]" required="false"></aura:attribute>
<div class="container">
<div class="contentPanel">
<div class="centerheader">
{!v.header}
</div>
<div class="row">
<div class="column">
{!v.leftVal}
</div>
<div class="column">
{!v.cernterVal}
</div>
<div class="column">
{!v.rightVal}
</div>
</div>
<div class="bottonfooter">
{!v.bottom}
</div>
</div>
</div>
This is my custom component
.THIS .contentPanel:before,
.THIS .contentPanel:after {
content: " ";
display: table;
}
.THIS .contentPanel:after {
clear: both;
}
.THIS .centerheader {
width: 100%;
}
.THIS .bottonfooter {
float: left;
width: 100%;
}
.THIS .left {
width: 25%;
}
.THIS .right {
width: 25%;
}
.THIS .center {
width: 50%;
}
.THIS .column {
float: left;
width: 33.33%;
}
.THIS .row:after {
content: "";
display: table;
clear: both;
}
.comm-page-PAGENAME .cCenterPanel {
max-width:100% !important;
margin:0
}
This is the CSS.
But when I tried to save I got an error
force-app/main/default/aura/customLayout/customLayout.cmp Issue(s)
found by CSS Parser (c.customLayout):CSS selector must begin with
'.cCustomLayout' or '.THIS' (line 36, col 1)
Please help me with this to achieve a full width layout.
Best Answer
You're receiving the error due to the last css block. To resolve the error, you'll need to add .THIS before .comm-page-PAGENAME .cCenterPanel, see below. As for achieving full-width, have you tried overriding the Community's CSS?
Original
Replace with this