I have called my css like this <link href="{{ URL::asset('/assets/css/app.min.css') }}" id="app-style" rel="stylesheet" type="text/css" />
There is id on tag css. this css successfully called the directory if my url site no sub domain like laravel.test/example. but the css fails to call if my url site like laravel.test/example/example2..
If i remove that id.. it work on all sites. but i need that id because its making some feature like change light/dark mode layouts.
So id='app-style' is going to file app.js.
In app.js there is s("#app-style").attr("href","assets/css/app-dark.min.css"). app-dark.min.css is failure to call..
It will be easy if i can use blade on javascript.
I think you should use
asset() helper function but I'm not sure:
<link href="{{ asset('./css/app.min.css')}}" rel="stylesheet">
In your blade you can check if something is or not. The you can include a condition to make the switch. Something like that:
#php
$hasDarkMode = true;
$link = $hasDarkMode ? 'app-dark.min.css' : 'app.min.css';
#endphp
<link href="{{ URL::asset('/assets/css/' . $link) }}"
rel="stylesheet"
type="text/css" />
But it probably makes the most sense to make the condition on the href attribute.
I decided to answer my own question. Because id='app-style' is going to file app.js and there is some code to call other css..
i just need to change my app.js from asset to app.blade.php on view and set it on main layout.
now i can change directory structure from blade. s("#app-style").attr("href","assets/css/app-dark.min.css") to s("#app-style").attr("href","{{ asset('assets/css/app-dark.min.css') }}")
Related
I am using Jinja 2 to build my website and in my main template I have something such as this:
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
and every time I run it, it says that
url_for is undefiend
If anyone could point me in the right direction I will appreciate it a lot!
Thanks In Advance.
make sure you are using Jinja. Look at some examples. Anyway, I just do the below, as it doesn't use Jinja.
<link rel="stylesheet" href="./static/css/main.css">
on some of my pages I have bootstrap included.
Now on one page, I have an alert included, styled by bootstrap.
It's defined as simple as that:
$('#wrongPasswordDiv').html('<br/><div class="alert alert-danger" id="wrongPWAlert" role="alert">Falsches Passwort. Bitte erneut versuchen!</div>');
Also, before, Bootstrap css file is included:
<link rel="stylesheet" type="text/css" href="/bootstrapcss" />
bootstrapcss is routed to the correct css file.
In the network tab, you can see that loading bootstrap works fine:
But also, you can see, that even though it's loading, no classes are applied.
Now if I change the including of bootstrap to a CDN, it is working and the classes are perfectly applied.
Now I have no idea, what the problem is, becaue as you can see, bootstrap is loading and in both cases, it's loading, but only when loading from the CDN, the styles are applied.
Any ideas why?
Edit: after trying, if I load the CSS through the direct link instead of over the router, it's working. In another file, the same line is working perfectly fine though, so the routing seems to work fine (which you can see on the fact, that the file is loaded as well)
You forgot the point, you must go before the first slash in the address of the folder:
<link rel="stylesheet" type="text/css" href="./bootstrapcss" />
As suggested and answered in another thread by Kobi, this is the answer to the question:
Using this route:
$router->map('GET','/bootstrapcss','example.css','bootstrapcss'); And
then while matching:
$match = $router->match();
if($match['name'] === 'bootstrapcss'){
header("Content-Type: text/css");
$fileName = $match['target'];
echo file_get_contents($fileName);
return; }
Complete answer is here.
Thank you for the help again!
you are missing file extension in in html
<link rel="stylesheet" type="text/css" href="/bootstrap.css" />
I would like to know, why on fresh Laravel install, the following code does not link Bootstrap CSS file with the blade.php file, this is what I believe the correct code to make it work:
<link href="{{ asset('public/css/app.css') }} rel="stylesheet"/>
The only way I made it work was this way:
<link rel="stylesheet" type="text/css" href="/public/css/app.css">
However I want to do it with asset, so I would like to know what is the proper way.
You can use one of the following options:
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
OR
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet" type="text/css" >
NOTE: This will work if your directory structure is like this: /public/css/app.css
It looks like you are trying to access the bootstrap CSS file from the public folder but by default, there is not one until you have placed it.
Also when you are using the app.css file then everything is working because it is a compiled CSS file which is a combination of bootstrap, font awesome and other CSS files. Laravel kept these files if you are using VueJs with laravel.
you need to perform:
npm install bootstrap
wait and then perform:
npm run dev
it will compile sass with all dependency file into app.css and app.js
and then you need to include it into any blade.php file
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}"></script>
I'm working on an real-time chat app with MEAN stack , I begin with html and css , and i'm working on cloud9 platforme, my problem is that i can't add the css file to html !! i tried many time to change the path of my css file but still doesn't work for my :
<link rel="stylesheet" href="psirt/client/views/main.css">
The path to html file and css file is :
psirt>client>views>index.ejs which contains the html code
psirt>client>views>main.css for the css file
any help please ? thnx a lot!!
Try adding a / before the path. Like this:
<link rel="stylesheet" href="/client/views/main.css">
(if your project root is psirt)
Alternatively, just use:
<link rel="stylesheet" href="main.css">
Have you tried adding type of the document to the link tag? See the example:
<link rel="stylesheet" type="text/css" href="psirt/client/views/main.css">
Also, you might want to redefine your drectory for the href.
inspect your code. I think your framework may set any basepath for your code. So your host calling that link and results in error. But i am not sure about it
I'm having trouble setting up the href of my CSS.
My projected is located at
www.mysite.com/myproject/
My css is located at
www.mysite.com/myproject/styles/css/css.css
When I'm at www.mysite.com/myproject/, everything works fine. but when i go into a directory, (www.mysite.com/myproject/dir1/) the css is no longer found. My guess is that it's looking for the css at www.mysite.com/myproject/dir1/styles/css/css.css.
I'm currently using master pages. How do I properly reference the css?
Edit:
This is currently how i reference my CSS.
link rel="stylesheet" type="text/css" href="/content/css/bootmetro.css"
but it doesn't work properly because the project is not located at the root (www.mysite.com). it is located at www.mysite.com/myproject/. So having the "/" causes the css not to load at all.
Set the css path like this, starting slash means root of the site.
/styles/css/css.css
Have you tried:
link rel="stylesheet" type="text/css" href="../styles/css/bootmetro.css"
Assuming you are using ASP.NET, try like this:
<link rel="Stylesheet" type="text/css" href="<%= ResolveURL("~/content/css/bootmetro.css")%>" />