0

I downloaded a webpage template pack from w3layouts.com. Its a collection of index.html pages (web and mobile versions), css and js files and a .php file that loads the appropriate version of the page depending on device.

The file can be found here: http://w3layouts.com/vetae-single-page-multipurpose-flat-bootstrap-responsive-web-template/

a demo of what the page should look like is here: http://w3layouts.com/preview/?l=/vetae-single-page-multipurpose-flat-bootstrap-responsive-web-template/

I opened up the site in my wysiwyg editor, Kompozer. When I click "browse" to preview the site in the web browser, only the html loads. No css styling is being applied to the html in the browser preview, and there doesn't seem to be any js either.

the site folder is in my Downloads folder on my mac, and the href links are formatted like "web/css/bootstrap.css", etc. They're placed in the header section.

Any idea why this is happening? Any troubleshooting ideas? Any help is REALLY appreciated! Thanks!

Please let me know if more info is needed.

Jillian
  • 11
  • 1
  • 6
  • Could you look into your console and tell the error message that you get? – VSri58 Nov 30 '14 at 01:58
  • I'm not sure what you mean by console. When I right-click on the page in the browser preview in firefox and select "Inspect Element", it does tell me "style sheet could not be loaded. file:///Users/MyName/Downloads/Vitae-pack/web/web/css/bootstrap.css" – Jillian Nov 30 '14 at 02:03
  • Vitae is the name of the particular template I downloaded – Jillian Nov 30 '14 at 02:04
  • Can you check whether the css file is available in that location? – VSri58 Nov 30 '14 at 02:05
  • Hmm, well like I mentioned above the href link for the style sheets in the index.html document says: – Jillian Nov 30 '14 at 02:08
  • However, the path that is mentioned in the firefox inspect element troubleshooter seems to include an extra "web" folder... – Jillian Nov 30 '14 at 02:09
  • in other words, 'inspect element' says the path is Users>MyName>Downloads>Vitae-pack>web>web>css>bootstrap.css (note it says "web" twice as though there are two web folders, one nested inside the other) but the path is actually Users/MyName/Downloads/Vitae-pack/web/css/bootstrap.css – Jillian Nov 30 '14 at 02:12
  • The error message you get is because the browser could not locate the css or js file in the location mentioned in the head of your webpage. To solve this you have to include the files in the path mentioned in the message. In your case "file:///Users/MyName/Downloads/Vitae-pack/web/web/css/" – VSri58 Nov 30 '14 at 02:14
  • I tried pasting in that path in the href section of the link, still no luck. The odd thing is that there is NOT a folder called "web" nested in the folder called "web", as the file path displayed in Inspect Element suggests. There is only one "web" folder. – Jillian Nov 30 '14 at 02:17

1 Answers1

0

Any troubleshooting ideas? Try removing the "web/" from the following urls in the web/index.html file: <link href="web/css/bootstrap.css" rel='stylesheet' type='text/css' /> <link href="web/css/style.css" rel='stylesheet' type='text/css' /> and any other urls on that page with "web/".

Edit: I just put this template on a server to take a closer look; there are 26 paths (all throughout the file) that need changing in web/index.html above; I tested and it worked fine for me, when opening just the web/index.html; however, it should only be changed temporarily while you are working on the index.html file in your editor. The paths to your .js and .css file in the web/index.html are actually supposed to have "web/" there because the web/index.html file is being included in your home page, index.php. The index.php appears not to load the index file when the website is within another folder. For a good explanation,see: Are PHP include paths relative to the file or the calling code?

To fix: when you are finished editing your html file, put the "web/" prefix back into index.html, then comment out the following lines in your config.php file (in the app folder). You will then be able to view it from the index.php file while you are working on this template locally or if you upload it to a server and you are working in, for example, the Vetae-pack folder. config.php should look like this (I added the // at the beginning of the first three lines of code):

<?php
/*
 * A Design by W3layouts
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
 *
 */
//$current_page_uri = $_SERVER['REQUEST_URI'];
//$part_url = explode("/", $current_page_uri);
//$page_name = end($part_url);
  $email_id = "w3layouts@gmail.com";
?>
Community
  • 1
  • 1
dinap
  • 33
  • 6