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.
Related
I am new to Laravel and was wondering where I should put each css files for my views. I want to keep them separate and don't to have my styles in one file. Also, how would I be able to access them in those views? I tried using
<link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" /> but nothing changed in my view. The path where I have my file is storage/public/css/style.css
If your link is <link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" /> change it to <link rel="stylesheet" type="text/css" href="/css/style.css" /> and put your style sheet in /public/css/style.css
<link rel="stylesheet" href="{{asset("css/style.css")}}">
used this code,here asset link to your public folder and put your style sheet in /public/css/style.css
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
I'm using BOOTSTRAP via the CDN hosted by MAXcdn. But now I want to change something in the CSS files, but it's not on my server.
So my question is, how to deal with additional CSS when you are embedding your files via a CDN solution?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Create a new file called custom.css and include it inside <head></head> after the CDN versions.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Your Custom theme -->
<link rel="stylesheet" href="your/path/to/custom/css/file">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
The best possible solution is overwriting CSS rules from bootstrap.css file into custom.css file.
for eg
If you include your css (custom.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Your Custom CSS code should go in this file-->
<link rel="stylesheet" href="css/custom.css">
tip: make sure to add your custom.css file after bootstrap CDN file into your HTML document.
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've started using meteor and want to know what is a good way to migrate a HTML file that refers to many CSS files. So far, I found that meteor will automatically load all CSS files in an alphabetic order. My two questions are as follows:
Where should I locate the CSS files? (or from where I can control which directories are loaded)
Is it possible to load specific CSS files in particular order?
Here are the current references I have in my HTML file, before migrating to meteor.
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Libs CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/owl-carousel/owl.carousel.css" media="screen">
<link rel="stylesheet" href="vendor/owl-carousel/owl.theme.css" media="screen">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" media="screen">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page Styles -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/blue.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/theme-responsive.css" />
Thank you for your help! :)
There is no need to provide reference of stylesheets in meteor. Just put your css file in client/stylesheets folder. Meteor will automatically apply these css rules.
As stated by #imslavko you can find Meteor behaviour at https://guide.meteor.com/structure.html
However these rules are more relevant for .js code and .htmltemplate files: Meteor merge and minimize all .css in a single file (as long as they are provided by you and not on a CDN) so you will find a single <link rel="stylesheet"> reference in your <head>.
Remember to put all frontend files inside client folder, to avoid unnecessary server loading and availability.
So you can choose your convenient folder structure for .css files, for example put them all in client/stylesheets or use other subfolders to better manage them.