This is the content of my base.html.twig file:
<html lang="en" class="no-js">
<head>
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
{% block stylesheets %}
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" type="text/css">
{% endblock %}
</head>
This is the path of my file: C:\xampp\htdocs\myproject\app\Resources\assets\css\bootstrap.css.
I am note sure if my path is correct I am a totally newbie to this. Can someone point me and explained step by step how can include a css file ? thx in advance
[UPDATE] Here is my structure of my project
In project folder add to
src/AppBundle(or name of your bundle)/Resources/public/css/bootstrap.css
and then in twig template do this:
{{asset('bundles/name_of_your_bundle/css/bootstrap.css')}}
This will generate url for your file in src/your_bundle/Resources/public/css/bootstrap.css
I suggest you to read this blog: http://tutorial.symblog.co.uk/index.html
There is series how to create blog in symfony2.
firstly, including a css file has got nothing to do with php or symphony
<link href="css\bootstrap.css" rel="stylesheet" type="text/css">
if you are using this to include the css file then your php file must be in the assets folder, if its outside any other folder, just say its in the app folder then you need to include those folders as well in the path.
<link href="Resources\assets\css\bootstrap.css" rel="stylesheet" type="text/css">
as you said you are totally newbie, and i see you are trying symphony. i would like to advice you to start with HTML and CSS, then PHP and and move to symphony after that. If you do not want to face any problem in the future.
Related
I have a django back end website and I tried to load the css in HTML as follows.
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/aos.css' %}" rel="stylesheet">
<link href="{% static 'css/index.css' %}" rel="stylesheet">
however this makes all texts on my website completely transparent. I can still see the letter is there by cursoring tho.
I tried to not add aos.css but with bootstrap.min.css and index.css and they worked fine.
Is aos.css not compatible with django framework?
Django is a backend framework so you don't have to worry about it's comparability since you're integrating aos on frontend. Did you load up the aos.js? An alternative would be to use the CDN.
I have checked the other topics, they seem similar but won't solve my problem:
I am writing a web application using flask and bootstrap works fine but my custom stylesheet gets completely ignored and I can't figure out why.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="/static/styles.css" rel="stylesheet">
<title>C$50 Final_Project: {% block title %}{% endblock %}</title>
</head>
Use the Compiled CSS and JS instead?
https://getbootstrap.com/docs/4.3/getting-started/download/
and maybe try to use "url_for" for the file path
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/bootstrap.min.css') }}">
Browser cache needed to be cleared...
I am not sure why this question was downvoted so much, but I probably should have added, that the path for static.css is not the problem...
I have a html template that is rendered through index view.
It has a couple static css that are referenced:
<html lang="pt-pt">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>AppGestao by Araujo</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!--STYLE FILES START-->
{% load staticfiles %}
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"/>
<!-- Animation library for notifications -->
<link href="{% static 'css/animate.min.css' %}" rel="stylesheet" type="text/css"/>
<!-- Light Bootstrap Table core CSS -->
<link href="{% static 'css/light-bootstrap-dashboard.css?v=1.4.0' %}" rel="stylesheet" type="text/css"/>
<!--STYLE FILES END-->
</head>
I have the files inside APP_NAME/static/css
If I run this html alone without django rendering and manuel reference to static css works perfect.
If I do it through {%static it don't.
Despite this, when I see source code in chrome, they look exactly the same with same css links!
I solved this problem by changing this
<link href="{% static 'css/light-bootstrap-dashboard.css?v=1.4.0' %}" rel="stylesheet" type="text/css"/>
to
<link href="{% static 'css/light-bootstrap-dashboard.css' %}" rel="stylesheet" type="text/css"/>
It's strange because it works without django.
Why is that version there? (this was taken by an official bootstrap template)
It looks like what you need is static urls that also get passed GET parameters like is shown in this post previous SO post
Simply add them to the end:
<a href="{% static css/css.css %}?office=foobar">
For Django 1.5+
<a href="{% static 'css/css.css' %}?office=foobar">
Today I deployed my application and I experienced a problem regarding my css.
In my main template I have the following code :
<!-- BEGIN GLOBAL MANDATORY STYLES -->
{% stylesheets
'bundles/appgenerictheme/current/frontend/css/style1.css'
'bundles/appgenerictheme/current/frontend/css/style2.css'
'bundles/appgenerictheme/current/frontend/css/style3.css'
output='css/style.css' filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="screen" charset="utf-8">
{% endstylesheets %}
The order bellow 1,2,3 is important because in style2.css I overide some rules defined in style1.css etc ...
In my dev environment I had no problems because the css are rendered like this :
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link rel="stylesheet" href="/app_dev.php/css/style1.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="/app_dev.php/css/style2.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="/app_dev.php/css/style3.css" type="text/css" media="screen" charset="utf-8">
But in production environment, the rules changes and the assets are concatenated in one single file : style.css
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" charset="utf-8">
If I look into the generated style.css I can see that the order is not style1 -> style2 -> style3 but some random order making my rules to override css useless.
Is there a way to explicitly define an order for the concatenation of style.css ?
I've been trying to replicate this issue to no avail. It does respect the order in which I define them in my case.
Make sure you:
Install your assets: php app/console assets:install web
Dump the new CSS file: php app/console assetic:dump --env=prod --no-debug
Clear the cache: rm -fr app/cache/*
in that specific order.
Anyway, if that doesn't help you could try using different directories, like this:
<!-- BEGIN GLOBAL MANDATORY STYLES -->
{% stylesheets
'bundles/appgenerictheme/current/frontend/css/style1.css'
'bundles/appgenerictheme/current/frontend/css/d1/style2.css'
'bundles/appgenerictheme/current/frontend/css/d1/d2/style3.css'
output='css/style.css' filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="screen" charset="utf-8">
{% endstylesheets %}
I have a problem with creating pdf file. I include css3 file into head section in view, but it's doesn't work.
Included file is twitter bootstrap css and main css of application theme.
...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" media="all" rel="stylesheet" href="packages/bootstrap/css/bootstrap.min.css">
<link type="text/css" media="all" rel="stylesheet" href="css/dashboard/style.min.css">
</head>
...
Have an idea?
Can you try to use a full path? (eg. use the asset() helper)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" media="all" rel="stylesheet" href="{{ asset('packages/bootstrap/css/bootstrap.min.css') }}">
<link type="text/css" media="all" rel="stylesheet" href="{{ asset('css/dashboard/style.min.css') }}">
</head>
I'm assuming you are using https://github.com/barryvdh/laravel-dompdf ?
An alternative is using wkhtmltopdf, which is possible with the same interface etc: https://github.com/barryvdh/laravel-snappy (but requires to install wkhtmltopdf)
I solve this problem by typing the public_path in href attribute, following instruccions from https://github.com/barryvdh/laravel-dompdf/issues/121#issuecomment-358245406:
<link href="{{ public_path('css/pdf.css') }}" rel="stylesheet">
NOTE: I'm using a local virtual server. I hope this works for you.
I solve this problem by using external CSS's full path. This one worked on my linux ubuntu server :
<link rel="stylesheet" href="/var/www/mysite/public/css/main.css" media="all" />
You also can solve not loaded image problem by using this solution.