Our documentation has moved!

You are currently viewing a legacy version of our help articles.
For the most up-to-date version, please use the new Chargify Help & Support Site.
Follow

Using your own CSS for Hosted Signup Page

Chargify's hosted signup page allows you to add your own CSS to completely customize the look of your page. This Knowledge Base entry will give you some quick tips on how to override the default CSS with your own styles. (Look here for a broader overview of the hosted signup page.)

We recommend using a tool like the Firebug plug-in for Firefox (CSSEdit is also an excellent tool). We'll use Firebug here. First open your hosted signup page in Firefox and open the Firebug plug-in by clicking on its icon in the lower right of your browser window. With Firebug open you can now use the inspector tool to click on any part of your page that you'd like to style.

1-inspector_tool.png

In this example we've clicked on the product name, which happens to be the main heading on the page.

2-click_element.png

Once you have an element selected you will see the style(s) for that element in the Style tab in Firebug. Here you can experiment by modifying the style(s) to your liking.

3-customize_css.png

After you have the style(s) the way you like you can copy the style(s) and paste it into the Custom CSS text area on your Chargify Hosted Page Settings page.

4-copy_css.png

5-paste_css.png

Using a tool like Firebug you'll be able to style any element on your hosted signup page to achieve a completely custom look for your page.

6-custom_page.png

Was this article helpful?
3 out of 3 found this helpful
Have more questions? Submit a request

2 Comments

Please sign in to leave a comment.
Powered by Zendesk