1

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. – Saroj Bera Jun 8 '17 at 8:20
  • @SarojBera Done – Ant Jun 8 '17 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 '17 at 9:06
  • @JannisBott Done – Ant Jun 8 '17 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 '17 at 17:52
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.

  • 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: – Ant Jun 8 '17 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 '17 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> – Ant Jun 8 '17 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 '17 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) – Ant Jun 8 '17 at 9:57
0

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>

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.