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>
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.
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.
<!-- 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>
Add a TWebButton to the main form.
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
It seems there is something wrong with these assets.
I replaced the references to CDNs and the errors go away
<!--- <script src="assets/js/core/popper.min.js" type="text/javascript"></script>-->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<!-- <script src="assets/js/core/bootstrap.min.js" type="text/javascript"></script>-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Plugin for the charts, full documentation here: https://www.chartjs.org/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
I couldn't find a CDN to soft-ui-dashboard.min.js and I see this file isn't referenced in the CreativeTim preview neither, so I wonder where it is coming from.
So, please review where you get these JS files and if these are really correct & proper JS files
thank you very much for your help. This takes me a step further.
The files has been download via the official creative tim website. I took the lines to include from the "Quick start" section of the official documentation for this theme.
It is strange indeed as I worked myself also with Creative Tim templates and that had not occurred to me. I suspect it was created with webpack and something is a bit out of sync.