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.
Related
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
I want to change the blog layout.I want to order this in title then publish date,picture and then description.but I don't know how to do this.can you help me plaese?
Please read up on some Orchard documentation about placement, alternates and shapetracing.
The simplest thing you can do, for just changing the order of rendering, is changing the placement.info of your theme to something like this:
<Match ContentType="Blog">
<Place Parts_Title="Content:1" />
<Place Parts_MetaData="Content:2" />
<Place Fields_MediaLibraryPicker="Content:3" />
<Place Parts_Blogs_Blog_Description="Content:4" />
</Match>
If you want to have full control over the rendering of the layout you can create an alternate. Use the shape tracer to find the correct alternate (probably something like Content-Blog.cshtml), and tweak your stuff in there.
In my plugin/RCP I have defined my own contributions to Eclipse universal intro with page definitions inside the toplevel xml (the one pointed to by the "config" attribute to the "configExtension" element of the org.eclipse.ui.intro.configExtension extension point), which works.
However, I'd like to split out the page definitions to separate files for simpler editing and managing.
So I start out with (in my intro/introcontent.xml):
<page id="myfirststeps" style="$theme$/html/firststeps.css" style-id="page">
<!-- Page content here -->
</page>
And this works. The intro displays the page content correctly. Then I move the page content to firststeps.xml:
<?xml version="1.0" encoding="utf-8" ?>
<introContent>
<page id="myfirststeps" style="$theme$/html/firststeps.css" style-id="page">
<!-- Page content here -->
</page>
</introcontent>
and change the toplevel xml to say:
<page id="myfirststeps" content="intro/firststeps.xml" />
does not work. Running this creates a "File not found" exception, and the file indicated is pointing into the Eclipse installation (like "C:\Program Files\Eclipse") and not, as I would have expected into my plugin. And sure enough, if I copy my xml-file there it finds it.
Any pointers? Is there some trick about the content attribute and how it resolves the path to the file?
Or is there a way to specify a path to the plugin directory in the content attribute?
I'm using Eclipse 3.7.
Turned out that the solution was simple. The file reference in the content attribute is relative to the referencing xml-file, not relative to the plugin-root.
So all I had to do was to remove the "intro"-part of the path. From
<page id="myfirststeps" content="intro/firststeps.xml" />
to
<page id="myfirststeps" content="firststeps.xml" />
And all is well.
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'm using Magento 1.5.0.1 and I want to move my advanced search form to the sidebar for my 2columns-left template.
What I've tried was this:
<reference name="left">
<block type="catalogsearch/advanced_form" name="catalogsearch_advanced_form" template="catalogsearch/advanced/form.phtml"/>
<block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>
</reference>
But unfortunately it doesnt show up.
When i browse to mywebsite/catalogsearch/advanced/ the form shows up in the sidebar so that goes well.
How can i change it so it always shows up in the sidebar?
Thanks in advance!
What happens if you insert into your template:
<?php echo $this->getLayout()->createBlock('catalogsearch/advanced_form')->setTemplate('catalogsearch/advanced/form.phtml')->toHtml() ?>
Also pay attention that .js files are loaded for calendar.