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-heading-bar. The look I am trying to achieve for the main top header to be filled with a background color and the side-content header to have no background color. Attached is an image of what the layout currently looks like. So to clarify I want the featured topics to have the dark background and the account info to have no background. Thank you in advance for any help!

  • 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