Why Isn't the HTML/CSS Editor Live Preview Working

I've been developing a website for a client who insisted that their website be made in Weebly. I'm fluent in HTML, CSS, JS. The code editor was working fine for weeks until a few days ago, I stumbled upon a problem.

The live preview is not displaying any code changes that I made in the HTML editor. Usually when I would make a change to the code, the live preview on the bottom of the HTML/CSS editor would refresh and display the updated changes. Now, whenever I make a change the code, the live preview does indeed refresh but nothing changes. It's same version that was present when I opened up the HTML/CSS editor, regardless of which changes I made.

But when I save my changes and CLOSE the HTML/CSS editor, the website preview inside the WYSIWYG Weebly drag and drop editor is updated to reflect my code changes.

So essentially, the live preview is not "live" with the website version is I've tried reverting to a default Weebly theme. No result. I can try giving the body a 600px margin top and with a blue background and the live preview won't reflect it, but if I close out of the HTML/CSS editor, my changes will be visible on the Weebly preview screen.

Aside from trying it out with a default theme, I also completely switched systems. I was using the latest version of Google Chrome on Windows, and now I'm using the latest version on Mac OS. Same result.

Any reason this could be popping up? Also--on a side note, I saw in the developer docs that its possible to use an external editor for custom Weebly theme development? I would certainly prefer to do so but given the fact that Weebly themes use Mustache templates populated with user content (that isn't visible on the code), how would I edit this in an external IDE? I understand the Weebly theme exporting process but I fail to grasp how I could create a custom theme in an external IDE without access to Weebly's mustache template content.

3,047 Views
Message 1 of 8
Report
7 REPLIES 7
Square

Hi and thanks for posting. This is a question best suited for @Adam and I'll make sure to forward it to him when he's back in tomorrow. Smiley Happy
3,043 Views
Message 9 of 8
Report

Excellent, thank you!
3,039 Views
Message 9 of 8
Report

just wondering... have u got AUTO PREVIEW checked?
3,033 Views
Message 9 of 8
Report
Square

Are your changes still saving, @greenearthdes?

3,032 Views
Message 9 of 8
Report

Yeah, the changes are still saving if I save my work. Any change I do to the CSS gets carried over to the Weebly in-editor preview, as well as the full published website. The issue is mainly with the live preview window in the code editor--it won't display any changes I made to the CSS.

As an example, it pretty much goes like this: I open the CSS editor, and give the white navigation bar a blue background color. Upon implementing the style change, the "live preview" window on the bottom refreshes, as it should, but the navigation bar is still white. But then when I save my work and exit the code editor, the website preview in Weebly's drag and drop builder has the blue navigation bar that I gave. My CSS changes are also visible in the published version. However, when I go back into the HTML/CSS editor, the navigation bar now has the blue background, but any other CSS changes I do in this instance won't be displayed until I save my work, exit the code editor and re-open the code editor. 

It seems like the live preview window in the code editor isn't "syncronized" with the CSS code. 


Its also worth mentioning that this only affects external CSS or LESS stylesheets in the theme. If I for example open up an HTML page and give it inline CSS styles, the live preview window will refresh and display these new styles as it should. Similarly, if I delete a DIV block in the HTML file, it will update with that as well. 

But for some reason, whenever I modify CSS styles of the theme in the code editor (such as in _main.less), the live preview window does not display these new CSS styles until I exit the code editor and re-enter it. Yet, these changes are saving because I can see them in the drag and drop live preview as well as the published site. 

3,030 Views
Message 9 of 8
Report

Any update on this???
3,016 Views
Message 9 of 8
Report
Square

Does your custom theme include any third party scripts as part of page templates or content?

3,011 Views
Message 9 of 8
Report