I am building a site based off of Bootstrap Carousel theme... unfortunately nothing is working when I copy the index and css file into my directory. Are there other files aside from the CSS that need to be in the same directory? like the glyphicons and all the buttons. It's literally just displaying the html... no carousel or anything.
nothing needs to be in same directory! just check you have the right path to the files! and all are loaded. As well as include the bootstrap links
Something like this :
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
Related
I managed to use vue2 components inside html files when I was using webpack with html loader. Component was simply placed into html template and everything worked out of the box.
Eg. index.html
<section class="bg-shadow">
<cover-hero-carousel
:backgrounds="{{ hero_backgrounds | json_encode }}"
:delay="2000"
:duration="3000"
>
</cover-hero-carousel>
</section>
I have tried to do the same with Vue3 with Vite, but no success. Is for Vite needed anything special or is simply not possible anymore, to place vue component anywhere into html and would work.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Title</title>
</head>
<body>
<div id="app">
<cover-hero-carousel
:backgrounds="{{ hero_backgrounds | json_encode }}"
:delay="2000"
:duration="3000"
>
</cover-hero-carousel>
</div>
<script type="module" src="src/assets/js/main.js"></script>
</body>
</html>
Placing Vue components "anywhere into html" and them magically working has never been possible.
What gives you this impression is a combination of two factors:
Vue templates look very similar to HTML
when a Vue app is mounted into an existing HTML element, its contents are used as template for that app.
Technically, there's an alternative to the above: it's also possible to register Vue components as Custom Elements. That use-case might also give you the false impression that Vue components work anywhere. But you'd still need to load Vue upfront, load and declare the web components before any browser could make sense of them.
Overall, using vue components as web components is more technically challenging than using them in a Vue app's template.
Getting back to your example, for it to work, src/assets/js/main.js would need to load Vue and contain code to mount a Vue app into #app. Also, that Vue app would need to have a <cover-hero-carousel /> registered component.
All of the above is still possible in Vue 3, just like in Vue 2. It's the code in main.js that needs some minor tweaking.
I'm in a vue-cli created project.
I have an icon reference in my public/index.html file which is intended for android phones.
<link rel="icon" sizes="192x192" href="/img/icons/touch-icon-192x192.png">
But after the application builds, the output is:
<!--[if IE]><link rel="icon" sizes="192x192" href="/img/icons/touch-icon-192x192.png"><![endif]-->
How do I prevent vue-cli, or the vue-pwa-plugin from adding any "if IE" tags to my output?
I want to customize the input field textbox height more minimal and its font style. I used matblazor component to my project. Can someone know how I can solve this problem from root CSS or something like that?
Just include an additional CSS file in the _Host.cshtml like
...
<head>
...
<link rel="stylesheet" href="my-custom-matblazor-styles.css" />
</head>
or in your .razor file like this
<link rel="stylesheet" href="my-custom-matblazor-styles.css" />
to override the CSS rules of MatBlazor.
I would favor the latter as you need the CSS file only when you are actually using a MatBlazor component on a page.
Do not mangle with the original CSS files as it will result in a complete chaos when a new version of MatBlazor is released.
In VS 2012 my project is running fine. But when I hosted it local IIS it does not find the css and js file.
In my project files are linked like
<link href="~/CSS/layout.css" rel="stylesheet" type="text/css" />
<link href="~/CSS/color.css" rel="stylesheet" type="text/css" />
and after hosting I get like
<link href="/ApplicationTemplate/CSS/color.css " rel="stylesheet" type="text/css" />
<link href="/ApplicationTemplate/CSS/bootstrap.css " rel="stylesheet" type="text/css"/>
I also tried to solve the problem to put css in #Url.Content() and scripts in #Scripts.Render(). But it did not work for me. Then somebody told me to change the published web config . But also did not work.
you should be using Url.Content() helper to avoid this type of issues. It generates url using the relative path and there will be no chance of issue like these.
<link href="#Url.Content("~/CSS/layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/CSS/color.css")" rel="stylesheet" type="text/css" />
Also make sure that CSS and Scripts folder is in root directory of project.
NOTE: Sometimes this also happens that in publish some css and js files are not published in the published folder so copy the css,scripts and js folder from your solution to published folder to make sure it.
I have an Octopress blog with an installed Octostrap3 theme. Everything works fine so far.
But I've been looking for the last days and I'm not able to find the responsible css files in Octostrap3 to change the colors for my Octopress blog.
Could anybody tell me which css (or scss) files I need to edit?
Ok, i've found a solution that works for me.
tomordonez' hint didn't help in my case (but thank you anyway), because there was just an screen.css in /source/stylesheets, no style.css.
If you have octostrap3 installed, you can use any bootstrap theme. To change the theme, you just have to edit the /source/_includes/custom/head.html and insert the path to the css file for your theme.
I placed my theme-css-file in /source/assets/deg0nz/, so i changed the head.html to:
<link href="{{ root_url }}/assets/deg0nz/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
I have chosen a theme from bootswatch and customized it with their customization procedure. So in the end i just had to change the bootswatch.less, the variables.less and the bootstrap.css in the bootswatch-theme folder and create the min-files.
Instead of doing this you can use any bootstrap.css and place it's path in /source/_includes/custom/head.html like i described above.
Try source/stylesheets/style.css