I'm using CDNJS to access the uikit library. The CSS I download from their customizer, which allows you to create your own personal theme scheme, isn't functional. Below is how I linked to my CSS files, the path is correct because my portfolioStyle.css file is functional.
<head>
<meta charset="utf-8">
<title>Contact</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/portfolioStyle.css">
<link rel="stylesheet" type="text/css" href="assets/css/uikit.css">
<!-- UIkit -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Caveat|Stoke" rel="stylesheet">
Related
I watched the video tutorial Laravel 9 and Vue 3 SPA online store 11. Transferring the html store template to App vue. In it, the server part is made on Laravel, and the client part on Vue.
I downloaded the layout of the client part of the online store - HTML template of the client part of the online store from Course Laravel 9 and Vue 3 SPA online store 0. Overview of the html store template and task priorities in the description under the video.
Copied the contents of the file C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\index. html to the C:\Openserver\domains\clientpart\public\index.html file of the vue clientpart project (as in the video). Copied the folder (with styles, fonts and pictures) C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\assets instead of C:\Openserver\domains\clientpart\src\assets.
The assets folder in the karte-fashion-multipurpose-ecommerce-html-template directory has the following location relative to the karte-fashion-multipurpose-ecommerce-html-template\index.html file
The structure of the project, as can be seen from the screenshot below, is as follows
Changed all paths starting with assets to ../src/assets (in C:\Openserver\domains\clientpart\public\index.html) and got the following file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title For This Document -->
<title> Karte - Multipurpose E-Commerce Html Template</title>
<!-- Favicon For This Document -->
<link rel="shortcut icon" href="../src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
<!-- Bootstrap 5 Css -->
<link rel="stylesheet" href="../src/assets/css/bootstrap.5.1.1.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400;500;600;700&family=Roboto:wght#300;400;500;700&display=swap" rel="stylesheet">
<!-- FlatIcon Css -->
<link rel="stylesheet" href="../src/assets/fonts/flaticon.css">
<!-- Slick Slider Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/slick.css">
<!-- Ui Tabs Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/jquery-ui.min.css">
<!-- Magnific-popup Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/magnific-popup.css">
<!-- Nice Select Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/nice-select.v1.0.css">
<!-- Animate Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/animate.css">
<!-- Style Css -->
<link rel="stylesheet" href="../src/assets/css/style.css">
</head>
<body class="shoe">
<!-- ==========Preloader========== -->
<div class="loader"><span>Karte...</span></div>
<!-- ==========Preloader========== -->
<!--===scroll bottom to top===-->
<i class="flaticon-up-arrow"></i>
<!--===scroll bottom to top===-->
<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->
<script src="../src/assets/js/jquery.v3.6.0.min.js"></script>
<!-- Popper v2.9.3 Js -->
<script src="../src/assets/js/popper.v2.9.3.min.js"></script>
<!-- Bootstrap v5.1.1 js -->
<script src="../src/assets/js/bootstrap.v5.1.1.min.js"></script>
<!-- jquery ui js -->
<script src="../src/assets/js/plugin/jquery-ui.min.js"></script>
<!-- Parallax js -->
<script src="../src/assets/js/plugin/jarallax.min.js"></script>
<!-- Isotope js -->
<script src="../src/assets/js/plugin/isotope.js"></script>
<!-- Slick Slider Js -->
<script src="../src/assets/js/plugin/slick.min.js"></script>
<!-- magnific-popup v2.3.4 Js -->
<script src="../src/assets/js/plugin/jquery.magnific-popup.min.js"></script>
<!-- Tweenmax v2.3.4 Js -->
<script src="../src/assets/js/plugin/tweenMax.min.js"></script>
<!-- Nice Select Js -->
<script src="../src/assets/js/plugin/nice-select.v1.0.min.js"></script>
<!-- Wow js -->
<script src="../src/assets/js/plugin/wow.v1.3.0.min.js"></script>
<!-- Wow js -->
<script src="../src/assets/js/plugin/jquery.countdown.min.js"></script>
<!-- Main js -->
<script src="../src/assets/js/main.js"></script>
<!--==== Js Scripts End ====-->
<script type="module" src="../src/main.js"></script>
</body>
</html>
The page looks like this
And it should look like
The App.vue file contains the content and all images starting with ../src/assets/images are rendered normally, and the styles included in public/index.html with `../src/assets/ css' didn't work.
Tell me how to achieve the inclusion of css files and thus the correct display of the page.
P.S. In the video tutorial, the index.html file is located at C:\Openserver\domains\clientpart\index.html instead of C:\Openserver\domains\clientpart\public\index.html. I'm not sure if it affected, but I wrote it just in case.
P.S. Here are screenshots of the developer tools (in which you can see the connection of css files in the lower right corner) - as it should be and as it is
P. S. Add errors
Suggest solution for Vue, on Stackoverflow link given solution for Node.js.
I want to make login page using bootstrap and react. I use the following style from official page. I added these all bootstrap and css files in index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="all.css" rel="stylesheet">
<link href="autorization.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="bootstrap.bundle.min.js"></script>
<script src="jquery.min.js"></script>
</html>
But result is another than when I open throug a regular html page. The font is different.
This is how it should be:
And this is what I have:
I don't understand why, because I didn't change css files...
This could be the issue with index.js file. There you remove importing index.css line.
Remove this line in index.js file.
import './index.css';
You maybe load another CSS file after bootstrap rewrites CSS style rules from BS or bootstrap CSS file is not loaded, please check it in the console or in the browser which style from which file is applied like a first
You can dominate with important;
example:
font-family: 'Lilita One'!important;
Hello I'am traing to create language combobox with flags using Bootstrap Form Helper V2.3.0
So I
Download Bootstrap Form Helper V2.3.0 FREE Version
Download Bootsrap 3.0.0 (http://bootstrapdocs.com/v3.0.0/docs/)
Link Jquery jquery-1.10.2
This version of jquery and bootsrap is requerd for Bootstrap Form Helper V2.3.0
Than create simple index.html page and copy example code from documentation http://bootstrapformhelpers.com/language/#jquery-plugins
The result is EMPTY select list and no erros in console
Can some one expain me what I'm doing wrong?
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Form Helpers Basic Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Bootstrap Form Helpers -->
<link href="bootstrapformhelpers/css/bootstrap-formhelpers.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Example 3 -->
<div class="bfh-selectbox bfh-languages" data-language="en_US" data-available="en_US,fr_CA,es_MX" data-flags="true">
</div>
<!-- Example 4 -->
<span class="bfh-languages" data-language="en_US" data-flags="true"></span>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.10.2.js" integrity="sha256-it5nQKHTz+34HijZJQkpNBIHsjpV8b6QzMJs9tmOBSo=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap Form Helpers -->
<script src="bootstrapformhelpers/js/bootstrap-formhelpers.js"></script>
</body>
</html>
I can't load css file in my Laravel project.
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
/public/css/style.css does exist IDE confirms, and my target blade file extends the base file where css is loaded. But still changes in css won't take effect.
Thank you
In your blade file where you are declaring the assets try:
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
You can know more: https://laravel.com/docs/5.4/helpers#method-asset
Hope this helps.
I used JQM's Themeroller to develop a theme for my application. Right now, I'm just trying to get it to work in Chrome.
I have the head of my HTML file set up like so:
<head>
<title>SafeRides</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
and my file director is as follows:
Application/
index.html
themes/
SafeRidesTheme.css
SafeRidesTheme.min.css
images/
Am I just missing something obvious in the layout of my files? If someone could help me realize what's going on here I'd greatly appreciate it.
When using custom theme made by Theme Roller, libraries should be loaded this way.
You should remove jQM defualt style sheet and load jQM structure style sheet before your custom one.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>