Browser can't access CSS

1
votes

I have created 2 folders:

  • bootstrap (the last version, and I keep it untouched)

  • custom:

  • custom-variables.less(empty)

  • custom-other.less(empty)
  • custom-bootstrap.less( where I put the following:

@import "../bootstrap/less/bootstrap.less"; @import "custom-variables.less"; @import "custom-other.less"; @import "../bootstrap/less/utilities.less";

Then I go to bootswatch, choose theme Flatly and copy the content of variables.less to my custom-variables.less and the content of bootswatch.less to my custom-other.less.

then I do

lessc custom-bootstrap.less > custom-bootstrap.css

How should I modify the of index.html to make the template work?

`<head>
<title>Bootswatch: Flatly</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="./bootstrap.css" media="screen">
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../assets/css/bootswatch.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../bower_components/bootstrap/assets/js/html5shiv.js"></script>
  <script src="../bower_components/bootstrap/assets/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">

 var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23019901-1']);
  _gaq.push(['_setDomainName', "bootswatch.com"]);
    _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script>

`

(I have been trying to insert my "custom-bootstrap.css" in different ways here, but when listening to port 8080, just plain text shows up)

what I tried:

<link rel="stylesheet" href="./less/custom-bootstrap.css" media="screen">

<link rel="stylesheet" href="less/custom-bootstrap.css" media="screen">

<link rel="stylesheet" href="/less/custom-bootstrap.css" media="screen">

<link rel="stylesheet" href="/less/custom-bootstrap.css" media="screen" />

also

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/custom-bootstrap.css">

also tried

in Chrome and Mozilla,

also tried

to access css file directly in the browser - no way.

Console says error 404, also can not find some other JS files.

Please help or vote)

2
csstwitter-bootstrapbrowserlessbootswatch

2 Answers

0
votes

Your CSS reference should look like this:

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
0
votes

You should include your customized bootstrap css file not the original one. And if you only use the variables.less from bootswatch, then you don't need to include that either. So just use:

<link href="assets/css/custom-bootstrap.css" rel="stylesheet">

If it didn't help, please provide my the files to help more.

PS: You asked me to see this question on my article in CodeProject. ;)