Discussion on CSS Live Editor WordPress Plugin

GambitTech

GambitTech supports this item

Supported

This author's response time can be up to 1 business day.

17 comments found.

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 :)

Hey GambitTech!

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 :D

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! :)

Thank you! :)

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 “}” why? (even if the syntax is correct then)

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.

sounds good! 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

Hi Mylander,

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.

hi,

do you plan to include a selector … like it is in firebug ?

thanks aleccs

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.

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! :D

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

Replied. :)

sorry can you reply to this one as I didnt click “Email me when this comment receives a reply”

Hello there,

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.

Hello, 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.

quotes: ”\201C””\201D””\2018””\2019”;

becomes

quotes: ”\\201C””\\201D””\\2018””\\2019”;

same with content: ”\code”

“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.

Hello, 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?

by
by
by
by
by
by