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">
Related
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') }}")
I'm designing a website for a nonprofit i'm part of using Python/Django.
The format is this: Urls point to Views which point to HTML Templates.
I can't for the life of me figure out where to store the images and stylesheets the HTML needs. Static? Media? Next to the templates? Next to the views? Nothing works.
I'm trying to use img src='image.jpg' and link rel='stylesheet' href='base.css' like I was taught, but it isn't working.
I'd stop development and study up on how files work, but I have a deadline.
See part 6 of the tutorial:
stylesheet (polls/static/polls/style.css):
and
Next, add the following at the top of
polls/templates/polls/index.html:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
The {% static %} template tag generates the absolute URL of static
files.
That’s all you need to do for development.
I'm trying to use img href='image.jpg'
It's <img src="..." alt="...">
I have in my index.html, between my <head> tags the following line of code:
{% block head %}
<link type="image/x-icon" rel="shortcut icon" href='static/img/favicon.ico'/>
{% endblock %}
This is not working somehow. But if I go to: 'http://127.0.0.1:5000/static/img/favicon.ico' The favicon shows up. So this means that the favicon works, it's displayable but I can't find a way to put it next to the URL as it should be. Thanks in advance
From your code, you have given and the URL provided it looks like it is a flask app.
If it is flask you need to load the static files as follows, which will help you to load the favicon as well.
<link rel="shortcut icon"
href="{{ url_for('static', filename='img/favicon.ico') }}">
Try it like this:
<link rel="icon" href="static/img/favicon.ico">
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 a little bit new, but I was curious about changing the name of my main file in my css folder. I have the css folder, where I am importing my partials.
I initially tried to call this base.css and add the following line in my head.html (in my includes directory).
<link rel="stylesheet" href="{{ site.baseurl }}css/base.css">
However, it still would not load the appropriate main css file. Instead, I had to rename my file to main.css. there has to be a way around this but I wasn't sure and the literature wasn't that helpful.
Thanks so much! I would really appreciate any help.
Starting from Jekyll 3.3, you can use the relative_url filter to avoid adding baseurl, it should be available for GitHub Pages very soon.
<link rel="stylesheet" href={{ "/css/base.css" | relative_url }}>
You can use the prepend option instead:
<link rel="stylesheet" href="{{ "/css/base.css" | prepend: site.baseurl }}">
If you are using Github Pages then ensure that config.yaml includes the base.url variable and it points to your repository name, e.g:
baseurl : '/my-awesome-jekyll-site'