Suppose a site is very configurable, and it has a few orthogonal settings which are all easily controlled with alternate stylesheets. For example, its main menu can be at the top or on the left, and its background colour can be red or blue.
Is there a way to define multiple sets of alternate stylesheets so that we can replace the 'theme' for each set?
I'm looking for something like this:
<link rel="stylesheet" set="background" title="red" />
<link rel="alternate stylesheet" set="background" title="blue" />
<link rel="stylesheet" set="main-menu" title="left" />
<link rel="alternate stylesheet" set="main-menu" title="top" />
No you can't do that. The three ways are:
Have a set of sheets on the server, and serve the correct one
Use inline CSS
Combination of both. Load all unchangable classes in an external CSS, then use an inline style sheet to set the customisable values.
Related
Is understand there is an advantage of using asset helper instead of relative URL like when visiting /blog/posts relative won't fetch the styles but using asset helper will. But I currently see no difference of using absolute and asset helper. Do we have situations where asset will work and absolute won't?
<link rel="stylesheet" href="/style.css" />
<link rel="stylesheet" href="{{ asset('style.css') }}" />
I recently installed Magento 2.3 and extended the default Magento Luma theme by creating a custom theme.
I'm trying to override type attributes of default JavaScript and CSS files in the <HEAD>.
In other words, I want this:
<link rel="stylesheet" type="text/css" media="all" href="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/calendar.css" />
<script type="text/javascript" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/requirejs/require.js"></script>
<script type="text/javascript" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/polyfill.js"></script>
to become this:
<link rel="stylesheet" type="text/css/custom" media="all" href="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/calendar.css" />
<script type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/requirejs/require.js"></script>
<script type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/polyfill.js"></script>
Notice the change from text/javascript to text/javascript/custom. Similar for CSS.
I tried updating my default_head_blocks.xml file like so:
<?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="mage/calendar.css" type="text/css/custom"/>
<script src="requirejs/require.js" type="text/javascript/custom"/>
<script src="mage/polyfill.js" type="text/javascript/custom"/>
</head>
</page>
But what I get is:
<link rel="stylesheet" type="text/css" type="text/css/custom" media="all" href="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/calendar.css" />
<script type="text/javascript" type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/requirejs/require.js"></script>
<script type="text/javascript" type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/polyfill.js"></script>
Notice the double type declarations instead of single.
Is there a way to achieve what I described i.e. overriding type attributes for JavaScript and CSS files?
P.S. I know why I need to do this, I'm just not able to explain fully here.
I couldn't find another option to do this besides using root.phtml. Here are the steps:
Create a templates folder under Magento_Theme folder in your theme space
Create root.phtml file inside this directory [templates]
Open <Magento_root>/vendor/magento/module-theme/view/base/templates/root.phtml, then copy and paste its contents into the root.phtml in your theme space
Create a function to modify $headContent. I used preg_replace with a regular expression to find the duplicate references and then remove what I did not need. It was just a few lines of code.
Upload, then flush cache
What is the best way to order a CSS file of a custom theme at the bottom of in Magento 2. By example, I would like place CSS after or before an other.
Thanks
Unfortunately there is no way to position your CSS files. You can however add the media attribute to the css element. This will add it to the end of all the included CSS in the head.
<head>
<css src="css/styles.css" media="all" />
</head>
I would like to make a .png alternative favicon image for non-IE browsers to read but I don't know what dimensions it should be. I looked at the .ico file in Photoshop and there are several different several dimensions to choose from. Presumably, I would make it the largest dimension of all the favicons in the file but I don't want to presume anything.
<link rel="icon" type="image/png" href="http://www.mydomain.com/content/favicon.png" />
<!--[if IE]>
<link rel="shortcut icon" href="http://www.mydomain.com/content/favicon.ico" type="image/vnd.microsoft.icon" />
<![endif]-->
Using the syntax <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>, as long as you convert your favicon to a .ico format (I prefer to use this site as it also converts 32 bit transparent .PNG files) then all modern browsers should support it.
Some browsers require you to close the browser down before they cache the icon, but they display eventually.
As for size, they're displayed at 16 x 16 pixels, though most converters (such as the one in the link above) will resize them if they're larger.
Hope this helps!
I have a site with a fairly complex structure of Smarty templates. For this question, suppose I have an outer template which includes (with {include}) one or more inner templates that are optionally included, depending on the data being displayed:
Outer Template (with <html>, <head>, and <body> tags)
- Inner Template A (various content)
- Inner Template B (more content)
Sometimes, one of these inner templates needs to reference additional CSS files. I would prefer to have these within my <head> tag, for efficiency and to avoid FOUC. Is it possible to set some variable from Inner Template A that adds the appropriate <link> tag to <head> within Outer Template?
I was able to find someone who created a module to do something similar, but I don't know how I would set the necessary variables from the template to make it work in my case. I am using Smarty 3.
I had a similar issue some time ago. My solution is maybe dirty but maybe it could help you.
$css = '<link rel="stylesheet" type="text/css" href="/css/file.css">';
$smarty->registerFilter('output',create_function('$output','return preg_replace(\'/(<\/head>)/i\',\''.$css.'$1\',$output,1);'));
If you wrap this in a function, you can simply add css to your head section from everywhere.
Idea 1:
Wrap the same logic around the style sheet in your head that you use for displaying template A or B.
Idea 2:
Template 1 (Top Level):
<link rel="stylesheet" type="text/css" href="whatevs1">
{block name="childStyles"}
{/block}
Template 2 (Child Template):
{block name="childStyles"}
<link rel="stylesheet" type="text/css" href="whatevs2">
{/block}
A side note:
I understand the want to be W3 compliant using includes for stylesheets in HEAD but including them within the body wont break your html, even in IE7...
I encountered a similar obstacle a few years ago. Since smarty templates are almost all the time filled with php code, my solution is just declaring a special variable/array for this purpose in php, then looping through the array in your head template / outer template.
Example:
$your_special_css = array('css1.css', 'css2.css');
Somewhere else in your code...
$your_special_css[] = 'css3.css';
...and then give it to the template:
$your_smarty_template->assign('your_css', $your_special_css);
Then your outer template would look like this:
<head>
...
{foreach $your_css as $css}
<link rel="stylesheet" type="text/css" href="/css/{$css}">
{/foreach}
...
</head>
Same works for jscript-files, too.