2

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

5
  • If possible please post a screenshot of the issue marking the area you want to change the background.
    – Saroj Bera
    Jun 8, 2017 at 8:20
  • @SarojBera Done
    – Ant12345
    Jun 8, 2017 at 8:37
  • 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. Jun 8, 2017 at 9:06
  • @JannisBott Done
    – Ant12345
    Jun 8, 2017 at 9:25
  • @Ant could you provide html part of your components ? I help you but I need inspect html code in file :)
    – JJanek
    Oct 30, 2017 at 17:52

2 Answers 2

2

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>
0
<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.

9
  • 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:
    – Ant12345
    Jun 8, 2017 at 9:45
  • I think you'll need to change your c:Partners_Footer component too. Can you post the markup of that one too? Jun 8, 2017 at 9:47
  • <aura:component > <!-- The universal footer --> <div class="slds-container--center slds-container--medium"> <div class="slds"> <div class="slds-grid slds-grid_align-center"> <div class="slds-docked-form-footer slds-has-divider--top"> ...... </div> </div> </div> </div> </aura:component>
    – Ant12345
    Jun 8, 2017 at 9:51
  • The slds-has-divider--top adds the greyish line. If you remove this your problem should be solved. Jun 8, 2017 at 9:55
  • 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)
    – Ant12345
    Jun 8, 2017 at 9:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.