CSS classes: Profile widget

Following is the list of CSS classes applied to the following templates of the Profile widget:

Read mode template

CSS class name Class set to  Default HTML tag 
sfprofileAutoGeneratedListWrp User profile wrapper in Auto generated fields read mode <ul>
sfprofileArticleLikeWrp User profile wrapper in Article-like read mode <div>
sfprofileListLikeWrp User profile wrapper in List-like read mode <div>
sfprofileField Single profile field wrapper <li> in Auto generated fields mode, <div> in Article-like and List-like modes
sfprofileAvatar Avatar outer wrapper in Article-like and List-like modes <div>
sfUserAvatar Avatar outer wrapper in Auto generated fields mode <li>
sfprofileName Wrapper of first and last name fields in Article-like mode <div>
sfprofileFirstName Wrapper of first name field in Article-like and List-like modes <div>
sfprofileLastName Wrapper of last name field in Article-like and List-like modes <div>
sfprofileAbout Wrapper of about field in Article-like and List-like modes <div>
sfTxtLbl Field label <div>
sfTxtContent Profile field text <div>
sfImg Avatar inner wrapper <div>
sfprofileLnkWrp Wrapper of Edit Profile and Change Password links <div>
sfprofileEditLnk Edit Profile link <a>
sfprofileChangePasswordLnk Change Password link <a>
sfprofileNotLoggedMsg User not logged in message <div>
sfprofileSuccessMsg Profile successfully updated message <div>
sfprofileFailureMsg Profile not successfully updated message <div>


Edit mode template

CSS class name  Class set to  Default HTML tag
sfprofileAutoEditFormWrp  Wrapper Auto generated fields edit mode <fieldset>
sfprofileEditFormWrp Wrapper Profile form edit mode <fieldset>
sfprofileField Single profile field wrapper <li> in Auto generated fields mode, <div> in Article-like and List-like modes
sfprofileAvatar Avatar outer wrapper in Profile form modes <div>
sfUserAvatar Avatar outer wrapper in Auto generated fields mode <li>
sfprofileFirstName Wrapper of first name field in Profile form modes <li>
sfprofileLastName Wrapper of last name field in Profile form modes <li>
sfprofileAbout Wrapper of about field in Profile form modes <li>
sfTxtLbl Field label <label>
sfFieldWrp Text input field wrapper <div>
sfTxt Text input <input>, <textarea>
sfImgPreviewWrp Avatar wrapper <div>
sfPreviewImgFrame Avatar image inner wrapper <div>
sfChange Change photo link <a>
sfReuploadImgWrp Change photo wrapper <div>
sfCancel Don't change photo link  <a>
sfprofileLnkWrp Wrapper of Save changes and Cancel buttons <div>
sfprofileEditLnk Save changes button <a>
sfprofileChangePasswordLnk Cancel link <a>
 

Change password template

CSS class name Class set to Default HTML tag 
sfprofileChangePasswordFormWrp Change password form wrapper <fieldset>
sfprofileFieldsList Field list <ol>
sfprofileField Single field wrapper <li>
sfTxtLbl Field label <label>
sfFieldWrp Text input field wrapper <div>
sfTxt Text input <input>
sfprofileLnkWrp Wrapper of Save changes and Cancel buttons <div>
sfprofileSaveLnk Save changes button <a>
sfprofileCancelLnk Cancel link <a>

Was this article helpful?