I've recreated the 'selfRegister' standard community lightning component. I copied all the component code from it and created a new lightning component. However the styling doesnt look the same. As you can see from the image below, the top one is the standard one, the bottom one is the clone.

What can I do to make them look the same, what could I pehaps check, change, ajust/look into to get the same look & feel?



Below is th component (.cmp) and  stylling (.css)

<aura:component controller="LightningSelfRegisterController2" implements="forceCommunity:availableForAllPageTypes">
    <!-- Removed some of the code----->
        
    <div>
            <aura:renderIf isTrue="{!v.showError}">
                <div id="error">
                    <ui:outputRichText value="{!v.errorMessage}"/>
                </div>
            </aura:renderIf>
            <div id="sfdc_username_container" class="sfdc">
                <span id="sfdc_user" class="login-icon" data-icon="a"></span>
                <ui:inputText value="" aura:id="firstname" placeholder="{!v.firstnameLabel}" keyup="{!c.onKeyUp}" class="input sfdc_usernameinput sfdc"/>
            </div>
 
            <div id="sfdc_nickname_container" class="sfdc">
                <span id="sfdc_user" class="login-icon" data-icon="a"></span>
                <ui:inputText value="" aura:id="lastname" placeholder="{!v.lastnameLabel}" keyup="{!c.onKeyUp}" class="input sfdc_usernameinput sfdc slds-icon_container slds-icon-utility-user inputIcon slds-button__icon forceIcon"/>
            </div>
			
            <div id="sfdc_email_container" class="sfdc">
                <span id="sfdc_user" class="login-icon" data-icon="k"></span>
                <ui:inputText value="" aura:id="email" placeholder="{!v.emailLabel}" keyup="{!c.onKeyUp}" class="input sfdc_usernameinput sfdc"/>
            </div>
        
            <div id="sfdc_email_container" class="sfdc">
                <span id="sfdc_user" class="login-icon" data-icon="k"></span>
                <ui:inputSelect aura:id="country" label="Select me:" class="input sfdc_usernameinput sfdc dynamic"/> 
            </div> 
          

            
            <aura:iteration aura:id="extraFields" items="{!v.extraFields}" var="curField" indexVar="index">
                <div id="sfdc_extrafield_container" class="sfdc">
                    <span id="sfdc_user" class="login-icon" data-icon="a"></span>
                    <ui:inputText value="{!curField.value}" aura:id="{!curField.fieldPath}" placeholder="{!curField.label}" keyup="{!c.onKeyUp}" class="input sfdc_extrafieldinput sfdc"/>
                </div>
            </aura:iteration>

            <aura:renderIf isTrue="{!v.includePasswordField}">
                <div id="sfdc_password_container" class="sfdc">
                    <span id="sfdc_lock" class="login-icon sfdc" data-icon="c"></span>
                    <ui:inputSecret value="" aura:id="password" placeholder="{!v.passwordLabel}" keyup="{!c.onKeyUp}" class="input sfdc_passwordinput sfdc"/>
                </div>
    
                <div id="sfdc_confirm_password_container" class="sfdc">
                    <span id="sfdc_lock" class="login-icon sfdc" data-icon="c"></span>
                    <ui:inputSecret value="" aura:id="confirmPassword" placeholder="{!v.confirmPasswordLabel}" keyup="{!c.onKeyUp}" class="input sfdc_passwordinput sfdc"/>
                </div>
            </aura:renderIf>

            <div class="sfdc">
                <ui:button aura:id="submitButton" label="{!v.submitButtonLabel}" press="{!c.handleSelfRegister}" class="sfdc_button"/>
            </div>
    </div>
</aura:component>

Standard CSS.(Nothing edited)

.THIS #sfdc_username_container{
    margin-bottom:10px;
    padding: 12px;
    background-color:white;
    border: 1px solid #CCC;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.THIS #sfdc_nickname_container{
    margin-bottom:10px;
    padding: 12px;
    background-color:white;
    border: 1px solid #CCC;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.THIS #sfdc_email_container{
    margin-bottom:10px;
    padding: 12px;
    background-color:white;
    border: 1px solid #CCC;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.THIS #sfdc_extrafield_container{
    margin-bottom:10px;
    padding: 12px;
    background-color:white;
    border: 1px solid #CCC;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.THIS #sfdc_user{
    float:left;
    width:23px;
    height:25px;
    padding-top:1px;
    padding-left:2px;
    margin:0px;

}

.THIS #sfdc_lock{
    float:left;
    width:23px;
    height:25px;
    padding-top:1px;
    padding-left:2px;
    margin:0px;
}

.THIS .login-icon {
    color:#ccc;font-size:22px;
}

.THIS #sfdc_password_container{
    margin-bottom:10px;
    padding: 12px;
    background-color:white;
    border: 1px solid #CCC;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.THIS #sfdc_confirm_password_container{
    padding: 12px;
    background-color:white;
    border: 1px solid #CCC;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.THIS button.sfdc_button {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #fff;
    background-color: #0070d2;
    border-color: #357ebd;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 1.42857143;
    border-radius: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.THIS button:hover {
    background-color:#3276b1;
    border-color:#285e8e;
    cursor:pointer;
}

.THIS input {
    margin-left:10px;
    margin-top: 3px;
    border: 0px solid transparent;
    width: 70%;
    -webkit-appearance: none;
    font-size: 14px;
}

.THIS #sfdc_forgot{
    font-family: 'Open Sans', 'sans-serif';
    font-weight:300;
    font-size: 14px;
    margin-top: 10px
}

.THIS #error {
    text-align: center;
    color:#FF0000;
}

.THIS a {
    color:white;
    text-decoration: none;
}
.THIS a:hover {
    color:white;
    text-decoration: none;
}

.THIS input[type="checkbox"] {
    appearance: none;
    border: 1px solid white;
    height: 22px;
    width: 22px;
    vertical-align: middle;
}

.THIS input[type="checkbox"]:checked {
    border: 1px solid ;
}

.THIS input[type="checkbox"]:checked:after {
    display: block;
    position: relative;
    content: '';
    left: 3px;
    top: 3px;
    height: 6px;
    width: 10px;
    border-bottom: 4px solid /*#354452*/ white;
    border-left: 4px solid /*#354452*/ white;
    transform:rotate(-45deg);
}

.THIS input[type="checkbox"].disabled {
    opacity: 0.35;
}

.THIS input[type="checkbox"] + label {
    vertical-align: middle;
}

 

User that logged in customer community is not able to download content version files through this link https://<community-domain>/<community instance>/sfc/servlet.shepherd/version/download/<content document Id>
User license is 'customer portal login user'
Srm content user checkbox is flagged. Gets this error: 
'URL is not found'
Any ideas?

Hello Everyone ,
                       I am working on Custom Calendar in VisualForce page. I follow  steps from this  http://www.codebycody.com/2013/06/create-calendar-view-in-salesforcecom.html . Everything is doing fine but i dont know how to add new event in custom calendar on click on date.
So any idea how i can add new events ??
My controller

public class CalendarExample_Controller {



    public Boolean includeMyEvents {get;set;}

    public list<calEvent> events {get;set;}

    

    //The calendar plugin is expecting dates is a certain format. We can use this string to get it formated correctly

    String dtFormat = 'yyyy-MM-dd HH:mm:ss';

    

    //constructor

    public CalendarExample_Controller() {

        //Default showing my events to on

        includeMyEvents = true;

    }

    

    public PageReference pageLoad() {

        events = new list<calEvent>();

        //Get Contact's Birthdays

        for(Contact cont : [select Id, Birthdate, FirstName, LastName from Contact where Birthdate != null]){

            //here we need to replace the birth year with the current year so that it will show up on this years calendar

            DateTime startDT = datetime.newInstance(Date.Today().Year(),cont.Birthdate.Month(), cont.Birthdate.Day());

            calEvent bday = new calEvent();

            

            bday.title = cont.FirstName + ' ' + cont.LastName + '\'s Birthday!';

            bday.allDay = true;

            bday.startString = startDT.format(dtFormat);

            //Because this is an all day event that only spans one day, we can leave the send date null

            bday.endString = '';

            bday.url = '/' + cont.Id;

            bday.className = 'event-birthday';

            events.add(bday);

        }

        

        //Get Campaigns

        for(Campaign camp : [select Id, Name, StartDate, EndDate from Campaign where IsActive = true]){

            DateTime startDT = camp.StartDate;

            DateTime endDT = camp.EndDate;

            calEvent campEvent = new calEvent();

            

            campEvent.title = camp.Name;

            campEvent.allDay = true;

            campEvent.startString = startDT.format(dtFormat);

            campEvent.endString = endDT.format(dtFormat);

            campEvent.url = '/' + camp.Id;

            campEvent.className = 'event-campaign';

            events.add(campEvent);

        }

        

        //Get my Events if we have selected the correct option

        if(includeMyEvents){

            for(Event evnt: [select Id, Subject, isAllDayEvent, StartDateTime, EndDateTime from Event where OwnerID = :UserInfo.getUserId()]){

                DateTime startDT = evnt.StartDateTime;

                DateTime endDT = evnt.EndDateTime;

                calEvent myEvent = new calEvent();

                

                myEvent.title = evnt.Subject;

                myEvent.allDay = evnt.isAllDayEvent;

                myEvent.startString = startDT.format(dtFormat);

                myEvent.endString = endDT.format(dtFormat);

                myEvent.url = '/' + evnt.Id;

                myEvent.className = 'event-personal';

                events.add(myEvent);

            }

        }

        return null;

    }

    

    public PageReference toggleMyEvents() {

        if(includeMyEvents){

            includeMyEvents = false;

        }

        else{

            includeMyEvents = true;

        }

        pageload();

        return null;

    }



    

    //Class to hold calendar event data

    public class calEvent{

        public String title {get;set;}

        public Boolean allDay {get;set;}

        public String startString {get;private set;}

        public String endString {get;private set;}

        public String url {get;set;}

        public String className {get;set;}

    }
    }

visualforce page

<apex:page controller="CalendarExample_Controller" action="{!pageLoad}">

    <link href="{!$Resource.fullCalendarCSS}" rel="stylesheet" />

    <link href="{!$Resource.fullCalendarPrintCSS}" rel="stylesheet" media="print" />

    

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <script src="{!$Resource.fullCalendarMinJS}"></script>

    <apex:includeScript value="{!URLFOR($Resource.momentmin)}"  />

    <script>

        //We need to wrap everything in a doc.ready function so that the code fires after the DOM is loaded

        $(document).ready(function() {   

            //Call the fullCallendar method. You can replace the '#calendar' with the ID of the dom element where you want the calendar to go. 

            $('#calendar').fullCalendar({
                  
  

                header: {

                    left: 'prev,next today',

                    center: 'title',

                    right: 'month,agendaWeek,agendaDay'

                },

                editable: true,

                events:

                [

                    //At run time, this APEX Repeat will reneder the array elements for the events array

                    <apex:repeat value="{!events}" var="e">

                        {

                            title: "{!e.title}",

                            start: '{!e.startString}',

                            end: '{!e.endString}',

                            url: '{!e.url}',

                            allDay: {!e.allDay},

                            className: '{!e.className}'

                        },

                    </apex:repeat>

                ],
                
                
         
            });

           
        });

    

    </script>

       

    <!--some styling. Modify this to fit your needs-->

    <style>

        #cal-options {float:left;}

        #cal-legend { float:right;}

        #cal-legend ul {margin:0;padding:0;list-style:none;}

        #cal-legend ul li {margin:0;padding:5px;float:left;}

        #cal-legend ul li span {display:block; height:16px; width:16px; margin-right:4px; float:left; border-radius:4px;}

        #calendar {margin-top:20px;}

        #calendar a:hover {color:#fff !important;}

        

        .fc-event-inner {padding:3px;}

        .event-birthday {background:#56458c;border-color:#56458c;}

        .event-campaign {background:#cc9933;border-color:#cc9933;}

        .event-personal {background:#1797c0;border-color:#1797c0;}

    </style>

    

    <apex:sectionHeader title="My Calendar Example"/>

    <apex:outputPanel id="calPanel">

        <apex:form >

            <div id="cal-options">
                 
                <apex:commandButton value="{!IF(includeMyEvents,'Hide My Events','Show My Events')}" action="{!toggleMyEvents}"/>

            </div>

            <div id="cal-legend">

                <ul>

                    <li><span class="event-birthday"></span>Contact's Birthdays</li>

                    <li><span class="event-campaign"></span>Campaigns</li>

                    <li style="{!IF(includeMyEvents,'','display:none')}"><span class="event-personal"></span>My Events</li>

                </ul>

                <div style="clear:both;"><!--fix floats--></div>

            </div>

            <div style="clear:both;"><!--fix floats--></div>

            <div id="calendar"></div>

        </apex:form>

    </apex:outputPanel>

</apex:page>