Why does video-js setup guide use an absolute path to refer to video-js.swf and not a relative path?
<link href="//example.com/path/to/video-js.css" rel="stylesheet">
<script src="//example.com/path/to/video.js"></script>
<script>
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
The setup guide offers no explanation!
That would seem to be an inconsistency. You should submit a bug.
The main library urls use protocol-relative URLs to avoid security issues, and the swf should probably be the same.
Related
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.
I wanted to change the default Vue favicon, so i changed the photo in the public folder to my own .ico image while still naming it as favicon. Except for this, i did no other changes, but it didn't work and still having the old default vue logo icon img, making no sense.
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
I generate a favicon from here and I organize URL and favicon file like the following screenshot.
Generated favicon file work on all modern devices with cross-browser compatibility in my Vue ClI 3 project.
I have included a bootswatch theme in my website.
<!-- Bootstrap CSS served from a CDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha384-zF4BRsG/fLiTGfR9QL82DrilZxrwgY/+du4p/c7J72zZj+FLYq4zY00RylP9ZjiT" crossorigin="anonymous">
<!-- Scripts -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem is that bootstrap.min.css file loads twice. I can see it twice in resources when I open developer console on any browser. It is the same file because I can see that it is loaded by the same html line. Because of this, when I want to close a collapse or a menu, it just closes and opens again fast. I have no idea why it loads twice. How can I fix this?
I can think about two reason for your issue---
No.1
You have a plugin that uses bootstrap and it is loading the additional cdn.
No.2
You are adding some include file in your page which have the bootstrap cdn inside it. Hence your main page loads two bootstrap cdn.
Suggestion
Try removing bootstrap cdns from the bootswatch theme. As I am assuming that your website has already bootstrap cdn included in it.
I know it's a old thread, but I was searching for the same and also found the answer.
Remove integrity attribute from the url and it downloads only once.
This new attribute integrity attribute which I think is what makes the browser to call the cdn the first time to check that the file is not manipulated and then the second call happens to load the file.
Somehow it is flawed and should not download twice.
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>
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