Is there a way to include inline styles after the <title> tag as shown on this image:
If I edit the file default_head_blocks.xml I can only get this to show after the merged css file which defeats the purpose of using critical-css. One possible way is to add this bit of code into default.xml but then the inline css is rendered right at the top of <head> before all the <meta> tags so I'm not sure if this is bad practice or not
<referenceBlock name="require.js">
<action method="setTemplate">
<argument name="template" xsi:type="string">Magento_Theme::/header/inline-css.phtml</argument>
</action>
</referenceBlock>
Since Magento 2.3 (or 2.2?) Magento has an option for Critical Css, here is the doc
In your (custom) theme you can define web/css/critical.css and then enable using critical css.
bin/magento config:set dev/css/use_css_critical_path 1
This css file will be injected as inline style into the head and the rest of styles will be loaded asynchronously.
AFAIK, placing the critical css in any position inside the head will do the job. The point is to load the other styles asynchronously. Otherwise the browser will still wait till all css files are loaded before loading the contents (body tag).
Please refer to this and this
Related
Since the release of the security patches in August 2021 that prevents Cross-Site Scripting via Rich-Text Content I noticed that the output of HTML Content Elements suddenly changed in our projects. Some tag attributes and tags got removed by the newly introduced HTML Sanitizer (when the template is modified so that t3:// style TypoLinks get rendered).
So simply overriding the default Html.html Fluid Template, changing the <f:format.raw> to <f:format.html> and adding a html decoding like in the following example is no longer sufficient.
<f:section name="Main">
<f:comment> We use this to render links and other stuff in html elements </f:comment>
<f:format.htmlentitiesDecode>
<f:format.html parseFuncTSPath="lib.parseFunc">
{data.bodytext}
</f:format.html>
</f:format.htmlentitiesDecode>
</f:section>
The easiest way to prevent changes in your html codes output provided by HTML Content Elements is to disable the sanitizer globally by adding lib.parseFunc.htmlSanitize = 0 to your TypoScript config, what is not ideal.
How can I disable the parseFunc.htmlSanitize only for this purpose?
Or is there an other solution to render TypoLinks within HTML Content Elements?
Note: You don't need to disable the HTML Sanitizer if you do not override the Html.html template!
Simply make a copy of lib.parseFunc and disable the sanitizer in this copy.
lib.parseHtmlFunc < lib.parseFunc
lib.parseHtmlFunc.htmlSanitize = 0
Then use this lib in your Html.html template.
<f:section name="Main">
<f:comment> We use this to render links and other stuff in html elements </f:comment>
<f:format.htmlentitiesDecode>
<f:format.html parseFuncTSPath="lib.parseHtmlFunc">
{data.bodytext}
</f:format.html>
</f:format.htmlentitiesDecode>
</f:section>
Thanks to #OliverHader for bringing me to the right track.
I have followed every tutorial that came up in Google search to add a simple CSS styling to a Magento CMS page.
I simply want to add the following CSS
.list-checkmark{
list-style-image: url("../images/Check-Mark-2.png");
margin-left: 3em;
}
to my page http://demo.txsystems.com/index.php/integration-service This is a CMS page, and I have added the following
<reference name="head">
<action method="addItem">
<type>skin_css</type><script>MyCss.css</script>
</action>
</reference>
To the layout update XML of this page in Magento admin.
I have added the file myCss.css to /var/www/html/skin/frontend/default/hellogamez/css
Please can someone help me to understand, what else I am missing, the said image is in the appropriate image folder.
And of course in the CMS page here is the UL list that I am trying to apply the formatting, I am in Magento 1.7
<ul class="list-checkmark">
<li>PCs (laptop, desktop, tablet)</li>
<li>Portable and Desktop Printing Systems</li>
<li>First Responder Devices</li>
<li>Vending Machines</li>
<li>Handhelds</li>
<li>Medical Devices and Testing Equipment</li>
<li>Multifunctional Printers</li>
<li>Industrial Control Systems</li>
<li>Storage and Locker Systems</li>
<li>Event Ticketing</li>
<li>Asset Tracking</li>
<li>Commercial Ovens</li>
</ul>
Thanks
The idea is good, but looks like you may be pulling from the wrong spot.
<reference name="head">
<action method="addItem">
<type>skin_css</type><script>MyCss.css</script>
</action>
</reference>
...will pull from the core code folders.
Rather use:
<reference name="head">
<action method="addCss"><stylesheet>css/MyCss.css</stylesheet></action>
</reference>
...which will load from the location you described:
skin/frontend/default/hellogamez/css/MyCss.css
...and inject into your pageload in the same cluster as the other css calls.
Then make sure your image is in the images folder on the same level as that css folder ie:
skin/frontend/default/hellogamez/images/Check-Mark-2.png
Also note that if you use the local.xml method to have it load site wide, you can use this same code snippet.
In Adobe AEM ( formerly CQ5 ) the foundation component parsys' design_dialog allows the user to set the "Cell Padding". Whatever value is entered into the text field will show up in the design css.
For example:
Given that the current page is using /etc/designs/my-design the page output will include reference to the /etc/designs/my-design.css stylesheet virtual path.
If the user configured the parsys cell padding to be 30px then the my-design.css file will include the following:
.page_full .par div.section {
padding: 30px;
}
The string "30px" is stored in the jcr:content/page/par/section attribute called div.padding, however, I can't figure out how the parsys.jsp injects it into the my-design.css.
EDIT:
To be clear, the currentDesign.writeCssIncludes(pageContext); call in the foundation page headlibs.jsp is the code that sets up the design css includes like so:
<link href="/etc/designs/my-design/static.css" rel="stylesheet" type="text/css"/>
<link href="/etc/designs/my-design.css" rel="stylesheet" type="text/css"/>
However, it is not clear how to get your own CSS included in the response body of the /etc/designs/my-design.css request.
The parsys doesn't really inject the styles, but when you change the design parameters for the parsys component in they are stored the design page and when this is rendered as css by a Design class and the output is contains those updates.
How the design CSS is rendered
The design information is stored in the /etc/designs/my-design as you noticed. This component for this page supports a css rendition of the information contained.
You can track the source of the rendition using the CQ development tools included in the product...
If you take a look at your design page in crx/de or crx/explorer, you'll notice it has sling:resourceType of wcm/core/components/designer.
That will be rendered by the following java class /libs/wcm/core/components/designer/designer.css.java. You can take a look at this file in crx/de also. I'm not sure the license in that file would allow me to post a snippet here, but you should be able to find it easily yourself.
The class takes the page Resource and adapts the object to a com.day.cq.wcm.api.designer.Design instance.
Looking at the dependency finder in the web console, the Design class is provided by the cq-wcm-api bundle.
<dependency>
<groupId>com.day.cq.wcm</groupId>
<artifactId>cq-wcm-api</artifactId>
<version>5.5.0</version>
<scope>provided</scope>
</dependency>
This is provided by the jar: /libs/wcm/core/install/cq-wcm-api-5.5.0.jar, which is bundled with CQ.
Customising the design CSS
Looking at what you are trying to achieve...
you are able to customise the content of the design page (this is normally by adding a design dialog to the component you are working with) adding any properties/css attributes associated with that component.
For an example of this take a look at logo component within the geometrixx design (/etc/designs/geometrixx/jcr:content/contentpage/logo). This already has a div img.margin property which translates to
.contentpage div.logo img {
margin: 1px;
}
in the output css (/etc/designs/geometrixx.css?cacheKiller=xyz).
Adding a property named div img.border with a value of 5px solid red to this node will output css as:
.contentpage div.logo img {
margin: 1px;
border: 5px solid red;
}
Considering your example, your design content node at /etc/designs/my-design should look something like this:
+jcr:content
+ page_full
+ par
+ section
- div .margin = 30px
Or in the repository XML format, like this:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Page">
<jcr:content
cq:lastModified="{Date}2013-01-13T17:22:51.339+01:00"
cq:lastModifiedBy="admin"
cq:template="/libs/wcm/core/templates/designpage"
jcr:primaryType="cq:PageContent"
jcr:title="design"
sling:resourceType="wcm/core/components/designer">
<page_full jcr:primaryType="nt:unstructured">
<par jcr:primaryType="nt:unstructured">
<section
jcr:primaryType="nt:unstructured"
div_x0020_.margin="30px"/>
</par>
</page_full>
</jcr:content>
</jcr:root>
Design dialogs (which should be used to customise design content) are described to some extent on the Developing Components page. You can find the design dialog (for an example) of the logo component mentioned above at /libs/foundation/components/logo/design_dialog.html
This change in the CSS is done in the parsys using the Class IncludeOptions. If you look at the parsys.jsp in foundation components you'll come across usage of this class.
The method getCssClassNames() of the IncludeOptions class returns a modifiable set of css class names to be added to the div tag.
Thus whenever the section field is authored for a parsys, it is included in the dynamically added to the component's CSS and then the resource is included in the page.
I'm using Struts2. By default, when using the struts form, the label and the choices are displayed in the same line. How can I do to make the label in a line, and every radio choice in its own line? Is there a way by CSS? I need your help guys. Here it is how my form looks like. Thank you!
<s:form action="resultAction" namespace="/">
<s:radio label="Gender" name="yourGender" list="genders" value="defaultGenderValue" />
<s:submit value="submit" name="submit" />
</s:form>
Which theme are you using as by default struts2 use xHtml theme and which generate certain set of Tables to render the view.
Struts2 use free-marker template to render the HTML for tags and you can customize theme as per your choice or can create you rown theme.
Try with simple theme which will not generate any table or div and will render plain HTML for you are you have all way to apply your custom CSS to change/customize the view.
You can set the theme per page basis on for the whole application for per page basis add the following line in the head section
<s:set name="theme" value="'simple'" scope="page" />
for whole application you can either set in struts.properties file or in struts.xml file though the second one is more preferable.
<constant name="struts.ui.theme" value="simple" />
If you want to play with theme here is the link for same
struts-2-themes
I have a custom tag like this:
<content name="Home" />
When I click the Html button of the TinyMCE it was replaced with
<content name="Home"></content>
Currently my settings are: valid_elements: "content[name]"
What should I put in the valid_elements variable so that the tag will will be:
<content name="Home" />?
I am not perfectly sure, but i think this issue is not to be solved easily.
I do not think that you can configure this behavior because it is browser related and not tinies fault. Looks like the browser treats your custom html element like an html element with an opening and a closing part on default, even though you want to have a single part html element like a br-tag. The only way - i see - is to get the browser to accept your custom thlm elment as one part html element, which i do not know how to do.