This author's response time can be up to 2 business days.
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.
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:
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.
Sorry to hear that. Can you email us a link where we can see the problem ourselves? How does it look like in the customizer with InStyle deactivated? Please make sure no media queries were active. If you set a media query, the preview frame scales down to media query width.
I haven’t heard back from you. Do you still need assistance or is everything working?
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.
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?
Hi olleka, currently you would have to modify the file customizer/settings/media-queries.php. You can delete the existing breakpoints and add your own, or simply extend the list with your own settings. Just keep in mind that in the current version most breakpoints have to be declared with min-with and max-width values, because the order in the css file is not guaranteed.
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
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.
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?
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).
Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.
View license details
Get it now and save up to $10
Unlimited downloads only
$29 p/m on Envato Elements
Download over 18,000 items now
Learn almost anything with
Envato Tuts+ for free
9000 free tutorials, 3000 paid courses
Designers matched perfectly to
you on Envato Studio
2000 artists ready to undertake your work