Use this link to share with your colleagues:
Updating CSS with Static Resources: https://help.pm.leapevent.tech/a/1017110
Static Resources are .zip files, images, and CSS stylesheets uploaded to your Salesforce instance. The styling of your non-embeddable Signup Forms depend on the files in these Static Resources.
This article will show you how to update the style of your Signup Forms by:
- Downloading your existing Static Resources
- Modifying those Static Resources
- Testing your changes in a sandbox
- Re-uploading your updated Static Resources to your production account
- Troubleshooting if your changes aren't reflected
These steps are intended for web developers who are comfortable with CSS. If you don't administer your website, rope in your web developer before getting started!
If you make unintended changes to your Signup Form and need these corrected, you are responsible for restoring the site’s old style using the resources downloaded to your computer in Step 1 below. If you need PatronManager’s help to fix any changes, you will be subject to a $500 fee for those adjustments.
1. Download your existing Static Resources
Our staff created Static Resources for you when your organization began using PatronManager, so your first step is to access these existing resources and download them to your computer so you can make changes.
Here, we'll be working within the "Lab Demo" organization.
Static Resources are named starting with your organization's name, so you're looking for one like this:
[yourOrganizationName]SignupTheme
Keep in mind that when our staff created these Static Resources, we may have abbreviated your organization name or used initials. If you're having a hard time finding the correct Static Resource, submit a support request via the Client Community and we'll point you in the right direction!
You should always work with a copy of the Static Resource, rather than editing the original downloaded file, so you can keep the original as an archive. This can be very useful if you make unintended changes and need to undo them by re-uploading the original resource.
2. Make changes to the copied Static Resource files
Now it's time to make your changes! You can upload new images, reference them in the stylesheet for the particular site you're updating, and make any other CSS changes necessary.
Inside, you'll find at least one stylesheet, often images, and sometimes additional folders containing other resources.
If you'd like to add images at this point, you may find a nested "images" folder. You can add images there, or to the parent folder, whichever you prefer--just remember that your choice will impact the image path you reference in your stylesheet.
Use a text editor to make changes to stylesheets (we recommend Notepad++ or Sublime Text).
Your stylesheets may not look like the example below, and may have been created before we began adding handy comments to guide changes. Keep in mind that updating stylesheets is intended for web developers who are comfortable with CSS, and we are not able to advise how specific changes can be made to the stylesheets.
Create a new .zip file containing all of the files you want the Static Resource to contain. The name of the .zip file doesn't matter--after you re-upload to the Static Resource, the name of the Static Resource, not the name of the .zip file, is what's important.
If you're using a Mac, your process to zip files will look different than our screenshots here. On a Mac, you can right click, Command+right click, or drag a selection box over the files you need and select "Compress."
You'll need to make sure that your zipped file goes straight to the files within it and doesn't add another level of folders, which can prevent PatronManager from reading your files.
When you re-zip the files, be careful: make sure you're inside the folder, select all files and zip them. Do not navigate out of the folder and zip the folder containing all files. You'll end up with a folder within a folder, and Salesforce will not be able to locate the files inside your Static Resource.
3. Test your changes in a sandbox
We recommend sandbox testing before making changes to your live sites.
If you're new to sandboxes, use these articles to learn about creating and configuring sandboxes, and accessing sandboxes.
While testing, it's important to double-check that you're in a sandbox and not your production environment! You should see the name of your sandbox in a blue bar at the top of your screen.
Navigate to "Static Resources" as you did in Step 1 above, and click "New".
Give the resource the same name as in production, upload the zip file, set Cache Control to "Public," and click "Save".
Did you receive an error reading "Error: That Static Resource name is already in use, please choose a different one?" If so, then your Sandbox already has a copy of your production's resource. You can instead upload your zip file using this step.
Navigate to the PatronSignup Setup tab by clicking the App Launcher, then searching for and selecting "Signup Forms."
Then open the Signup Form you're working on (or create a new one), and click "Edit."
Select your Static Resource in the "Stylesheet Resource" picklist, and type or paste the stylesheet file name in the "Stylesheet Path" field.
The "Stylesheet Path" field is case-sensitive! When you review your form, if the expected style is not applied, first check here to make sure the file name appears exactly as it's written in the Static Resource folder.
Open the sandbox Signup Form you've edited, and see how it looks! If you need to make additional changes, modify the files in the same unzipped folder on your computer, re-zip the files again, and re-upload to the Static Resource.
Here's the link on the Signup Form Setup page:
4. Re-upload the Static Resource to your production instance
When you're satisfied with the changes you've made, zip your final files back up and navigate back to Static Resources in your production instance to re-upload your Static Resource.
After navigating to the Static Resource you're updating, click "Edit".
Click "Choose File", select the freshly re-zipped folder on your computer, and click "Save".
Your Signup Form should immediately reflect your changes (unless you changed the name of your stylesheet or created a differently-named Static Resource in production, in which case adjust these references in production).
My changes aren't reflected! Why?
If you've uploaded your Static Resource and assigned them to the Signup Form, but the form doesn't appear the way you expect, first try refreshing the page - sometimes your browser will cache the old version. If that doesn't fix it, check out these common causes:
Make sure that when you re-zipped your Static Resource after making changes, you did not zip the entire folder, but instead opened the folder, selected all individual files, and zipped these together, as demonstrated in these instructions.
If you created a new Static Resource, rather than updating an existing one, make sure you updated the Stylesheet Resource referenced on your Signup Form.
If you created a new stylesheet file rather than updating an existing one, make sure you've copied and pasted the new file name on your Signup Form. This field is case-sensitive! If the file is called labdemo.signupstyle.css, and you enter Labdemo.signupstyle.css, the style will not be applied to the form.
