This author's response time can be up to 1 business day.
Looks great. Where I can test it?
Hi! You can check out the live preview from the item details. (or this link: http://demos.gambit.ph/csseditor/?preview ). The launch demo button on the top has just been enabled
Is it possible for you to allow the edit window to be moved outside of the browser window? I have three monitors and it would really be great if I could drag it anywhere I want.
It’s not possible, since the editor is inside the site window. However, this is a REALLY good idea! We have done some research, although we haven’t done any tests yet, I believe we can do that! Check back in a few days nopez
You are always making something cutting edge, unique and useful. You make me feel like there are no limits to web dev champ!
I do have a few suggestion I would like to inquire about, but I will write them down and get back to you! – Thanks. #RainSales
Thanks Noah! Sure thing, we’re excited to hear what you have in mind
One possible problem I see with this though if people are using themes and child themes where are these changes being made?
If I am using a child theme do changes get made and saved to that and not the original?
Do you have a way to save and go back steps if some code is added and has conflicts with the theme?
( TLDR edition: CSS are stored in the database. Styles typed are not saved unless you click on save. You can revert to the previous saved state with the reset button )
The CSS is stored in the database as an option. So the themes & child themes are really not touched. The styles will be applied to whatever you’re using in the frontend of your site.
However, when we use this, what we do is that we use CSS Live Editor from start until we get the styles polished. When we’re happy with everything, we can either leave the CSS in the editor as-is, or we copy over the changes to the child theme’s SCSS (then we compile it) to make them permanent.
I think you bring up a good point though, since people can easily switch themes.. and the styles that you input would most likely be for specific themes only.. then maybe it would be better to tie up styles with themes so that the styles would also switch when the themes are switched.
As for conflicts, the styles that you type in will be applied to the site but will not be saved unless you click the save button. There’s a reset button available that you can use to bring the styles back to the previously saved state. This is very helpful for testing different styles then reverting back when not satisfied with the results.
Nice work, GLWS!
Prepurchase question here …. The plugin looks interesting. Just wondering what version of SCSS you support? I have been learning SCSS, but have not found anything that supports SASS v3.3 that I can use for WordPress. This plugin would certainly fill that role for me
We’re using sass.js & scssphp for compiling scss to css. And we’re only supporting 3.2.12 since scssphp only supports that version.
A lot of people here https://github.com/leafo/scssphp/issues/139 are asking for an update, but unless scssphp finally supports highest versions, I’m afraid we’ll only be doing 3.2.12.
cool tool works fine!
- where is the css scripts stored at when using cssliveeditor?
very often i cannot add an “}”
(even if the syntax is correct then)
(german keyboard QWERZ)
Scripts are stored in Options or Meta depending on which script you tried to work on. CSS Scripts for Specific post goes for Meta. While the rest goes for Options.
And with regard on the bracket problems, what particular browser you are using? We’ll be checking on it just in case.
meta: it injects it to the specific page meta?
Yes. Although, you don’t really have to take the stored data since CSS Live Editor itself stores scripts itself.
And as we checked on Chrome, it is working fine with the brackets.
We are trying to figure out how can we recreate the problem.
but i want to control the css data totaly.
so i need some info where and how its stored. this should be part of the documentation…. or should i start searching?
i need to control all css entries / changes to transfer themes etc.
maybe i want to include the changes to my child css or is this not recommended?
i will do a screen-recording of the bracket error!
can u pm me an email address for this? thanks
The reason why it’s not part of the documentation is because the CSS or SCSS inputted is automatically included during page load, so there would be no need to tell everyone how that information is stored. A lot of people wouldn’t have any use for that info.
But since you asked, here’s how it’s done All the CSS / SCSS you input are stored in two options in WP’s option table: The raw CSS typed in is stored as a JSON string in css-live-editor-raw and the compiled CSS, the one actually outputted in the frontend is inside a serialized associative array in css-live-editor-compiled. Both the raw & compiled versions are updated whenever the CSS is saved in the editor.
The css-live-editor-compiled is an associative array, with the keys either being a post ID, a post_type or site. The values inside those are the compiled CSS which are ready for printing in a style tag (although we clean it further, removing spaces to make it shorter)
I think what you are looking for is an export feature. Where you can just click on export and all the compiled (or raw) CSS would be compiled and can be just pasted into your theme’s css. Am I right?
For the bracket error, Alyssa is trying to switch her keyboard into a German keyboard to hopefully replicate the error on our end. We don’t yet know if we would see the error on our end though.
do you plan to include a selector … like it is in firebug ?
We have plans to add this brilliant idea. We’ll see what we can do.
LOVE the plugin. One suggestion; add the ability to have different style sheets for mobile and media queries. It will make the code much tidier.
Hello! Thank you for your awesome suggestion. We’ll see and try what we can do about this.
While you’re at it, autocomplete would be amazing as well.
Thanks! Noting this down too.
This is the only plugin that I’m using with every project. It makes the workflow infinity more manageable. It deserves way more sales. If you get some big theme to integrate it as part of their package and people get to use it, they’ll buy it for other projects. Goo luck
ah also an export option would be neat, just so I can reuse on the same theme and backup.
That’s alot of cool suggestions!
Thank you for your appreciation and support for our plugin’s improvement.
hi guys, I am creating a buddypress site at the moment. The issue I have is that with the extensive extended profile we have, we need to write custom css with no knowledge. Your plugin looks great but two issues that I see for pure graphic designers. 1) you have to be able to write css fluently and be aware of all your options, 2) your video looks like when you hover over an element like a heading that you can see the css for the heading as an example, in actual fact you can’t.
For $16 is looks great, but some helpful tools in your tool for css creation and writing would be great, also a detect function where you click on a page to evidence the existing css in order to make new changes would be great. If you dont read code and you dont know what is there already you can’t change it will your tool. But for css coders this is a great start with a visual aid. Writing to the DB is also great
sorry can you reply to this one as I didnt click “Email me when this comment receives a reply”
Thank you for your concerns. And to give them an answer:
1. First and foremost, CSS Live Editor is meant for someone who at least familiar with CSS itself. This plugin is more likely saves you from the need of:
- Instead of refreshing your page everytime you do modifications in your page, CSS Live Editor shows the changes in realtime.
- You no longer need to switch between from backend to frontend view, you’ll just need to modify your page via frontend.
- Or if you wish to just modify a whole page or specific page in one go.
The plugin isn’t really a ‘graphics interface CSS generator’. We are also thinking of this concept, but there is currently no possible way of doing this at the moment. As much as we want the live editor to be accessible even to purely graphic designers, as it is right now, knowledge of CSS is to be expected of its users.
2. This is a default feature on each browser. If you right click on your page, you can click on ‘Inspect Element’. This will direct you on the exact view as what you’ve seen in the video. This may also come in handy in case you want to pinpoint something you want to edit. This may come in handy to use along with CSS Live Editor.
Hi there – looks like a great plugin – been looking for something like this for a while. Have you implemented the EXPORT feature yet?
What I would love is to have this live feature where I can work on the frontend, but then copy / export all the changed css to a file or to a custom css section in my admin area.
Is this possible?
Thanks for any reply
This feature is not implemented yet. But you can copy and paste the codes from the Live Editor itself.
hi I purchased the plugin as the demo had the ability to open in an external window. It looks like that was version 1.1, but the download here is only 1.0 – one of the main reasons I purchased was the ability to edit in a new window, as I am working with mobile widths. Can you publish the new version? Thanks
The current version of CSS Live Editor at the Demo Site is an experimental version. Meaning, there are still some problems. Thus, we cannot release it officially. But if you still want it, we can also send you a copy when you file a ticket in our Support Site.
But please beware that this version is an experimental one. There are still a current issues on the version that we need to address such as launching 2 windows of the Live Editor will cause hanging in the browser.
On the otherhand, we’ll also need to downgrade the demo since this is not an official release.
How can I fix the following annoying bug? – http://i.imgur.com/XxbQYTy.png It’s a missposition of the typing vertical line, it’s position and line of code.
Hello there! My apologies for the late reply. First off, normally this shouldn’t happen in a standard environment. But due to certain conditions like using certain themes might cause this. By then, what you might need to try is to check if this also occurs when you use a different theme and if this just occur in a particular browser. Once confirmed, you can send us a report (via Support System) then we can help you further.
Do you have any plans to add built-in mobile styling to this plugin? I really want to be able to control mobile styles separately from other styles, etc.
This isn’t in the plans yet. But I’ll note on this idea and will suggest this to our developers.
How do I export all the CSS from a dev server to a live server?
Currently, there is no import/export function available with CSS Live Editor.
There’s bug that makes it impossible to add quotes or fontawesome icons etc.
same with content: ”\code”
Thanks for using CSS Live Editor.
Upon checking the code, the added slashes do not appear on our end. This is usually the behavior of old versions of PHP which enables Magic Quotes, as a security layer those times. Such behaviors are now removed in newer PHP versions due to better security management, and unexpected behaviors.
To confirm this, we need the full code snippet that you were trying to add where additional slashes were appearing. We’ll need information about your PHP version, and if magic quotes are enabled. Most likely, we’ll need backend access to confirm it.
However, should it be confirmed that magic quotes are indeed enabled, we strongly recommend they be disabled by your webhost.
“I can confirm that we have magic_quotes_gpc, magic_quotes_runtime and magic_quotes_sybase set to off on our servers.”
Hello kevingeary, Apologies for the late reply. But we advice you to file a ticket to our Support so we can assist you better at this point. Also, please be prepared for the possibilities that we might need to log in to your site so we can replicate this problem. Again, my apologies. And hope we can sort this out in the support system. See you there!
My support expired, but I see this as not a “I need help” issue as much as it’s a bug issue. I don’t want to pay for an extended support license to fix what amounts to a bug.
Any ideas if I can open the live-editor from the front-end via short-cut? Since my WP Admin Topbar disappeared when HTTPS was installed, I can’t use it anymore :/
Hello ApesPark! I’m sorry, but the Admin Bar is required in order to open the CSS Live Editor. Though, have you tried checking your profile for the Toolbar settings?
I have a question: Im trying to find out how to get SCSS to run on my WP site, so i found this Pen: https://codepen.io/ltrademark/pen/xpgprZ
So purchasing this plugin, then copy pasting the SCSS will allow the SCSS to process?
lol, hoping you can help.
Hi Matt, as long as the SCSS is in the Live Editor, it will work with either in the page or the entire site (depending on where you set it). Our Live Preview also comes with a Launch Demo if you want to give it a try.
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 $6.50
Deliver better projects faster. Web, design & video assets
Unlimited downloads, from $16.50/month
Create Beautiful Logos, Designs & Mockups in Seconds
Design like a professional without Photoshop
Designers matched perfectly to
you on Envato Studio
2000 artists ready to undertake your work