Home → Ask a Question →

Unable to preview changes to CSS and JavaScript theme files without publishing?

• Edit

ksmith

18 Jul, 2018 04:38 PM

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!

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

   • Edit

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

   • image284646.png 4.92 KB
   • Edit

3. 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)

   • Screen_Shot_2018-07-18_at_2.43.47_PM.png 372 KB
   • Edit

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

   • image528199.png 4.92 KB
   • Edit

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

   • image165852.png 4.92 KB
   • Edit

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

   • Edit

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

   • Edit

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

   • image867946.png 4.92 KB
   • Edit

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

   • Edit

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

    • image457403.png 4.92 KB
    • image001.png 180 KB
    • Edit

11. Colleen closed this discussion on 11 Apr, 2019 05:46 PM.