How to use bootstrap theme ?

WEB TMS WEB Core
1

Hello,

i would like to use a bootstrap theme from "Creative Tim":

I am not very experienced in web programming. I tried to add the css and js files to my project html file, but not getting it to work. I tested serveral combinations. Currently my file looks like the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
  <title>
    Soft UI Dashboard by Creative Tim
  </title>

    <!--   Core JS Files   -->
  <script src="assets/js/core/popper.min.js"></script>
  <script src="assets/js/core/bootstrap.min.js"></script>

  <!-- Plugin for the charts, full documentation here: https://www.chartjs.org/ -->
  <script src="assets/js/plugins/chartjs.min.js"></script>
  <script src="assets/js/plugins/Chart.extension.js"></script>

  <!-- Control Center for Soft Dashboard: parallax effects, scripts for the example pages etc -->
  <script src="assets/js/soft-ui-dashboard.min.js"></script>

  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
  <script src="$(ProjectName).js" type="text/javascript"></script>

  <style></style>


  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
  <!-- Nucleo Icons -->
  <link href="assets/css/nucleo-icons.css" rel="stylesheet" />
  <link href="assets/css/nucleo-svg.css" rel="stylesheet" />
  <!-- Font Awesome Icons -->

  <link href="assets/css/nucleo-svg.css" rel="stylesheet" />
  <!-- CSS Files -->
  <link id="pagestyle" href="assets/css/soft-ui-dashboard.css" rel="stylesheet" />
</head>

<body class="g-sidenav-show bg-gray-100">

  <script type="text/javascript">rtl.run();</script>


</body>

</html>

What I am doing wrong ?

Thanks in advance.

Holger

2

What exactly is the problem you encounter to begin with?
Did you inspect the browser console for possible errors?

3

Dear Bruno,

I am not getting so far. I already stuck in the IDE/Web Designer. Using this html file as project html file all element classes like "btn btn-primary" are gone. I only have entries starting with "fa-fa"

I suppose that something is wrong in the way I added the theme to the project.

Thanks in advance.

Best regards,

Holger

4

Do you have a step by step description of what you do?
At first sight, this template has a lot of dependencies, so just copying the main HTML won't be sufficient. You'll need to import the assets folder too in your TMS WEB Core project.
I also suspect you use the web form designer. In TMS WEB Core options, you can enable to see the web form designer dev tools (Show dev tools) and inspect there the browser console for possible errors.

5

I created the project with the following steps:

  1. Create a new TMS Web bootstrap project
  2. Add the whole asset dir to the project
  3. Copy following lines to the project html file
    <!--   Core JS Files   -->
  <script src="assets/js/core/popper.min.js"></script>
  <script src="assets/js/core/bootstrap.min.js"></script>

  <!-- Plugin for the charts, full documentation here: https://www.chartjs.org/ -->
  <script src="assets/js/plugins/chartjs.min.js"></script>
  <script src="assets/js/plugins/Chart.extension.js"></script>

  <!-- Control Center for Soft Dashboard: parallax effects, scripts for the example pages etc -->
  <script src="assets/js/soft-ui-dashboard.min.js"></script>

  <script crossorigin="anonymous" src="https://kit.fontawesome.com/42d5adcbca.js"></script>
  <script src="$(ProjectName).js" type="text/javascript"></script>

  <style></style>


  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"/>
  <!-- Nucleo Icons -->
  <link href="assets/css/nucleo-icons.css" rel="stylesheet"/>
  <link href="assets/css/nucleo-svg.css" rel="stylesheet"/>
  <!-- Font Awesome Icons -->

  <link href="assets/css/nucleo-svg.css" rel="stylesheet"/>
  <!-- CSS Files -->
  <link href="assets/css/soft-ui-dashboard.css" id="pagestyle" rel="stylesheet"/>
<link href="assets/css/soft-ui-dashboard.min.css" rel="stylesheet"/></head>
  1. Add a TWebButton to the main form.
  2. Go to object designer and try to change the ElementClass property. The Combobox shows only fa.... values not the one which are included in the theme

The debug console shows some errors which I do not understand:

           
            
            GET file:///C:/Development/VCLs/D1x/TMS/Products/tms.webcore/WebDesigner/webformdesigner/assets/css/nucleo-icons.css net::ERR_FILE_NOT_FOUND

            
            
            GET file:///C:/Development/VCLs/D1x/TMS/Products/tms.webcore/WebDesigner/webformdesigner/assets/css/nucleo-svg.css net::ERR_FILE_NOT_FOUND

            
            
            GET file:///C:/Development/VCLs/D1x/TMS/Products/tms.webcore/WebDesigner/webformdesigner/assets/css/soft-ui-dashboard.css net::ERR_FILE_NOT_FOUND

            
            
            GET file:///C:/Development/VCLs/D1x/TMS/Products/tms.webcore/WebDesigner/webformdesigner/assets/css/soft-ui-dashboard.min.css net::ERR_FILE_NOT_FOUND

I have added the whole project for your review.

Thanks in advance
Project10.zip (508.1 KB)