function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Matyas CsabaMatyas Csaba 

lightning:card title and footer background color

Helo Helpers

I  have a simple  lightning card which has a title and a footer  and in the body  a list  of  string
I  would like  to have different background color for title  section  for Footer section  and if  possible for  the body  section

I guess I  have to play  wiht the STYLEs  and/or  class  but I  am not familiar  with these.
See below  the code of  my  component 

<lightning:card class="slds-text-heading_small slds-card_boundary"   title="attribute1"  footer="attribute2" >
    <div class="slds-p-left--medium slds-p-right--medium">
        <ul class="slds-list--vertical slds-has-dividers--top-space">
            <aura:iteration  items="{!v.items}" var="item" indexVar="i">
                <li class="slds-list__item">                   
                    {!item}
                </li>
            </aura:iteration>
        </ul>
    </div>
</lightning:card> 

Any  sugeston of  code fragment welcommed

thanks in advance 
Csbaa
Best Answer chosen by Matyas Csaba
Maharajan CMaharajan C
Hi Matyas,

Add the below style in your component:

.THIS .slds-card__header{
        background-color: aliceblue;
}
.THIS .slds-card__body{
        background-color: cyan;
}
.THIS .slds-card__footer{
        background-color: aquamarine;
}

Thanks,
Maharajan.C

All Answers

Ankit RathorAnkit Rathor
Hi Csbaa ,

Please try this code:
================================================
component.cmp

<lightning:card class="slds-text-heading_small slds-card_boundary"   title="attribute1"  footer="attribute2" >
    <div class="slds-p-left--medium slds-p-right--medium">
        <ul class="slds-list--vertical slds-has-dividers--top-space">
            <aura:iteration  items="{!v.items}" var="item" indexVar="i">
                <li class="slds-list__item">                   
                    {!item}
                </li>
            </aura:iteration>
        </ul>
    </div>
</lightning:card> 

=================================================
component.css

.THIS {
}
.THIS.slds-card{
        background-color: aliceblue!important;
}

User-added image
I hope it helps you.

Please let me know if you have any other query. If this solution is helpful then please mark it as Best Answer.

Thanks,
Ankit Rathor 
Maharajan CMaharajan C
Hi Matyas,

Add the below style in your component:

.THIS .slds-card__header{
        background-color: aliceblue;
}
.THIS .slds-card__body{
        background-color: cyan;
}
.THIS .slds-card__footer{
        background-color: aquamarine;
}

Thanks,
Maharajan.C
This was selected as the best answer
alex sunnyalex sunny
Once, WSDL is downloaded and saved on local drive. We have to go to Salesforce and navigate to “Setup | Develop | Apex Classes”. On right hand side, you will find button named as “Generate from WSDL”. This button will generate equivalent Apex class to support Webservice call. In some Programming languages, these classes are known as Proxy classes or Stubs.


thanks
alexsunny
alex sunnyalex sunny
thanks my issue has been fixed.

_________________________
https://ometv.onl/ https://chatroulette.top/ https://omegle.wtf/ https://bazoocam.cam/