White-labelling anguish.

almost 9 years ago from , Product Designer at Memrise, Organiser of Design Club.

I am a Junior Designer in London and have encountered this same problem a number of times now.

I am often asked to style white labelled products (most recently a ticketing platform), which involves creating a stylesheet that overwrites the stock styles of the product with our shiny new ones. Invariably however there is no dev environment or staging server to test my code out and hack around.

My work around / process thus far has been to write my styles in Sublime, then use Chrome extension 'Stylish' to serve my stylesheets after the webpage's. This way my styles overwrite the ones on the page, and can then be sent (minified, of course) to be included in the product.

Though I can style any site this way, it is a slow process as I have to save it in Sublime, copy and paste the code into Stylish, save Stylish and then refresh my webpage. Every time I want to see my changes!

Basically I'm after a more efficient way to edit pages in the browser. Chrome inspector is great but I can't print out the styles afterwards, which has led me to my current work around.

Maybe this is not a common problem? Or maybe my method is totally unorthodox? Either way I wanted to see if any of you encounter similar problems, and how you get around them.


  • ben johnstonben johnston, almost 9 years ago

    I know I already mentioned this on Twitter, which coincidentally is how I now have this DN account (thanks again!), but for posterity: Emmet LiveStyle [http://livestyle.emmet.io/] is where it's at. I can vouch from daily usage.

    For your case especially, the way it maps the stylesheets is much more pleasant and reliable than traditional 'livereload' tools.

    Pretty much just: 1. Install it from Sublime's Package Control, and install the Chrome ext. 2. Open a css file in Sublime (can be blank, stuff you've got so far, or a copy of the live stylesheet, whatever's best for your workflow). 3. Click a couple buttons in your new LiveStyle tab in DevTools to map it up, and you are on the air. 4. The magical watcher will update the document without any saving or refreshing, and it's bi-directional (so changes in DevTools will instantly update your css in Sublime, and vice versa).

    3 points
  • George ColtartGeorge Coltart, almost 9 years ago

    This might solve your problem, but I'm not 100% http://livereload.com/ It compiles any JS/CSS and 'pushes' it into the current browser without refreshing, although I'm not sure whether you need to have the site running off a local server or you can use it on any website you have loaded in your browser.

    1 point
  • John Athayde, almost 9 years ago

    I don't know if this will help you specifically, but Brackets is a new editor that is web based, and you might be able to pipe things through it (http://brackets.io).

    Is there any way to run something as localhost? Can you get a copy of the code as a developer from the whitelabel provider?

    One other thought is to try Opera's author mode and include a local style sheet that would override all styles. Perhaps try something similar with Safari's Advanced tab and "StyleSheet" directive. I'm sure there's something similar in Chrome as well. That would be a physical sheet you could edit with Sublime.

    1 point
  • deleted account, almost 9 years ago

    1) Open the Inspect Element window. 2) In the Elements tab, just click the "+" at the top-right, which will create a new CSS rule. 3) Click out of it. 4) You should now have a "inspector-stylesheet:1" link. Click that. 5) Write CSS that instantly updates in the browser.

    1 point
    • , almost 9 years ago

      Yeah that seems much faster than my current process.

      What I guess I really want is something that allows me to write in Sublime and updates the browser when I save. Guess I will have to try and build it!

      Thanks a lot though VI!

      0 points
  • , almost 9 years ago

    Thanks for your help guys. Currently sampling all of them to find the best fit.

    You are all wonderful human beings.

    0 points