3

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

Improve this question
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.
    – Jannis Bott
    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

Reset to default
3

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>
Improve this answer
1 
<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.

Improve this answer
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?
    – Jannis Bott
    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.
    – Jannis Bott
    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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .