Xplug – How to do minor tweaks to style (contrast enhancement)

The release of Xplug v1.2 was quite a success.  The possibility to add a “dark” style and customize it via a configuration dialog seems to be something many APEX developers appreciate.

But what if you just want to do a small modification like changing the background color of the properties group header? Until now that was hard -if not -impossible- to do, because the CSS that is injected by Xplug is focussing on a dark style.

xplug-chrome-v1_2-screenshot_5

Christoph Ruepprich asked me if there’s nonetheless a way to accomplish just that and it got me thinking. Basically all pieces were already there, just had to bring them together:

  1. Add the possibility to override the inclusion of the Xplug (dark style) CSS. This is handled by the new “Override Xplug CSS” YES/NO switch under “Advanced” in the configuration dialog.
  2. In the custom CSS under “Advanced” you can now specify placeholders for the colors 1-10.  So if you for example want to reference the first color you’d do so by including %%C1%% in your custom CSS code snippet.

If you want to give it a try, you can do so by grabbing Xplug v1.2.1 which is now available in the Chrome and Firefox Add-Ons store.

For kicks here’s the JSON style fragment you can import into Xplug.
Only the colors 1 and 2 are used.

Here’s a Youtube demo video showing how the style is created (warning: turn volume down, music in video):

Enjoy!
Filip

 

One thought on “Xplug – How to do minor tweaks to style (contrast enhancement)”

Leave a Reply

Your email address will not be published. Required fields are marked *