Hi,

Greetings to you!

You can check a few things which you might have missed.

Style the Personal Site Contact Lookup Page with CSS:

The Personal Site Contact Lookup page uses a cascading style sheet (CSS). V4S provides the VolunteersPersonalSiteCSS.css file as a Document in Salesforce. Customize the CSS with your own CSS styles so that the V4S part of the webpage matches the rest of your website’s look and feel.
Follow the instructions provided for styling the Volunteer Signup page (https://powerofus.force.com/servlet/fileField?retURL=%2Farticles%2FResource%2FVolunteers-for-Salesforce-Setup-and-Configuration-Guide&entityId=ka0800000000O2hAAE&field=File__Body__s#page=41&zoom=100,0,414), making sure that you edit the VolunteersPersonalSiteCSS.css file. You can use CSS to style the font and the size of the form (.cssContactLookupPanel).
You can change the text of the title and body of the form by editing these custom labels (https://powerofus.force.com/servlet/fileField?retURL=%2Farticles%2FResource%2FVolunteers-for-Salesforce-Setup-and-Configuration-Guide&entityId=ka0800000000O2hAAE&field=File__Body__s#page=71&zoom=100,0,465):
• labelContactInfoLookupTitle
• labelContactLookupInstructions


Customize the Overall Styling of the Volunteers Personal Site Pages:

A Site Template controls the overall page styling, header, navigation, and footer for Personal Site pages. V4S provides a Visualforce page that serves as the default Site Template. Make a copy of it and customize the styling of the page components.

1. From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages.
2. In the list of pages, click PersonalSiteTemplate.
3. Click Preview to open the page in a new window and see the default styling.
4. Because you can’t edit a Visualforce page that’s part of a Salesforce managed package, make a copy of the template.
     a. Back on the page detail, select all the Visualforce Markup and copy it to your clipboard.
     b. Go back to the Visualforce Pages list, and click New.
     c. Give it a label such as MyPersonalSiteTemplate.
     d. Review the name that it automatically assigns.
     e. Select and delete all the placeholder Visualforce Markup, then paste your copied markup.
     f. Edit any page or object references in the markup to include the GW_Volunteers__ namespace (see details below).
     g. Save your changes.
5. Edit your copy of the Site Template. Some things to note:
     • Be careful to preserve the jQuery, jQueryUI and Boostrap Javascript libraries that the template loads, and that other Sites pages also rely on.
     • When referring to any page or object within the V4S managed package, always include the GW_Volunteers__ namespace. For example, change the page reference, Page.PersonalSiteJobListing, to Page.GW_Volunteers__PersonalSiteJobListing. Similarly, change the label reference, Label.labelPersonalSiteJobListingTitle, to Label.GW_Volunteers__labelPersonalSiteJobListingTitle.
     • The tag is used to include VolunteersPersonalSiteCSS.css for all the pages to use.
     • The tag indicates the area where content from the Personal Site Visualforce pages is inserted


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas​