Discussion on InStyle - WordPress Visual CSS Editor


jepunia supports this item


This author's response time can be up to 2 business days.

11 comments found.

I push “Try the Demo” and nothing, white screen. Is there some discount on 1-10 purchase :) ?

Sorry about that. I just changed a few things on the demo site. Let’s hope that that was the problem.

I just checked in the newest versions of Chrome, Firefox, Safari, Opera, Vivaldi ( all Mac ), as well as Edge on Win10. On my end everything works fine.

Please keep in mind that due to javascript limitations in older browsers, the plugin needs at least IE11 or Edge on Windows. For the best user experience we recommend using Chrome, Firefox, Opera or Safari.

First time loading time could also be a bit longer. The plugin has to load some rather big scripts. After that the scripts will be cached.

I am still in the process of adding some instructions to the preview site, so here is what you have to do to get started on the demo site:

  • Click on the InStyle Panel on the left hand side of the screen.
  • Click on the power icon located in the upper right corner of the preview frame. That opens the controller.
  • Now click on the ‘bullseye’ icon. Now, when you hover over the preview window, hovered elements will get highlighted. Clicking an element will select it. Now you can adjust the selector and/or add styles from the controls located on the left hand side of the screen. When you are done adding styles to the element, deselect the bullseye.

For reference, I am going to add our quick start guide to the demo site sometime later today.

Regarding a volume discount, I don’t know. That’s probably something you have to discuss with CodeCanyon.


Turns out there actually was an accessibility problem with the demo site when coming from the item page

Thanks kuka1 for pointing that out to us

The problem is related to cross domain security restrictions. The demo site can not be loaded into the CodeCanyon iframe.

Just click on ‘Remove Frame’ located in the upper right corner of the screen to remove the frame. After that you can continue to the demo site.

Our apologies to anybody affected, and sorry for the inconvenience

Very nice! Good Job!


Doesn’t work with Genesis Framework. The page is not shown 100 % width, it’s much smaller. Unuseable.

Hi, at the moment I’m working on local install, so I can’t provide a link. With InStyle deactivated everything is ok. I will check everything with the information you gave in your answer. Yes, Genesis child theme uses media queries. But I think most modern templates use them. So a lot of themes should have trouble with InStyle. But we will see …

Sorry, when I was talking about media queries I meant setting media queries in InStyle. When you pick a media query from the list, the preview iframe will scale down to the selected media query size. Similarly, if you click on any of the device preview buttons, the iframe will resize.

If you didn’t set any of those, than it’s probably a small css issue. The only change we made to the default preview frame is a change from fixed layout to flex, which has been done in a way that should not affect other customizer settings. The change has been implemented to make the customizer area resizable.

Anyway, once we can see the code we no more…

I’ll put a test installation online … The page is shown with exactly 50% of the width that it could/should have.

Excellent job ;)

Thank you

Does this work on individual pages or individual posts? I dont want global settings but page by page or post by post.

Yes, you can do that. You have fine grained control via the WordPress generated ID and class attributes to body, post, or comment elements.

For example, in our demo the body element for the blog page looks like this:

<body class=”blog logged-in”>

The body element for a single page post may look like the following:

<body class=”single single-post postid-63 single-format-image logged-in”>

The post-classes give you even more options, e.g.

<article id=”post-63” class=”post-63 post type-post status-publish format-image has-post-thumbnail hentry category-interior-design category-office category-work post_format-post-format-image”>

To target just posts/single posts/pages or even a particular post/page just add the appropriate ID/classes from the “path to root” section to your selector.

Let’s say your current selector is ’.entry-tile a’. Rules for this selector will apply to the whole theme. If you are on a single page, you can select .single from the “path to root” section to target only single pages. Your selector would be ’.single .entry-title a’. You can even go further by adding the post-id to the mix. By adding e.g. ’.post-63’ to the selector ( ’.single .post-63 .entry-title a’ ), you are now targeting the title element of the post with post-id 63 on a single page

Looks interesting! Can I edit the breakpoints for responsive mode? Or even better, can I add my own additional breakpoints? Regards olle

Thanks! But that will be overwritten if plugin updates? If I work with a child theme can I put it there to prevent it from being overwritten?

Yes it would be overwritten. But that is a very good point you are making there. The next update is almost ready, but still needs a bit of work and some testing. Maybe i can squeeze it in. It shouldn’t be too difficult to implement an override of some kind, where user provided breakpoints take precedence, or are merged with default ones. Could be as easy as just another control in the settings section, where the user lists his/her own breakpoints. Let me think about what’s the best/easiest way to do it. Thanks for suggesting it.

Thanks. Let me know when you have it ready And I’ll give it a try. Regards Olle

Hi, is this compatible with Kleo or Bridge theme? Thanks.

Hi hbweb, inStyle works with pretty much any WordPress theme. It simply writes css for your chosen selectors and enqueues it ( or you can download it ). We don’t have Bridge, but I can confirm that it works with Kleo. Kleo uses quite specific selectors. Just make sure your specificity is high enough to override the default styles.

Hi Jepunia,

That’s brilliant – thanks!

Very last Question before you have a sale from me :)

When you say ‘enqueues’ the CSS, do you mean:

—It creates a new CSS file, and overrides existing CSS with ’!important’ ... or —Does it add the enqueued CSS to the functions.php file? ... or —It adds the CSS to the theme’s child CSS stylesheet?

Many thanks,

Hi hbweb, inStyle will never touch any of your existing stylesheets. It’ll read your stylesheets, but never write to it. The css inStyle generates will be stored as an entry in the options table, and added (enqueued) to your theme as a style tag in the head section. If you wish to add it to an existing stylesheet file, you’d have to do it manually by downloading the styles and then copying/pasting it to the stylesheet file ( which will hardly ever be necessary ).

Currently there is no ’!important’ button ( Sorry, we simply forgot. It’s going to be added soon ). Right now, the only way to add ’!important’ to a declaration is by using the build-in css editor.

With regards to Kleo, it’s usually enough to use the same selectors Kleo uses, and simply add/modify declarations. So, if your new settings are not applied, check the selector Kleo uses by checking the ‘Matched Rules’ section, or by opening the browser devtools. Kleo uses quite stringent selectors, and unfortunately, you’ll have to check their selectors quite often.

We’ll try to simplify that process by providing a simple list of existing selectors to choose from in one of the next updates ( sorry, not the next one, it’s almost ready to go).

Is this plugin still maintained? I don´t see any version history here. Hope you keep up the good work!

Yes, it is. Update coming soon.


leen12 Purchased

hi, i purchased today but it does not work with my theme.. can i have a refund please?

also your support link is down


leen12 Purchased

i can ensure you i have already tried selecting the path and stuff.. its an issue not my stupidity lol

just joking i know your not trying to call me stupid =)

edit: colour selector now shows colour changes/slide though does not affect onsite..


leen12 Purchased

still waiting for you to fix your support link… im not posting the details requested publicly

Hi. Does this work with styling Gravity Forms plugin? I tried the demo but its useless. If you could get this to work with the most popular form plugin this would be gold since its notorious for a hard time to style. Thanks