Creating your first prototype
If you haven’t done so yet, make sure you install the Chrome Extension before proceeding.
Name your prototype
Every prototype needs a name, typically you’ll base it on the project you are doing (e.g., Website Redesign).
Enter the domain(s)
Enter the domain(s) that the prototype should apply to. Only when visting a page on one these domains will get the CSS/JS for the prototype.
You may enter as many domains that you’d like. Remember, the same CSS/JS will be injected when visiting any page on any of the domains for that prototype.
So for example, if you enter these domains:
When visting the following, your overrides with be injected:
But, the following will not work:
- example.com/welcome (the missing
wwww.means it is is not a match.)
- login.example.com (the extra
login.subdomain means it is not a match.)
For now, enter
en.wikipedia.org and click
The initial version
Once created, you’ll be redirected to the Labcoat Editor. The first version will already be set up, called
Initial Version, along with sample CSS and JS files.
Testing, 1, 2, 3.
Now that you have your initial version, let’s see if it works.
Now visit Wikipedia, and assuming you have the extension installed, you’ll see a garishly red sidebar on Wikipedia.
Make an edit
Now go back to the Editor, and change to
background-color: cornflowerblue, click Save, and then reload Wikipedia, you should see a much more pleasing sidebar.
Do you have any suggestions for how to improve this (or any) documentation?
Send an email to firstname.lastname@example.org