Unable to preview changes to CSS and JavaScript theme files without publishing?
Hi there,
We're making several changes to our website and I'm having a hard time previewing changes to the JavaScript files or CSS files within Tweak. Can Tweak show me these changes or do I have to publish the site in order to see them? (Changes to the HTML are previewing like usual. It just seems like updates to the CSS file and a new JS file are not appearing.)
Thank you!
Comments are currently closed for this discussion. You can start a new one.
Keyboard shortcuts
Generic
? | Show this help |
---|---|
ESC | Blurs the current field |
Comment Form
r | Focus the comment reply box |
---|---|
^ + ↩ | Submit the comment |
You can use Command ⌘
instead of Control ^
on Mac
Support Staff 1 Posted by Colleen on 18 Jul, 2018 07:41 PM
Some javascript does not play well within the CMS previewer. The styles should be loading, though. If you can give me some more details on what is not working, I can see if I can figure out what the problem is.
2 Posted by ksmith on 18 Jul, 2018 08:23 PM
Thanks, Colleen.
Iâm specifically trying to see changes to the slider on our homepage: https://richter7.tweakcms.com/preview_frameset.php?pid=1 (We added a JS file called siema.min.js in addition to updating the HTML, global CSS, and mobile CSS files.) As you can tell, the preview isnât working.
A different spot where Iâm noticing what I think is a CSS-only error is on our degrees page: https://richter7.tweakcms.com/preview_frameset.php?pfn=degrees/index At the bottom there is a blue graphic of a laptop. I updated this graphic to one with the gray banner across it, but the page isnât reflecting this change. This image is called by the CSS using id degreeASSD. In the global CSS theme file, you can see the image degrees-laptop.png being referenced. When I look at that image file in the assets folder, itâs the correct image. But I donât see the updated image on the degrees page itself.
Iâm seeing this issue on a new page: https://richter7.tweakcms.com/preview_frameset.php?pid=291 too. But I think if we can solve the CSS error at least it will fix this preview problem across the site.
We are announcing a new program on Monday, and I would like to feel more confident in the changes we are making prior to going live if possible.
Thank you for your help!
Krista Smith
Marketing Manager
Neumont College of Computer Science
143 S Main St
Salt Lake City, UT 84111
[email blocked]
W: 801-302-2816
F: 801-302-2811
www.neumont.edu
Confidentiality Notice: This email is confidential and intended for the recipient only. Do not forward this email without permission. Use for unintended purposes is prohibited. Thanks for your compliance.
Support Staff 3 Posted by Colleen on 18 Jul, 2018 08:47 PM
I figured it was the home page carousel that was having problems in preview. I will look into this and see if I can figure out why preview is preventing siema from working.
The other problem with the laptop image might just be a caching issue in your browser. I see a grey banner across it when I view those two pages. (see attached)
4 Posted by ksmith on 18 Jul, 2018 08:54 PM
Hey Colleen, The gray banner is the issue. It should NOT be there in the updated images. I donât think this is a cacheing issue since the outdated image is showing across browsers, laptops, and networks. I have logged into Tweak in both Chrome and Edge. I have emptied the cache and reloaded the page. I have logged into and out of Tweak. And my coworkers are seeing the same outdated images when they login Tweak as well. It seems like the assets and/or the CSS them files are not being called correctly within the preview to me. There are other instances of this happening across the site. For example, the banner image on this page: https://richter7.tweakcms.com/preview_frameset.php?pfn=online isnât loading properly.
Krista Smith
Marketing Manager
Neumont College of Computer Science
143 S Main St
Salt Lake City, UT 84111
[email blocked]
W: 801-302-2816
F: 801-302-2811
www.neumont.edu
Confidentiality Notice: This email is confidential and intended for the recipient only. Do not forward this email without permission. Use for unintended purposes is prohibited. Thanks for your compliance.
5 Posted by ksmith on 18 Jul, 2018 09:19 PM
Also Iâm realizing I poorly explained the issue the first time around, so my apologies for the misunderstanding. Iâm sorry I didnât take the time to write a more clear explanation of whatâs happening regarding the CSS updates not showing in the preview. I really do appreciate your help and patience! It means a lot that youâre always so quick to get back to us on these kinds of problems.
Krista Smith
Marketing Manager
Neumont College of Computer Science
143 S Main St
Salt Lake City, UT 84111
[email blocked]
W: 801-302-2816
F: 801-302-2811
www.neumont.edu
Confidentiality Notice: This email is confidential and intended for the recipient only. Do not forward this email without permission. Use for unintended purposes is prohibited. Thanks for your compliance.
From: Krista Smith
Sent: Wednesday, July 18, 2018 2:54 PM
To: '[email blocked]' <[email blocked]>
Subject: RE: Unable to preview changes to CSS and JavaScript theme files without publishing? [Ask a Question #44033]
Hey Colleen, The gray banner is the issue. It should NOT be there in the updated images. I donât think this is a cacheing issue since the outdated image is showing across browsers, laptops, and networks. I have logged into Tweak in both Chrome and Edge. I have emptied the cache and reloaded the page. I have logged into and out of Tweak. And my coworkers are seeing the same outdated images when they login Tweak as well. It seems like the assets and/or the CSS them files are not being called correctly within the preview to me. There are other instances of this happening across the site. For example, the banner image on this page: https://richter7.tweakcms.com/preview_frameset.php?pfn=online isnât loading properly.
Support Staff 6 Posted by Colleen on 18 Jul, 2018 09:35 PM
The CMS is not blocking the siema javascript. I looked up siema instructions. You are including the siema.min.js file, but you were not instantiating it. I added this to the page properties in the 'Insert in <body>' field:
<script>
new Siema();
</script>
After that, it wasn't showing anything, so I inspected your styles and they didn't match what was in the most recent version global.css. So I looked at how you were including the css files in the page, and you had https://www.neumont.edu/ appended to the front. This causes it to pull in the version that was published to your live site instead of the latest local version in the CMS. I removed it from the global.css line in your home_tweak.html file and from the background images in the content field and it seems to be working now. You may want to remove https://www.neumont.edu/ from all of the script and css lines in the template file if you want to preview changes to those before publishing. You also shouldn't need to add it before any of the image urls either.
Support Staff 7 Posted by Colleen on 18 Jul, 2018 09:36 PM
The image problem you are having may be the same as above. You just need to remove the https://www.neumont.edu/ before it, wherever you have it declared.
8 Posted by ksmith on 18 Jul, 2018 09:43 PM
Thanks, Colleen. I’ll give this a try and see how it goes.
Krista Smith
Marketing Manager
Neumont College of Computer Science
143 S Main St
Salt Lake City, UT 84111
[email blocked]
W: 801-302-2816
F: 801-302-2811
www.neumont.edu
Confidentiality Notice: This email is confidential and intended for the recipient only. Do not forward this email without permission. Use for unintended purposes is prohibited. Thanks for your compliance.
Support Staff 9 Posted by Colleen on 19 Jul, 2018 09:47 PM
Krista,
Did that work ok for you? Do you see anywhere else that is having problems in the preview?
Colleen
10 Posted by ksmith on 19 Jul, 2018 10:02 PM
Hi Colleen, Thank you for following up!
It is working much better now! Iâm still having problems with the JavaScript (I think weâll just have to see what happens when we go live however) and the laptop graphic image. But I havenât had time yet today to dig into it really. I suspect itâs likely just a typo on the CSS file or something, but I havenât quite sorted that one yet. But, a lot of the CSS is working now, which is a huge relief! Iâve updated most of the files to remove the https: call, but havenât quite made it through everything.
[cid:[email blocked]]
Krista Smith
Marketing Manager
Neumont College of Computer Science
143 S Main St
Salt Lake City, UT 84111
[email blocked]
W: 801-302-2816
F: 801-302-2811
www.neumont.edu
Confidentiality Notice: This email is confidential and intended for the recipient only. Do not forward this email without permission. Use for unintended purposes is prohibited. Thanks for your compliance.
Colleen closed this discussion on 11 Apr, 2019 05:46 PM.