1

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)

drebot
  • 43
  • 5

2 Answers2

0

Your CSS reference should look like this:

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
j.otero
  • 45
  • 12
  • I copied index.html from [link] (https://github.com/thomaspark/bootswatch/blob/gh-pages/flatly/index.html), so my custom-bootstrap.css needs to be inserted somewhere – drebot Sep 19 '13 at 15:10
  • Change those links that a referenced as example to your custom css. – j.otero Sep 19 '13 at 15:20
  • can you please tell what lines should I replace in this index.html and what exactly should I write? – drebot Sep 19 '13 at 15:39
  • You need to remove the following lines: ` ` and change them to: `` `` `` – j.otero Sep 19 '13 at 15:58
  • 1
    I would also recommend doing the following, put all your CSS/JS/Images in a single folder (assets) so there they are easily referenced instead of having them in separate folders. So when you reference to them they should all look like this: `assets/css/***` or for images `assets/img/***` and your javascripts `assets/js/***` – j.otero Sep 19 '13 at 16:03
  • If this solution worked, please remember to mark it as resolved! (the checkmark) – j.otero Sep 19 '13 at 17:31
  • why should I reference to min.css? I have not installed minified versions, and it seems nothing changes in the original and modified options, as to your proposal. – drebot Sep 19 '13 at 17:38
  • If nothing is changing, it is because the items are not properly referenced in the code and thats why the browser cant render what you are asking for. – j.otero Sep 19 '13 at 17:53
0

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

Rojan Gh.
  • 1,062
  • 1
  • 9
  • 32
  • Rojan, it did not work for me. Please see my repo (https://github.com/dypllo/translatium/). Great, you visited me here:) – drebot Sep 21 '13 at 22:47