Mobile app version of vmapp.org
Login or Join
Vandalay111

: Images and styles won't load when HTML is opened through the file system rather than through localhost webserver I'm trying to translate a tutorial of a software. The tutorial is all in HTML,

@Vandalay111

Posted in: #Css #Html #WebDevelopment

I'm trying to translate a tutorial of a software. The tutorial is all in HTML, with CSS and some javascript. I'm noob in web development, so I'm a little lost.

The problem is: I found the source-code but when I open the html documents with a browser I can see only the raw pages, without the styles. Different from when I open the tutorial directly from the software.

The URL shown in the address bar is also different.
When I open the index.html document in the browser I see this path:

file:///C:/Program%20Files%20%28x86%29/LEGO%20Software/LEGO%20MINDSTORMS%20EV3%20Home%20Edition/Resources/EditorHelp/Retail/en-US/index.html

and the page shown is this



And when I open the tutorial directly from the software the path is:
localhost:58401/localizedMapping_B90BDB05-F70E-4B0B-8CEA-031DCF197215/en-US/editor/
and the page shown is this



Does Anyone know how can I edit the html documents to see their content directly from the browser with the styles like the second image?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Vandalay111

2 Comments

Sorted by latest first Latest Oldest Best

 

@Gretchen104

in the <head> section of your code search for a line including a file ending .css - there may be several. Copy these files to the same folder as the code.
These files are the stylesheets that set the webpage's colors, fonts, etc.

You should also check for any other files linked to in the <head> section - especially javascript (.js) files since you will need them too.

CSS files can be edited in whatever source code editor you use for HTML.

10% popularity Vote Up Vote Down


 

@Si4351233

Almost certainly, lego mindstorms is caching the files to improve performance. If you quit the software, make your edits, and then restart the software are your edits reflected?

In addition, you will find your browser's developer tools very useful. Just right click and then select "Inspect Element". Then select whatever tab has "console" in it's name. You should see multiple errors. Can you post them here?

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme