I want to add if condition in layout xml file to allow css to load in below scenarios.
To load css file only in home page alone.
To load css by devices(Desktop, mobile & tab)?
Please let me know how to add condition in layout xml file?
<head>
<css src="fonts/Lato/lato.css" /> <!-- Should be loaded in website home page only -->
<css src="css/styles-mobile.css"/> <!-- Should be loaded in mobile devices only -->
</head>
To load css file only on home page you need to do this things.
You can add below code in you custom theme
app\design\frontend\<vendor>\<theme>\Magento_Theme\layout\cms_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="fonts/Lato/lato.css"/>
</head>
<body>
</body>
</page>
And add lato.css into app\design\frontend\<vendor>\<theme>\web\css\fonts\Lato.
Related
I want to add a few links in a Magento 2 store's head element, to serve a favicon bundle (OS specific link icons etc). In my theme directory I've added a new default_head_blocks.xml:
./app/design/frontend/MyTheme/std/Magento_Theme/default_head_blocks.xml
With following content:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<meta name="theme-color" content="#ffffff">
</head>
Problem is, these tags never show up in the html. I've added a default.xml in the same folder to remove the standard Report Bugs link and that link vanished faster than my salary on a Friday.
I can also browse the image URLs manually to get the icon images. But still, the links never show up.
What am I missing here?
PS. Must point out that the theme inherits Blank.
Problem solved. The link elements shall have a src attribute instead of a href. And if one element fails, all fail. This code works:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link rel="apple-touch-icon" sizes="180x180" src="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" src="favicon/favicon-32x32.png">
<meta name="theme-color" content="#ffffff">
</head>
I am new in Magento and using the current version of Magento ie. 2.2.0.
I have my custom css file which I need to call in the website but the problem is that I don't know where to keep that css file or how to call that file.
Where do I place the css, and how do I use it?
The documentation is able to answer that. See here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-themes.html.
Here's an excerpt from it:
The recommended way to do this is adding an extending
default_head_blocks.xml in your theme, and including the required
stylesheets in this file.
Your custom default_head_blocks.xml should be located as follows:
<theme_dir>/Magento_Theme/layout/default_head_blocks.xml. To include a
CSS file, add the <css src="<path>/<file>" media="print|<option>"/>
block in <head> section in a layout file. <path> is specified relative
to the theme web directory (/web) For example, the
following illustrates how stylesheets are included in the default
Blank theme:
<Magento_Blank_theme_dir>/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/styles-m.css" />
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print" />
</head>
</page>
If you are using the Luma theme, you could edit it directly, but it's best to create your own theme that extends it and add the css there. See here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html.
I am getting the following error in Chrome browser
Fatal error:Theme css could not load after 20 sec
I am loading theme css in <head> tag using the following html
<link rel="stylesheet" type="text/css" href="${copart.url("css/galleria/galleria.classic.css")}" name="galleria.classic">
and loading galleria js separately in <body> tag
<group name="galleriaJs">
<js minimize="false">/galleria/galleria-1.3.2.min.js</js>
<js minimize="false">/galleria/themes/classic/galleria.classic.min.js</js>
</group>
I am opening galleria in modal window and loading all the css and js on page in parent window on page load.
As I am loading galleria.classic.min.js using script tag as per my understanding I don't need to load galleria.classic.min.js' separately in my js file using the following method:
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Your help is greatly appreciated.
Actually I need to make an magento site non-responsive, I'm trying to find the viewport meta tag in head file but it's not there. Please let me know where can I find this?
Please check this file.
\app\design\frontend\base\default\template\page\html\head.phtml
But if you are using the custom theme, you must find out that file in your theme.
So like this :
\app\design\frontend\default[Your theme]\template\page\html\head.phtml
Override or create file in theme and add below code in your theme
/vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml
to
/app/design/frontend/Your/Theme/Magento_Theme/layout/default_head_blocks.xml
and add your viewport tag in section
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<head>
<!-- your meta viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />
</head>
</page>
this will update your default magento tag
Is it possible to have a portable area feed into a ASP.Net MVC 3 razor section? I have a section in my for placing JS files, CSS, fiels, etc. I want to be able to target the head section from portable areas for any JS, CSS files the portable area needs. Is this possible?
Thanks
Tom
You can use master page concept just like _Layout.chtml to put portable sections. (It event works for header)
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet"
type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")"
type="text/javascript"> </script>
#{
//access your portable section here.
}
</head>
<body>
#RenderBody()
</body>
</html>