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
Related
I have tried the following in my blade template:
#section('styles')
<link href="{{asset('assets/css/app.css')}}" />
#stop
In the master blade template I have included the following:
<link href=asset('/assets/template/css//invoiceTemplate.css')rel="stylesheet" type="text/css"/>
I you want to include a CSS / JS file for a specific blade use stacks (see here)
from the documentation:
#push('scripts')
<script src="/example.js"></script>
#endpush
You may push to a stack as many times as needed. To render the complete stack contents, pass the name of the stack to the #stack directive:
<head>
<!-- Head Contents -->
#stack('scripts')
</head>
you can also place them at the bottom of your blade (where a lot of people call thier JS files these days)
You need to add #yield('styles') to your master blade template.
Yes it is. Write this code to your master template
#yield('page-styles')
and add this also to the specific blade file where you want to add a specific CSS file.
#section('page-styles')
//Your specific css file
#stop
Make sure that the parameter inside the #section and #yield are the same.
In this case, I've used 'page-styles'.
In my .htaccess file, I redirect all request to my public/index.php file.
From there I do routing, based on params given in URL.
Problem is with my css file being included in view, which says href="css/app.css". All works good when specifying request like http://hostname/public/something, but If I go one directory deeper, like say for example:
http://hostname/public/something/else, my css breaks.
How should I fix this?
That's because you're using relative paths instead of absolute paths for all your html links (images, javascript, css, href links).
Actually, your rule can create virtual directories.
Let's say you have css links that way
<link rel="stylesheet" type="text/css" href="css/style.css">
For some examples, here is the path resolution
/public/something -> /public/css/style.css (GOOD)
/public/something/else -> /public/something/css/style.css (WRONG)
To avoid that behaviour, use absolute path
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
Or, if you don't want to change all your html links, you can add this line after <head> html tag
<base href="/public/">
Use absolute links like href="/public/css/app.css".
If the /public part is variable, e.g. between your development machine and the production server, then use a variable or constant:
<?php echo ROOT_URL . '/css/app.css'; ?>
The most useful thing to do is typically to create a small helper function for that:
<?php echo css('app.css'); ?>
Depending on what kind of templating system you may be using, this could look as nice as this:
{{ css 'app.css' }}
Try adding a global variable or constant or some functions to you PHP application named: $site_root, that is a path to your root directory. For example CodeIgniter does this with url_helper, See This: https://ellislab.com/codeigniter/user-guide/helpers/url_helper.html
Then add $siteRoot before your css file
... href="<?php echo site_url() ?>/link/to/your/file.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!
We have followed the guide provided by WSO2 to get access to the CSS / JSP pages.
Our aim is to re-theme / rebrand / restyle the login page. We have found that the login page is part of the jar: WSO2\repository\components\plugins\org.wso2.carbon.identity.sso.saml.ui_4.0.3.jar
The login page is called login_ajaxprocessor.jsp
The guide mentioned above states the following about JSP's ending with _ajaxprocessor.
By default when create a jsp file ( say “foo.jsp”) in a Carbon UI
component, it will inherit header, left menu and footer from the
Carbon core UI. But if the file name is “foo_ajaxprocessor.jsp”, there
will be no inheritance.
For an example let's consider, “login_ajaxprocessor.jsp” in
“org.wso2.carbon.identity.saml.sso.ui” component. It simply omit the
header, left menu and footer and display only the content from this
file. So we are able to customize this page in to a different look and
feel.
Were were successful in modifying the language (buttons, etc) in the JSP files. This Jar also contains a CSS file in: \web\sso-saml\css\main.css
We have modified this CSS file to my own style. However, when the page gets loaded, it seems the default WSO2 main.css file is read.
When looking at the default way in which the JSP page refers to the CSS, it says:
<link media="all" type="text/css" rel="stylesheet" href="carbon/sso-saml/css/main.css"/>
We would expect that the /sso-saml/ part wordt select our own modified CSS file.
Is it possible to configure that for this page only, our modified CSS file will be used? We want to prevent to have to change the default main.css. Also, it is because we want to use specific images, that we want to store in jar\web\sso-saml\images
Yes you can use your custom style pages and apply them. Please refer [1] [2] for more info. This will guide you on your task.
Hope this will help you.
[1] http://wso2.com/library/knowledge-base/2010/11/customize-ui-theming-wso2-carbon-based-products
[2] http://wso2.com/library/knowledge-base/2011/11/playing-around-carbon-product-themes
The login.jsp can be found in following jar.
/repository/components/plugins/org.wso2.carbon.ui_4.0.5.jar => /repository/components/plugins/login.jsp
and css => /repository/components/plugins
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.