Customizing the pre-registration widget – Openprovider

Openprovider offers a white-label pre-registration widget: a small piece of code that you can use on your website to collect pre-registrations. This widget is available via the menu New gTLDs > Pre-registration widget: just copy the iframe-code to your own website and you're ready.

Unless you want to changes the lay-out in order to match your website's style and color. This article describes the CSS which can be customized.

Language

By default, the language is defined by your account settings. But you can provide the widget in any language on your site by changing the language code in the URL. The supported values are:

en_GB (English)
nl_NL (Dutch)
es_ES (Spanish)
de_DE (German)
ru_RU (Russian)

Example:

<iframe
  width="600"
  height="600"
  src="https://.../?token=xxx&lang=nl_NL"
  frameborder="0"
>
</iframe>

Step 1: domain and extension selection

For easy reference, the numbers in the image refer to the numbers below.

1. Logo

A logo can be placed on top of the widget. By default it's hidden, but you can easily add your own logo:

Original code

Customized code

#logo {
    position: relative;
    /* Change this url to your company logo */
    /*
      height: 98px;
      width: 212px;
      background: url(http://yourwebsite.com/logo.png) 0 0 no-repeat;
    */
}

#logo {
    position: relative;
    height: 70px;
    width: 200px;
    background: url(http://yourwebsite.com/logo.png) 0 0 no-repeat;
}

2. Headers

By default only the color is changed, but you can change any style element by using basic CSS.

Original code	Customized code
.gtlds h3 { color: #B30028; }	.gtlds h3 { color: black; font-style: italic; }

3. Domain input

This text area is fully customizable.

Original code

Customized code

.gtlds #somedomain {
    border: 1px solid #B30028;
    padding: 5px 10px;
    width: 70%;
}

.gtlds #somedomain {
    border: 1px solid black;
    background-color: #FFD;
    padding: 5px 10px;
    width: 70%;
}

4. Category header

Original code	Customized code
.gtlds .accordion > dt { background: rgb(221,221,221); }	.gtlds .accordion > dt { background-color: white; text-decoration: underline; }

5. 'Toggle all'

Original code	Customized code
.gtlds h5{ color: #222; }	.gtlds h5{ color: blue; text-decoration: underline; }

6. Extension name

Original code	Customized code
.gtlds .checkbox > span{ color: #222; }	.gtlds .checkbox > span{ color: blue; text-decoration: underline; }

7. Extension English meaning

Original code	Customized code
.gtlds small { color: #444; }	.gtlds small { color: grey; }

8. Borders

By default a red border is used, this can be customized.

Original code	Customized code
.gtlds .steptitle, .gtlds hr { border-bottom: 1px solid #B30028; }	.gtlds .steptitle, .gtlds hr { border-bottom: none; }

9. Buttons

By default only the color is changed, but you can change any style element by using basic CSS.

Original code

Customized code

.button {
    border: 1px solid #444;
    padding: 5px 10px;
    margin: 2px;
    background-color: white;
    font-size: 15px;
    text-decoration: none;
    color: #444;
    border-radius: 3px;
}

.button:hover {
    background-color: #444;
    color: white;
    text-decoration: none;
}

.button {
    border: 1px solid #444;
    padding: 5px 10px;
    margin: 2px;
    background-color: #AFA;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    color: black;
    border-radius: 3px;
}

.button:hover {
    background-color: #5A5;
    text-decoration: none;
}

Step 2: finish order

10. Active grouping

Original code	Customized code
.gtlds .sort.active { background-color: #B30028; color: white; }	.gtlds .sort.active { background-color: green; color: white; }

11. Inactive grouping

Original code	Customized code
.gtlds .sort { border-radius: 2px; }	.gtlds .sort { border-radius: 2px; cursor: pointer; }

12. Text

Original code	Customized code
.gtlds h5{ color: #222; }	.gtlds h5{ color: blue; }

13. Error messages

Original code	Customized code
.gtlds .alert { border: 1px solid white; padding: 5px 10px; margin: 2px; }	.gtlds .alert { border: 1px solid white; padding: 5px 10px; margin: 2px; background-color: yellow; }

14. E-mail address input

Original code

Customized code

.gtlds .email {
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid #BBB;
    font-size: 15px;
}

.gtlds .email.invalid {
    border: 1px solid red;
}

.gtlds .email {
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid black;
    font-size: 15px;
    background-color: #FFA;
}

.gtlds .email.invalid {
    background-color: red;
}

15. Result messages

Original code

Customized code

.msg {
    padding: 15px 30px;
    margin: 15px;
}

.msg.error {
    border: 3px solid #E7B1AE;
    background-color: #FACDCB;
}

.msg.success {
    border: 3px solid #A0E4A0;
    background-color: #C8FFC8;
}

.msg {
    padding: 15px 30px;
    margin: 15px;
}

.msg.error {
    border: 3px solid #E7B1AE;
    background-color: red;
}

.msg.success {
    border: 3px solid #A0E4A0;
    background-color: green;
}