I've created a new environment called 'staging' which is pretty much the same config as the 'production' environment and I'm trying to use yui_compressor on my css and js files. Please see an example of my css files below:
{% stylesheets output='css/compiled/main.css' filter='?yui_css' filter='cssrewrite'
'bundles/xyz/lib/frontend/css/social_foundicons.css'
'bundles/xyz/lib/frontend/css/general_enclosed_foundicons.css'
'bundles/xyz/lib/frontend/css/general_foundicons.css'
'bundles/xyz/lib/frontend/coda/css/coda-slider.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
<!-- Google fonts -->
{% stylesheets output='css/compiled/fonts.css' filter='?yui_css' filter='cssrewrite'
'bundles/xyz/lib/frontend/css/fonts.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
<!-- Included CSS Files -->
{% stylesheets output='css/compiled/style.css' filter='?yui_css' filter='cssrewrite'
'bundles/xyz/lib/frontend/css/style.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
When deploying using capistrano the following files are created:
/web/css/compiled/fonts.css
/web/css/compiled/main.css
/web/css/compiled/style.css
This I assume is correct, however the header in my application renders the following:
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/main_social_foundicons_1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/main_general_enclosed_foundicons_2.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/main_general_foundicons_3.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/main_coda-slider_4.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/fonts_fonts_1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/style_style_1.css" />
None of the above files exist on the server and I assume it should be calling /css/compiled/fonts.css, main.css and style.css.
Anyone know why it's doing this?
Thanks
The problem was that I had debug mode set to true for the staging environment.
Related
Good morning to you all,
I'd like to ask you for help because I don't understand where my problem with adding a favicon with Symfony 6 comes from.
I have two codes in mind, this one
<link rel="icon"
href="{{ '/images/' ~ 'favicon.jpg' }}"
type="image/x-icon"
src="" />
as well as this one
<link rel="icon"
href="{{ asset('/images/' ~ 'favicon.jpg') }}"
type="image/x-icon"
src="" />
None of the codes work.
I even get this error in Symfony when I put assets in my code, and I use yarn.
An exception has been thrown during the rendering of a template ("Asset manifest file "C:\wamp64\www\projet-conrad-angela/public/build/manifest.json" does not exist. Did you forget to build the assets with npm or yarn?").
<link rel="icon"
href="{{ asset('/images/' ~ 'favicon.jpg') }}"
type="image/x-icon"
src="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
If you have a solution, I would be delighted to help. Thank you.
You can do this:
<link rel="icon" type="image/jpg" href="{{ asset('favicon.jpg') }}" />
https://symfony.com/doc/current/reference/twig_reference.html#absolute-url
or
<link rel="icon" type="image/jpg" href="{{ absolute_url('favicon.jpg') }}" />
https://symfony.com/doc/current/reference/twig_reference.html#reference-twig-function-asset
and you can combine both:
<link rel="icon" type="image/jpg" href="{{ absolute_url(asset('favicon.jpg')) }}" />
We are using WordPress Twenty Fourteen theme. The page header code generated for mobile devices shows file sources from both http and https. Later Newer Apple devices are blocking these files from loading.
<link rel='stylesheet' id='twentyfourteen-lato-css'
href='https://fonts.googleapis.com/css?family=Lato%3A300%2C400%2C700%2C900%2C300italic%2C400italic%2C700italic&subset=latin%2Clatin-ext&display=fallback'
media='all' />
<link rel='stylesheet' id='genericons-css'
href='http://wordpress.wwfry.org/wp-content/themes/twentyfourteen/genericons/genericons.css?ver=3.0.3'
media='all' />
<link rel='stylesheet' id='twentyfourteen-style-css'
href='http://wordpress.wwfry.org/wp-content/themes/twentyfourteen/style.css?ver=20190507' media='all' />
<link rel='stylesheet' id='twentyfourteen-block-style-css'
href='http://wordpress.wwfry.org/wp-content/themes/twentyfourteen/css/blocks.css?ver=20190102' media='all' />
<!--[if lt IE 9]> <link rel='stylesheet' id='twentyfourteen-ie-css' href='http://wordpress.wwfry.org/wp-content/themes/twentyfourteen/css/ie.css?ver=20140701' media='all' /> <![endif]-->
<link rel='stylesheet' id='fh-buttons-css' href='https://fh-kit.com/buttons/v2/?green=26890d' media='all' />
<link rel='stylesheet' id='tablepress-default-css'
href='http://wordpress.wwfry.org/wp-content/plugins/tablepress/css/default.min.css?ver=1.14' media='all' />
<script src='http://wordpress.wwfry.org/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>
<script src='http://wordpress.wwfry.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2'
id='jquery-migrate-js'></script>
<link rel="https://api.w.org/" href="https://www.wwfry.org/index.php?rest_route=/" />
<link rel="alternate" type="application/json" href="https://www.wwfry.org/index.php?rest_route=/wp/v2/pages/8" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://wordpress.wwfry.org/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml"
href="http://wordpress.wwfry.org/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 5.8.1" />
<link rel='shortlink' href='https://www.wwfry.org/?p=8' />
<link rel="alternate" type="application/json+oembed"
href="https://www.wwfry.org/index.php?rest_route=%2Foembed%2F1.0%2Fembed&url=https%3A%2F%2Fwww.wwfry.org%2F%3Fpage_id%3D8" />
<link rel="alternate" type="text/xml+oembed"
href="https://www.wwfry.org/index.php?rest_route=%2Foembed%2F1.0%2Fembed&url=https%3A%2F%2Fwww.wwfry.org%2F%3Fpage_id%3D8&format=xml" />
<style type="text/css" id="twentyfourteen-header-css">
.site-title a {
color: #ffffff;
}
Header code generated for desktop / PC devices requests all files using https.
To fix the problem I checked the following:
In WP general settings I verified that the WordPress Address and Site Address both used https.
I check the header.php, functions.php and theme.php files for any custom coding and found none.
See the website at wwfry.org. Any help debugging this issue would be appreciated.
I want to declare my CSS using Assetic with this code :
# app/config/config.yml
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
and in the layout.html.twig:
{% stylesheets 'bundles/ocplatform/css/main.css' %}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
The HTML element is generated :
<link rel="stylesheet" href="/Symfony/web/app_dev.php/css/519c4f6_main_1.css" type="text/css" />
But the CSS file is not loaded, I don't know why. Can you help me!
I have an ASP.NET MVC application that uses the Metronic template from keenthemes.
When i use bundles in my layout for my css , it doesnt work well. Most of the icons do not appear
If i switch to direct links then everything is ok.
Javascript is ok.
Bundles config and layout use:
bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
"~/assets/global/plugins/font-awesome/css/font-awesome.min.css",
"~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",
"~/assets/global/plugins/uniform/css/uniform.default.css",
"~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
"~/assets/global/css/components.css",
"~/assets/global/css/plugins.css",
"~/assets/admin/layout2/css/layout.css",
"~/assets/admin/layout2/css/themes/default.css",
"~/assets/admin/layout2/css/custom.css"));
#Styles.Render("~/bundles/metronic-app")
Direct links:
<link href="~/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="~/assets/global/css/components.css" rel="stylesheet" type="text/css" />
<link href="~/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css" />
<link id="style_color" href="~/assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css" />
Here are the errors from chrome console:
I should have been using the CssrewriteUrlTransform class in my bundle configuration in order to make the asset's paths absolute.
What worked is this:
bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
"~/assets/global/plugins/uniform/css/uniform.default.css",
"~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
"~/assets/global/css/components.css",
"~/assets/global/css/plugins.css",
"~/assets/admin/layout2/css/custom.css")
.Include("~/assets/admin/layout2/css/layout.css", new CssRewriteUrlTransform())
.Include("~/assets/admin/layout2/css/themes/default.css", new CssRewriteUrlTransform())
.Include("~/assets/global/plugins/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform())
.Include("~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",new CssRewriteUrlTransform()));
Hint from this SO Question
I have a wordpress site I am using ie conditional comments to load in an ie specific stylesheet in to. For some reason the changes made aren't being reflected in IE's rendering:
I have tried:
clearing browser history
deleting and re-uploading the file
ensuring the conditional comment is correct
closing all browsers and restarting
checking the file path
Adding php style now() to force refresh
And I've reached a point where I'm baffled.
What else can I try?
edit:
the code:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>K9 Heaven - 21st Century Dog Care</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.k9heaven.org.uk/wp-content/themes/k9_0.2/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="all" href="ie.css" />
<![endif]-->
<link rel="pingback" href="http://www.k9heaven.org.uk/xmlrpc.php" />
<!--[if lt IE 9]>
<script src="http://www.k9heaven.org.uk/wp-content/themes/k9_0.2/js/html5.js" type="text/javascript"></script>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="K9 Heaven » Feed" href="http://www.k9heaven.org.uk/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="K9 Heaven » Comments Feed" href="http://www.k9heaven.org.uk/?feed=comments-rss2" />
<link rel="alternate" type="application/rss+xml" title="K9 Heaven » Home Comments Feed" href="http://www.k9heaven.org.uk/?feed=rss2&page_id=49" />
<link rel='stylesheet' id='NextGEN-css' href='http://www.k9heaven.org.uk/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
<link rel='stylesheet' id='shutter-css' href='http://www.k9heaven.org.uk/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.2' type='text/css' media='screen' />
<script type='text/javascript' src='http://www.k9heaven.org.uk/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var shutterSettings = {
msgLoading: "L O A D I N G",
msgClose: "Click to Close",
imageCount: "1"
};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.k9heaven.org.uk/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://www.k9heaven.org.uk/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://www.k9heaven.org.uk/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.88'></script>
<script type='text/javascript' src='http://www.k9heaven.org.uk/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.05'></script>
<script type='text/javascript' src='http://www.k9heaven.org.uk/wp-includes/js/comment-reply.js?ver=20090102'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.k9heaven.org.uk/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.k9heaven.org.uk/wp-includes/wlwmanifest.xml" />
<link rel='index' title='K9 Heaven' href='http://www.k9heaven.org.uk' />
<link rel='prev' title='Contact' href='http://www.k9heaven.org.uk/?page_id=25' />
<meta name="generator" content="WordPress 3.2.1" />
<!-- All in One SEO Pack 1.6.13.3 by Michael Torbert of Semper Fi Web Design[395,435] -->
<meta name="description" content="K9 Heaven - 21st Century Dog Care" />
<meta name="keywords" content="K9,Heaven,21st,Century,Dog,Care" />
<link rel="canonical" href="http://www.k9heaven.org.uk/" />
<!-- /all in one seo pack -->
<meta name='NextGEN' content='1.8.3' />
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>
http://www.k9heaven.org.uk/
Feel free to close this thread, forgot that relative css paths in wordpress themes go to the site root, not the theme root. And won the stupid hat.
Is this
http://www.k9heaven.org.uk/ie.css
the sheet you're tyring to load? or is it this:
http://www.k9heaven.org.uk/wp-content/themes/k9_0.2/ie.css
The code above is referencing the first style sheet at the root of the site. That's non-standard. You should use <?php get_theme_root() ?> in the style sheet link in the theme files to target the style sheet in the theme folder.