function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Olivia Porter 1Olivia Porter 1 

SLDS not working- Trailhead Input Data Using Forms Error

Hello, I have followed this trailhead exactly as they have asked and I am unable to render the SLDS view. The output is in standard HTML. I have seen other forums that have faced similar problems and I have copied their exact code over with no avail. I am 99.9% sure the code is correct, but perhaps the static resource is not uploading correctly? I can not figure out what is going wrong. 

I have seen some people use this tag:<ltng:require styles="/resource/SLDS282/assets/styles/salesforce-lightning-design-system.css"/>
And the trailhead suggests using this tag: <ltng:require styles="{!$Resource.SLDS12345 +

If not the static resource, then perhaps it is this tag?

Any help would be greatly appreciated. 

My App:
        <ltng:require styles="/resource/SLDS282/assets/styles/salesforce-lightning-design-system.css"/>
        <div class="slds">    

My camping.cmp: *please note I have also attempted to just do the expenses example on the trailhead but with no success 

<aura:component >
 <aura:component >   
    div style="slds">
        <c:campingHeader />
        <c:campingList /> 
</aura:component >

My header:
<aura:component >
        <div class="slds-col slds-col--padded slds-p-top--large">
            <div style="slds">
        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col">
                    <h1 class="slds-text-heading--medium">Camping List</h1>

I won't past the other content for the header isn't even working. 
Best Answer chosen by Olivia Porter 1
hi Olivia Porter

They changed the file name in 2.0 it seems. If you look in the zip file you downloaded you will see that the stylesheet is now named:

so first download slds zip file from

upload this file as static resources  --> file name----choose file----Cache Control = public .

now in your component/application add these tag

styles="{! $Resource.yourfileName + '/assets/styles/salesforce-lightning-design-system.css'}"/>
<ltng:require styles="/resource/yourfileName /assets/styles/salesforce-lightning-design-system.css"/>

it work fine.


Mark it best answer if it work. :)