Background-color lightning component

  • I am trying to set the background-color of my lightning component, I cant figure out what css I should use. By doing this:

    .THIS {
      background-color: white; 
    }
    

    The larger part of the background becomes white, but the space between the footer stays the default color (greyish/blueish).

    .THIS {
      background-color: white;
      height: 100%;
    }
    

    Makes the whole page white. Anyone an example? Thanks in advance

    This is the code of the component:

        <c:Partners_Header stepnumber="{!v.stepnumber}" header="{!v.header}"/>
    
        <body>
            <div class="slds-container--center slds-container--large">
                <aura:if isTrue="{!v.stepnumber==1}">
                    <c:B2B_Partners_Login labels="{!v.fieldLabels}" stepnumber="{!v.stepnumber}"/>
                </aura:if>
                <aura:if isTrue="{!v.stepnumber==2}">
                    <c:B2B_Partners_Forgot_Password labels="{!v.fieldLabels}" />
                </aura:if>
            </div>
        </body>
        <!-- include footer -->
        <c:Partners_Footer/>
    

    Different background color

    If possible please post a screenshot of the issue marking the area you want to change the background.

    @SarojBera Done

    Can you please share the markup of your lightning component? It sounds like you have a css style referenced somewhere that you want to override.

    @JannisBott Done

    @Ant could you provide html part of your components ? I help you but I need inspect html code in file :)

  • You need to wrap your component content like this -

    <aura:component>
      <div class="slds-box slds-theme_default">
         //your component content
      </div>
    </aura:component>
    

    then your component background would be default white. For more information - https://www.lightningdesignsystem.com/utilities/themes/

    or if you want some other background color then you have to write some css

    .THIS .slds-theme_backgroundColor-lightblue {
        background-color: lightblue;
    }
    

    and add this class to your container div

    <aura:component>
       <div class="slds-box slds-theme_default slds-theme_backgroundColor-lightblue">
             //your component content
       </div>
    </aura:component>
    
  • <div class="slds-container--center slds-container--large">
        <aura:if isTrue="{!v.stepnumber==1}">
            <c:B2B_Partners_Login labels="{!v.fieldLabels}" />
        </aura:if>
        <aura:if isTrue="{!v.stepnumber==2}">
            <c:B2B_Partners_Forgot_Password labels="{!v.fieldLabels}" />
        </aura:if>
    </div>
    

    Seems to be your top part. You could give this dive a specific class to set its background:

    <div class="slds-container--center slds-container--large custom-background">
    

    In your css class you can add this:

    .THIS .custom-background {
        background-color: white;
    }
    

    This will set the background of your top part to white.

    The footer seems to be its own component (Is assume that you meant c:Partners_Footer instead of c.Partners_Footer).

    If that's the case, I would also add a css class in the footer component that sets its background to white.

    I hope this helps.

    Thanks for your help but this doesn't solve the problem. The space is still white with your solution. I assume because there is no html generated for it. So than another solution could be this:

    I think you'll need to change your c:Partners_Footer component too. Can you post the markup of that one too?

    The slds-has-divider--top adds the greyish line. If you remove this your problem should be solved.

    The problem is not the line, I need it. The problem is the background color of the part above the line untill the login component starts (see picture)

    Ok, I am bit lost. The space between footer and login component looks white to me according to your picture... Sorry that I can't help

    It is a slight difference but it is a different color, assume I would want to make that space red. Would you know how?

    Easiest is probably to just draw on your screenshot. Or you use inspect element in your browser to highlight it.

    I drew on the screenshot to show what part of the screen has a different background-color. Hope this is clear for you.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used