Forum Discussion

noorismike's avatar
noorismike
Guide
7 years ago

Side content and main content headers

Hello, I have a community page that has a basic layout. I am trying to add a different style to the main content headers and the side-content header but they both have the same class of lia-panel-he...
VikasB's avatar
VikasB
Boss
7 years ago

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}

noorismike's avatar
noorismike
Guide
7 years ago

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

  • VikasB's avatar
    VikasB
    Boss
    7 years ago

    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. css.png