Updating the look, or "wrapper", of your page – CharityWeb Support

Each of our products has an "Update Wrapper" tab, and each operates independently of the other. Thus, each product can have different branding.

The basic theory is that you first create the branding that you want on your own server by creating a new page which has the phrase "insert content here" where you want the form to go. When it looks the way you want, you copy it over by entering the URL of the page you created in the text box on the Update Wrapper page and hitting submit. (For a video example, click here.)

If the look isn't what you want, fix the page on your server and copy it over again. There is no harm in doing this as many times as you want.

Thus, you, your staff, or your web designer can work with the design tools you are most familiar with in creating the look you want.

You can also upload a CSS file to change the format of the page. This is the last CSS file to load so you can override any style except in-line styles. Thus, any change to the format of the page, e.g. font, spacing, width, background, that can be done via CSS can be controlled on a per page basis. This feature gives any designer much flexibility to make the page work the way he or she wants.

Depending upon the structure of your page, portions of the page are automatically made editable. Editable regions have dotted boxes around them. Click on them and a toolbar appears. You have access to the HTML source in these regions. The structure most likely to result in editable header and footer regions is:

<html>

<body>

<div> # header section
</div> # end header section

<div>insert content here</div> # content area

<div> # start footer section
</div># footer section

</body>

</html>

The key point in the structure is that the header section begins and ends before the content area as does the footer section.

Now, there are a few restrictions to remember when creating the page on your server:

We strip out all javascript files when it is copied from your server to the CharityWeb server. This is primarily to avoid conflicts with the javascript we use to make the forms easier to use. Secondarily, it is to ensure that only javascript that has been vetted by us and scanned by third parties for security vulnerabilities is used on our pages. If you have any javascript driven effects on your page, e.g. drop-down menus or loader image, they will not function on our server. You will have to use alternative means, such as CSS, to accomplish the same thing or comment out the feature. Fortunately, it is best to minimize distractions on a donation page so this restriction will not reduce the effectiveness of your form.
You will have to solve any conflict in your template between your CSS files and CharityWeb's CSS or javascript files. We will provide guidance. Also, the Chrome Developer Tools or the Firefox Developer Tools are excellent resources for fixing problems. However, you will need to make the fix on your server before copying it over to our server. Please be sure to tell us about any conflicts so that over time we can minimize them.
Some conflicts will need the help of a web designer or someone who knows HTML and/or CSS.

You also have options for fixing problems after the copy is done.

You can upload a CSS file that fixes the problem. This will often be the easiest way to fix small problems.
(Optional) Typically, as explained above, when a template is copied, our software makes portions of the page editable. This gives you access to the HTML source where you may be able to fix the problems.

0 Comments