URL Param to Hide Preview Bar?

[Chris-Hayes]

I'm doing site testing and use the ?preview_theme_id=####### to test specific themes. Does anyone know if there's a URL option to automatically hide the preview bar? For example, ?preview_theme_id=######&hide_preview_bar. I'm having trouble finding documentation on what params are available for use. Just wondering if anyone knew of a param for this.

Right now I have to run

document.querySelector('#preview-bar-iframe').style.display = 'none';

before tests to hide the bar. Something like a URL param would simplify testing.

Thanks,

Chris

[Visely-Team]

Not sure why would you need this, but to answer your question - there is no query param to instruct the preview bar to disappear. What you can do is add this little snippet to the css file:

#preview-bar-iframe {
    display: none !important;
}

[Chris-Hayes]

Thanks. Like I said, I was interested in this for testing. The bar gets in the way of content when doing functional testing and shouldn't be shown for visual regression testing. The CSS works fine, it just adds an extra step to testing that requires injecting code on page load which I would like to avoid if possible.

[Visely-Team]

OK, so these are automated tests. If you run them using a headless Chrome browser you can create a separate profile and override the styling leveraging Chrome's local overrides.

[Chris-Hayes]

Ah that's good know, thanks. I'll be sure to check that out.

[Chris-Hayes]

After some research it seems the User Profile userChrome.css file has been unfortunately deprecated. With Firefox you have to set an option to re-enable it and it seems completely gone on Chrome. It looks like at this point, running a script to change styling on page load is the only option.

[gina-gregory · Accepted solution]

You can add "?pb=0" to suppress the Preview Bar.

[Chris-Hayes]

Really?! Exactly what I was looking for, thanks!