CSS won't display


#1

I loaded a template from w3schools that uses their w3.css framework. The template is copied exactly from their demo at http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_start_page&stacked=h into an html document on my project in c9. When I run the project in c9.io it shows the html, but doesn’t load the css.

When I save the same code in an html file on my desktop from a text editor and open it in Chrome, it displays perfectly. Interestingly, when I change the extension on c9 to .php (instead of .html) the page won’t display at all.

I’d be grateful for any ideas on this!


#2

I had a similar problem loading bootstrap, but it resolved when I took the “http:” and “https:” out of the like to the bootstrap framework. This didn’t work with the w3.css link, though. Hmm.


#3

I think all references must use https


#4

Thanks for the suggestion. I tried this… still no luck. I’m going to keep playing with this.


#5

It would be easier to help if you could share some of the code you think it’s not working.


#6

This is the complete w3.css template from w3schools.com. I really like the framework (lightweight, clean) and would love to use it, but having trouble in c9:

W3.CSS body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif} .w3-navbar,h1,button {font-family: "Montserrat", sans-serif} .fa-anchor,.fa-coffee {font-size:200px}

START PAGE

Template by w3.css

Get Started

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  <p class="w3-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="w3-third w3-center">
  <i class="fa fa-anchor w3-padding-64 w3-text-red"></i>
</div>
<div class="w3-twothird">
  <h1>Lorem Ipsum</h1>
  <h5 class="w3-padding-32">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h5>

  <p class="w3-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Quote of the day: live life

Powered by w3.css


#7

These are the links…

W3.CSS body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif} .w3-navbar,h1,button {font-family: "Montserrat", sans-serif} .fa-anchor,.fa-coffee {font-size:200px}

#8

Hmm… looks like the CMS is scrubbing the code. To see it you’d have to go to http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_start_page&stacked=h


#9

External links cannot be used but must be integrated into the workspace (copy/paste) and then put in the same folder as the html document they are modifying. :slight_smile: