I'm trying to upload styles from another frameworks to my components in React. I didn't find info about this in videojs docs. At this moment I'm uploading styles via cdn like this:
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video-js.css" rel="stylesheet">
I'm uploading scripts locally, but how can I do that with styles? I'm using scss, so for my styles I'm using this:
require('.././styles/style.scss');
EDIT
Project structure
I'm supposing your code belongs to the index.html file (root path as shown here: https://i.stack.imgur.com/POPhJ.png)
So you'll need to add your SCSS files like:
<link rel="stylesheet/scss" type="text/css" href="styles/contact.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/desktop.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/mobile.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/other.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/reset.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/style.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/tablet.scss">
Just after -or before- the other <link> tags
Related
<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="plugins/magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="css/style.css">
this is what the part of the code that throughs me the error just like for css I get error for all the plugins like bootstrap, owl-carousel, magnific-popup
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
If I use this .css file in my code, it will overlap the previous .css files which I wrote myself, how can i load my .css files first, if I can not find the css then turn to the bootstrap .css file?
i would guess that your css declaration looks like this
<link rel="stylesheet" type="text/css" href="yourcss.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
you should change them upside-down
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="yourcss.css" />
the reason is that any css that is closer to the body tag, will be considered the first priority. if items in yourcss.css has the SAME NAME with the items your bootstrap.css, the bootstrap.css's items will be OVERRIDDEN. if you didn't want to override these, make sure the item/class/id name is different for each in the yourcss.css. Make the best practice of giving each tag a different class name for your css.
You write your css files like this:
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/your-style.css" />
try this
<link rel="stylesheet" href="assets/css/bootstrap.css">
after your own css
<link rel="stylesheet" href="assets/css/YOURCSS.css">
You could load your own CSS with
<link rel="stylesheet" type="text/css" href="css/style.css" />
and then import bootstrap inside your own CSS file, that way your CSS will be on top of bootstrap and you will be able to override it.
#import url("bootstrap.css");
I have imported a html page into my laravel 4 project. I linked all the js and css files together. However, when loading the page the page just outputs plain html.
This is my internal folder structure:
In my main.blade.php site I link to my css like that:
<!-- CSS Files
================================================== -->
<link rel="stylesheet" href="{{asset('css/mainPage/bootstrap.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/jpreloader.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/animate.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/flexslider.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/plugin.css')}}" type="text/css">
Any recommendations what I am doing wrong?
I appreciate your answer!
As the others already pointed out, your missing the 'assets' at the beginning of your path. That's because it requires the full path relative to the public folder.
Besides that, I suggest you use the tools Laravel provides to generate the full link tag of your css includes. It makes your code a lot more cleaner.
{{ HTML::style('assets/css/mainPage/bootstrap.css') }}
And there's HTML::script('path') as well for javascript files
Use the following:
<!-- CSS Files
================================================== -->
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/bootstrap.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/jpreloader.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/animate.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/flexslider.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/plugin.css')}}" type="text/css">
give the full path of the directory under public folder:-
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/bootstrap.css') }}">
I m sonal.
I am designing a website.
In which i m using font-Awesome and bootstrap combine.
But some where confused in linking.
my linking files are:
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/
bootstrap.min.css">
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/
bootstrap-theme.min.css">
<script src="../goyal/bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/
bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="../goyal/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../goyal/font-awesome/css/font-
awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
Where i am lacking. I am in new in this feild.
The only issue I can see is that you are linking both full and minified version of a few of the files.
Try this instead:
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../goyal/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="../goyal/bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
The .min.css and .min.js files are supposed to be used in production, they ususaly have shorter variable names etc to make the files smaller, but are ALOT harder to read.
I would recomend linking to the files that are not minified while developing then switch to the minified files when going 'live' with the site to keep the bandwidth down.
I'm quite new to the Spring|Hibernate|Eclipse setup. For some reason, My index.jsp files are not picking on the css files (css & css01).
Any clue why?
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css">
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css">
You have not provided the end tag of the link tag. Provide it like this.
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css" />
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css" />
OR
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css"></link>
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css"></link>