Side content and main content headers

noorismike

You can apply different CSS on both the section with parent classes of the respective panel.

Suppose "left_parent" is the parent class for left section and "right_parent" is for the right section. 

So you can apply the different background css like this even both element have same classes 

// For left section 

.left_section .lia-panel-heading-bar {css goes here}

//For right section 

.right_section .lia-panel-heading-bar {css goes here}

VikasB How do I go about creating the new class for .left_section or .right_section? Are those classes already predefined?

noorismike

Those classes were just for an example but you may find some different classes. So you need to figure out those different classes in the developer section(code). But maybe they both have same parent class like you can see in the attached screenshot. In that case, you have to apply CSS like this
Note: You need to figure out those classes in your code. 

.lia-panel-content > .lia-quilt-column.lia-quilt-column-12.hero-div:nth-child(1) {
	border: 1px solid red;
}
.lia-panel-content > .lia-quilt-column.lia-quilt-column-12.hero-div:nth-child(2) {
	border: 1px solid green;
}

You can see parent class have the same child classes but we can apply different CSS using the nth-child approach as I applied different borders(red and green) around left and right section even they have same classes.