0

I would like to use an attribute to set the Background Color on the my Lightning Component. I attempted to apply the solution in the post below, but was unable to adapt this for my Component. Expressions in the CSS file?

Below is my Component and CSS where we are currently setting the background color statically.

Component

    <aura:component implements="forceCommunity:availableForAllPageTypes,force:appHostable" access="global" >
    
    <aura:attribute name="URL" type="String" default="" />
    <aura:attribute name="Title" type="String" default="" />
    <aura:attribute name="Image" type="String" default="" />
    <aura:attribute name="Description" type="String" default="" />
    
    
    <div class="c-container1" id="main-content">
        <lightning:layout multipleRows="true" horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small" size="3"  class="box-1">
                <div class="card-contains">
                    <a href="{!v.URL}" class="">
                        <div>
                            <div class="results__name">
                                <center>
                                    <div class="headingMain">
                                        <h3 class="heading">{!v.Title}</h3><br />
                                    </div>
                                    <div class="results__logo">
                                        <center>
                                            <img class="elemLogo1" src="{!$Resource.KimbleImages + '/eleImg.2/'+v.Image}" />
                                        </center>
                                    </div>
                                    <div class="headingDetailMain">
                                        <p class="headingDetail">{!v.Description}</p>
                                    </div>
                                </center>
                            </div>
                        </div>
                    </a><br/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>

CSS

    .THIS a{
    text-decoration:none !important;
}
.THIS .box-1{
    Background-color:#FFFFFF;
    border-radius: 1 px;
    width: 450px;
    height: 100%;
    border-style: none;
    border-radius: 10px;
   
}
.THIS .headingMain{
   overflow: hidden;
   height: 40px;
}
.THIS .headingDetailMain{
   overflow: hidden;
   height: 60px;
}
Improve this question
2
  • 2
    Where are you trying to set the color? I see no CSS or JavaScript here to explain the entire situation.
    – sfdcfox ♦
    Commented Sep 3, 2021 at 0:15
  • please update your post instead of posting this in the comment section
    – glls
    Commented Sep 3, 2021 at 0:52

2 Answers 2

Reset to default
1

You can define all css combination in your css file then pass the class name dynamically from you server side.

<aura:component description="StackTest" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
    force:hasRecordId,lightning:actionOverride,lightning:isUrlAddressable" access="global">

    <aura:attribute name="URL" type="String" default="https://www.google.com"/>
    <aura:attribute name="Title" type="String" default="Test Me"/>
    <aura:attribute name="Image" type="String" default=""/>
    <aura:attribute name="Description" type="String" default="Test Desc"/>
    <aura:attribute name="BackgroundCSS" type="String" default="box-1"/>


    <div class="c-container1" id="main-content">
        <lightning:layout multipleRows="true" horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small" size="3" class="{!v.BackgroundCSS}">
                <div class="card-contains">
                    <a href="{!v.URL}" class="">
                        <div>
                            <div class="results__name">
                                <center>
                                    <div class="headingMain">
                                        <h3 class="heading">{!v.Title}</h3><br/>
                                    </div>
                                    <div class="results__logo">
                                        <center>
                                            <!--<img class="elemLogo1" src="{!$Resource.KimbleImages + '/eleImg.2/'+v.Image}" />-->
                                        </center>
                                    </div>
                                    <div class="headingDetailMain">
                                        <p class="headingDetail">{!v.Description}</p>
                                    </div>
                                </center>
                            </div>
                        </div>
                    </a><br/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>

    <div>
        <lightning:button type="button" value="Change Color" onclick="{!c.changeColor}">Change Color</lightning:button>
    </div>
</aura:component>

Controller:

({
    changeColor: function (component, event, helper) {
       component.set('v.BackgroundCSS', 'box-2')
    },
});

css:

.THIS a{
    text-decoration:none !important;
}
.THIS .box-1{
    Background-color: #3a4834;
    width: 450px;
    height: 100%;
    border-style: none;
    border-radius: 10px;

}

.THIS .box-2{
    Background-color: #8f918e;
    width: 450px;
    height: 100%;
    border-style: none;
    border-radius: 10px;
}

.THIS .headingMain{
    overflow: hidden;
    height: 40px;
}
.THIS .headingDetailMain{
    overflow: hidden;
    height: 60px;
}

enter image description here

Improve this answer
0

I was able to figure this out by defining the style in the div on line 14. Also on lines 19 and 27 I added the style to set the font color. I then needed to remove these definitions from my CSS

    <aura:component implements="forceCommunity:availableForAllPageTypes,force:appHostable" access="global" >
    
    <aura:attribute name="URL" type="String" default="" />
    <aura:attribute name="Title" type="String" default="" />
    <aura:attribute name="Image" type="String" default="" />
    <aura:attribute name="Description" type="String" default="" />
    <aura:attribute name="bgColor" type="String" default="#FFFFFF" />
    <aura:attribute name="textColor" type="String" default="#FFFFFF" />
    
    <div class="c-container1" id="main-content">
        <lightning:layout multipleRows="true" horizontalAlign="space">
            
            <lightning:layoutItem flexibility="auto" padding="around-small" size="3"  class="box-1" >
                <div class="card-contains" style="{! 'background-color:' + v.bgColor }">
                    <a href="{!v.URL}" class="">
                        <div>
                            <div class="results__name">
                                <center>
                                    <div class="headingMain" style="{! 'color:' + v.textColor }">
                                        <h3 class="heading">{!v.Title} </h3><br />
                                    </div>
                                    <div class="results__logo">
                                        <center>
                                            <img class="elemLogo1" src="{!$Resource.KimbleImages + '/eleImg.2/'+v.Image}" />
                                        </center>
                                    </div>
                                    <div class="headingDetailMain" style="{! 'color:' + v.textColor }">
                                        <p class="headingDetail">{!v.Description}</p>
                                    </div>
                                </center>
                            </div>
                        </div>
                    </a><br/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>
Improve this answer

You must log in to answer this question.

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