Website Preview with Live Overrides

Overrides allow you to perform non-destructive, real-time CSS changes for nearly any HTTP-based website. You don't need any access to the server beyond the ability to browse it as a normal user. This offers boundless potential for experimenting and discovering how other websites tick.

Topics

• Getting Started
• Editing Style Sheets
• Troubleshooting

Getting Started

First, open a new preview with Preview ⟩ New Preview Tab (control command P) and enter the URL you wish to preview. If you already have a copy of the CSS, open it in the Workspace. This can either be a standard CSS file or a SCSS/LESS style sheet in a Dynamo folder.

• In the toolbar, click the Go (⦾) button and choose the style sheet you want to override.
• Override and Edit with the style sheet you want to apply and edit; if you do not have a local copy of the style sheet, you can choose to extract it.
• Play with colors and styling: have fun.

Espresso will download or open the stylesheet and insert a comment at the top of it that looks like this:

/* @override http://espressoapp.com/path/to/style.css */

This comment is what cues Espresso in that you want to use a CSS override for this stylesheet, so if you save the comment with your file, any previews for that website will automatically turn into live previews when you open the stylesheet in the future (and since it is a comment, it will not affect users in normal browsers if you leave it in when you upload your stylesheet to the server).

Editing Style Sheets

Once you have an Override set up, any changes you make in the overriding document will be reflected in your preview, as you edit. After you are happy with how the CSS looks, you can upload the file to your server so that everyone else will see the same changes when they load your site.

As always, the Xray inspector is extremely useful to navigate styles applied to page elements.

Troubleshooting

Some CSS properties may not work as expected. In particular, if you are linking to an image in your stylesheet (a background image, for instance), the image will need to be relative to the server copy of the stylesheet, not your local copy. This means you need to upload any new images prior to them showing up in your preview.