Discussion on InStyle - WordPress Visual CSS Editor


jepunia supports this item


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

6 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