Have the following css section:
.introduction:before {
content: 'Who is going to translate me in a graceful way?';
}
Probably there is no easy way to handle i18n for css file, two possible choices:
gather all these css which with content and ship them together within Django templates.
generate i18n sensitive css name in template to choose different pre-translated css content.
Any new possible solutions will be appreciated, thanks.
I would serve the css file that needs translating through Django and cache it per language to mitigate the performance hit.
urls.py
url(r'^static/css/translated.css$', TemplateView.as_view(template_name='translated.css')),
translated.css
{% load cache %}
{% cache 60*60*24 translated_css LANGUAGE_CODE %}
{# write css here, translate as a normal template #}
.introduction:before { content:
{% trans 'Who is going to translate me in a graceful way?' %}
; }
{% endcache %}
I think that this is impossible. Only you can translate it if the css is a template (like the html template). But this is a bad solution.... efficiency
But if you have a class language in the body for example, you can have something like this:
body.language_en .introduction:before { content: 'Who is going to translate me in a graceful way?'; }
body.language_es .introduction:before { content: 'El traductor de google es terrible :-)'; }
And in your base.html something like this:
....
<body class="language_{{ LANGUAGE_CODE }}">
....
Another possible solution, for people that want to avoid serving the CSS files differently or duplicating CSS lines or files, would be to make use of django javascript translation support.
Leave the original CSS in place as a backup. Then override the content using javascript by appending the translated style to the head of the page:
var trans_str = gettext("some content");
$('<style>.classWithContent:before{content:"' + trans_str + '" !important}' +
'</style>').appendTo('head');
This is the version using JQuery but you can rewrite it in pure javascript easily. Add as many translated strings and override as many styles as you want.
This way you make use of django internationalization which you probably already have in place and translate CSS strings with minimal code. This solutions is obviously not applicable for heavy use of CSS content.
Related
** EDIT ** SOLVED
I'm using bootstrap_admin app for my Django admin page. If you are using bootstrap_admin app for your Django Admin page, this might come in handy for customizing the sidebar.
TLDR:
Sidebar.html doesn't see my custom.css file, only base.css, so I had to add everything to base.css
The long version:
Look below the break to see my original problem.
So essentially, bootstrap admin has a template tag for the sidebar. This sidebar is customized with sidebar.html template, but it's not really a template as I thought; it's actually called into a template using a couple of commands, such as :
{% display_sidebar_menu cl.has_filters as is_displaying_menu %}
and
{% block sidebar_menu %}
{% render_menu_app_list %}
Because of this, for some reason the sidebar.html file doesn't see my custom.css file, even though it comes after the base.css file link in the base.html head.
Anyway, because of that reason, I found that I had to put my custom classes into the base.css file directly. Fortunately the file is pretty small and easy to maintain, so this isn't a big deal.
Background images are now showing correctly, and I don't have to use any inline styles, which is great.
For those who took the time to comment, thank you for your time. Hopefully my mistake helps someone else in the future.
As the title states.
I've run into an interesting problem. This is related to css background images. I am loading the app names and their models in a sidebar menu, and for some reason the images just won't load.
I added the images in the static folder for the app. The code in the css file is the following:
/* App Buttons and Icons */
#servers_icon {
background-image: url("/static/bootstrap_admin/img/icon_servers_copy.png") no-repeat;
}
#sensors_icon {
background-image: url("/static/bootstrap_admin/img/icon_sensors_copy.png") no-repeat;
}
Note the path.
For some reason, django is refusing the load these files. The css file is being loaded and actively used by the app. The ID names are correct. However, the images just will not load.
However, if I put them inline in the HTML file:
<li style="background-image: url('/static/bootstrap_admin/img/icon_{{ app.app_label }}_copy.png'); background-repeat: no-repeat;" {% if app.app_url == current_url %}class="active"{% endif %}>
<a href="{{ app.app_url }}" class="section" title="Models in the {{ name }} application">
{{ app.name }}
</a>
</li>
Then the images load. Note that the path is the same.
{{app.app_label}} is part of the in-template for loop that populates the menu. The label name and file name matches. In fact, the file name was renamed to match the app label name.
Anyway, I have checked numerous sources and can't seem to find a fix for this. For now, I will keep the style in-line, but I would like to revert back to using the CSS file if possible. I really dislike using inline styling.
Please note that this is development code. I'm honestly stumped here, and I have no idea what to do at this point beyond continuing to use inline styling just to load the icons.
I'm progressively migrating an existing Symfony application to VueJS.
The issue I recently discovered is the {{ stuff }} markup are always interpreted by VueJS, even if the content come from a rendered twig variable.
To avoid this, I would like to extends the html escaper to replace { and } by the respective { and } html codes.
How can I do that properly? The escaping is inside a twig_escape_filter without a service I can override.
I also tried to make a custom escape strategy guesser, returning my vue escaping, itself calling the twig_escape_filter with html escaping before replacing the needed characters. All my source code was escaped. :-D
Thanks for the help.
In fact you could solve this problem in your javascript as simple as that:
import Vue from 'vue';
Vue.options.delimiters = ['${', '}'];
Now you can use double brackets ({{ }}) for twig like you did before and ${ } for VueJs.
EDIT: What you want to do is impossible. You can indeed convert {{ }} to its corresponding html entities using a simple filter like this:
new \Twig_Filter('yourFilter', function ($string) {
return htmlentities($string, ENT_HTML5);
}, ['is_safe' => ['html']])
but since Vue runs on top of your rendered html, the conflict you present will still occur (because html will render these html entities as brackets).
Your only solution is to use a more specific delimeter for your Vue like this one, to avoid this conflict:
Vue.options.delimiters = ['$vue{', '}'];
I keep seeing people say AMP pages must have the css code all inline in the custom tag, but on the website it seems to say you can reference it from an external file for when its from a preprocessor: https://www.ampproject.org/docs/guides/responsive/style_pages#using-css-preprocessors
Can someone tell me if I'm interpreting this wrong? Thank you!
{% include "/assets/css/main.min.css" %} is Twig Tag (The flexible, fast, and secure template engine for PHP). For more details Click Here
You can use like this if using PHP language
<style amp-custom>
<?php include("styles.css"); ?>
</style>
include : The include statement includes and evaluates the specified file.
Note : styles.css is external css
I am a beginner in laravel, and having some trouble in laravel CSS layouts.
I have multiple links in my web, for example:
testing.com/main
testing.com/AboutUs
testing.com/ContactUs
which I used a layout stored in /layouts/main.blade.php in the views folder.
Inside the layout, I wrote all the css link that is based on the public folder.
For ex:
<link href="stylesheet" href="/css/styles.css">
And it works fine on all the links except for the ones with sub-links, for example:
testing.com/main/Clients
testing.com/main/Solutions
The CSS seem to have dissapear when I navigate to sub-links.
Am I not properly declaring the CSS in Laravel? The CSS works perfectly when it is not a sub-link.
You should use the Laravel helpers to add assets to your views as they generate the correct URLs. Either use URL::asset('css/styles.css') or asset('css/styles.css') if you need to get a link to an arbitrary asset. Alternatively, you can be a bit cleverer and get Laravel to do some extra hard lifting:
{{ HTML::style('css/site.css') }}
{{ HTML::script('js/site.js') }}
{{ HTML::image('images/logo.png') }}
These will write your HTML for you as well as generating the links to the assets.
You can use
asset('css/styles.css')
It's work fine with me!
Websites like Wordpress and Tumblr allow designers to create themes that users can select. In general how would you architect a website to be flexible enough to allow custom themes for users?
Take a look on how Django does it. Django uses a Model-View-Controller-like approach in which you use views to populate a context, and then use that context to process a template. Note that Django has its own MVC terminology.
For example, if we say that our context reads as follows (in pseudo code),
author = 'mntnoe'
title = 'My Title'
content = '<p>This is my content</p>'
we could use the following template:
<h1>{{ title }}</h1>
<div class="author">Author: {{ author }}</div>
<div class="content">
{{ content }}
</div>
Now, you are free to replace the template (or collection of templates) with another one without affecting how the site works.
Seperate content from formatting by using proper html and css. That means using css files for the style rather than inline style inside the html.
You can make several css files (themes if you wish), and switch between them using javascript.
Let your serverside technology of choice simply generate easy to adjust, by css and images, html. A great site of examples is http://www.csszengarden.com/. It emits the same html every time but uses different css and images to style it. Take a look at the html they generate to get ideas.