I'm using Magento 1.9, and trying to make a Magento theme.
Here is my app/design/frontend/{MY_PACKAGE}/default/template/layout/page.xml:
<?xml version="1.0"?>
<layout version="1.0">
<default>
<label>All Pages</label>
<reference name="head">
<action method="addCss"><stylesheet>css/base.css</stylesheet></action>
</reference>
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>
<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">
</block>
</default>
</layout>
And this is app/design/frontend/{MY_PACKAGE}/default/template/page/1column.phtml:
<!DOCTYPE html>
<html>
<head>
<?php echo $this->getChildHtml('head'); ?>
</head>
<body>
<?php echo $this->getChildHtml('header'); ?>
<div class="middle">
<div class="col-main"><?php echo $this->getChildHtml('content'); ?></div>
</div>
<?php echo $this->getChildHtml('footer'); ?>
<?php echo $this->getChildHtml('before_body_end'); ?>
</body>
</html>
I can't get the base.css attached to the page; it does not appear in the source code. What did I miss?
p.s. I disabled the cache in Cache Management already; No Design Change applied as well.
UPDATE The page's <head> is rendered as:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home page</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="NOINDEX,NOFOLLOW" />
<link rel="icon" href="http://www.example.com/dev/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.example.com/dev/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = 'http://www.example.com/dev/js/blank.html';
var BLANK_IMG = 'http://www.example.com/dev/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://www.example.com/dev/skin/frontend/base/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.example.com/dev/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.example.com/dev/skin/frontend/base/default/css/print.css" media="print" />
<script type="text/javascript" src="http://www.example.com/dev/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/varien/js.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/varien/form.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/varien/menu.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/mage/translate.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/mage/cookies.js"></script>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://www.example.com/dev/skin/frontend/base/default/css/styles-ie.css" media="all" />
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://www.example.com/dev/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/skin/frontend/base/default/js/ie6.js"></script>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
Mage.Cookies.path = '/dev';
Mage.Cookies.domain = '.www.example.com';
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
optionalZipCountries = ["HK","IE","MO","PA"];
//]]>
</script>
<script type="text/javascript">//<![CDATA[
var Translator = new Translate([]);
//]]></script></head>
I don't see where they do put the layout in the template folder there but mainly, those information are outdated on your 1.9 version. I can recommend you to read the version you can find here.
But for your specific problem, layout have to be in
app/design/frontend/{MY_PACKAGE}/default/template/layout/
But you also have to understand the fallback mechanism of Magento (further reading here) which basically declare a hierarchy of designs.
This way, if Magento does not find a file in the selected design, it is going to look a it in the next hierarchical design.
As from 1.9 the hierarchy changed.
So before 1.9 the hierarchy was static and was like that
/skin/frontend/{MY_PACKAGE}/{MY_THEME}/
/skin/frontend/{MY_PACKAGE}/default/
/skin/frontend/base/default/
As from 1.9 the fallback is dynamic and can be configured in each theme.
For example, if we take the theme shipped with Magento in app/design/frontend/default/iphone you would find this file : etc/theme.xml which stands
<theme>
<parent>default/default</parent>
</theme>
So if Magento does not find a file in the iphone theme, it is going to look at it in the default theme both under the default package. Since the file etc/theme.xml in the package default and theme default stands it as no parent (<parent/>) the fallback will end there but could have go further if this theme add defined a parent.
That is also why I asked for the rendered <head> of your site because, if the base.css was misplaced, you would have found a call to a base.css but in the wrong location (e.g. a call for http://www.example.com/skin/frontend/base/default/css/base.css)
So, now you know that, you have to know that the layout xml page.xml is responsible for the whole structure of all of your page.
So if you leave your xml like that, you are overriding the page.xml of your Magento.
To do what you want I recommend you to use a file local.xml under app/design/frontend/{MY_PACKAGE}/default/template/layout/ with the exact same code you put in your page.xml and remove that page.xml. That way it should work.
you must add the type , also check if your css its in the correct path
example of page.xml
<default translate="label" module="page">
<label>All Pages</label>
<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addJs"><script>prototype/window.js</script></action>
<action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
<block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
<!-- Remove items which the RWD package is not dependent upon -->
<action method="removeItem"><type>skin_js</type><name>js/ie6.js</name></action>
<!-- Add vendor dependencies -->
<action method="addItem"><type>skin_js</type><name>js/lib/jquery-1.10.2.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
<action method="addLinkRel"><rel>stylesheet</rel><href>//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600</href></action>
<action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action>
Simple add below code in your 1column.phtml.
app/design/frontend/{MY_PACKAGE}/default/template/page/1column.phtml:
<link rel="stylesheet" type="text/css" href="<php echo $this->getSkinUrl('css/base.css');?>" media="all" />
and add upload base.css to:
/skin/frontend/MY_PACKAGE /default/css
Delete all Cache then refresh
Related
it works on win7, but I am on win8 with firefox 38.0.1 (latest). I can't click on "/checkout/onepage/" button. It does work with chrome though..
Does anyone know what's going on ?
Thanks.
Oddly enough, the problem was solved by reparing firefox...
Create a new .js file for eg. no-conflict.js and add the following content on it:
var $j = jQuery.noConflict();
And include your no-conflict.js into your theme page.xml file
<action method="addJs"><script>no-conflict.js</script></action>
Then write your jQuery like as follows
$j(document).ready(function(){ // write your code here });
after including this file into your theme, press ctrl+U and view page source. Is all links are working of jQuery. If not then check the path and do correct them.
Looks like your javascript is not loading, either permissions errors or the files are inaccessible somehow. This is the head of the checkout/onepage of my install of 1.8. Note that I can open any of the scripts in a new tab:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checkout</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="*" />
<link rel="icon" href="http://ce-1.8.1.local/skin/frontend/default/default/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://ce-1.8.1.local/skin/frontend/default/default/favicon.ico" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = 'http://ce-1.8.1.local/js/blank.html';
var BLANK_IMG = 'http://ce-1.8.1.local/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/default/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/default/default/css/print.css" media="print" />
<script type="text/javascript" src="http://ce-1.8.1.local/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/js.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/form.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/menu.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/translate.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/directpost.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/captcha.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/centinel.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/weee.js"></script>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/default/default/css/styles-ie.css" media="all" />
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://ce-1.8.1.local/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/skin/frontend/base/default/js/ie6.js"></script>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
Mage.Cookies.path = '/';
Mage.Cookies.domain = '.ce-1.8.1.local';
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
optionalZipCountries = ["HK","IE","MO","PA"];
//]]>
</script>
<script type="text/javascript">//<![CDATA[
var Translator = new Translate([]);
//]]></script>
I am unable to make CLEditor work for me. Please find the scipt files being adding in _Layout.cshtml
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/jquery.cleditor.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.cleditor.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.cleditor.min.js")" type="text/javascript" ></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
#Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css"));
Partial View has given below code.
<textarea id="input" name="input"></textarea>
<script type="text/javascript">
$("#input").cleditor();
</script>
This is happing in all the browsers.
Per their site, "It is recommended that you install these files into a folder called cleditor with a subfolder called images."
I placed the folder in Scripts and then used this:
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Scripts/cleditor/jquery.cleditor.css")" />
<script type="text/javascript" src="#Url.Content("~/Scripts/cleditor/jquery.cleditor.min.js")"></script>
I created NuGet package and try to install this package. In during instalation I get error:
"Name cannot begin with the '~' character, hexadecimal value 0x7E. Line 6, position 31."
My package consist _Layout.cshtml (with _Layout.cshtml.transform name) file with following content:
<head>
#RenderSection("ReportsHeader", false);
</head>
When I deleted this file the package was installed success.
in mvc project in _Layout.cshtml file in head tag:
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
If I deleted
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
package installed but _Layout.cshtml file not modified.
How I can modify _Layout.cshtml file ?
or my be I can modify _Layout.cshtml file in install.ps1 file ?
It looks like the problem is with your quotation marks. Try using ' instead of " for the inner quotable sections something like this:
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content('~/Content/Site.css')" rel="stylesheet" type="text/css" />
<script src="#Url.Content('~/Scripts/jquery-1.5.1.min.js')" type="text/javascript"></script>
<script src="#Url.Content('~/Scripts/modernizr-1.7.min.js')" type="text/javascript"></script>
</head>
Not sure if that syntax will work, but the use of nested " quotes looks like trouble.
I notice Magento uses prototype.js:
<script type="text/javascript\" src="http://www.example.com/js/prototype/prototype.js"></script>
My question is how I can change the URL to a Google hosted version of prototype.js which is minified.
I tried to change the URL in page.xml but it doesn’t work as the URL always starts with http://www.example.com
Any idea how to specify an absolute URL for this?
Thanks a lot!
The addJs, addCSS, etc. action methods are specifically designed for local files. You can't use them to add files at external URLs to the page. Instead, you'll need to add the URLs directly to Magento's head template.
You can do this by copying the base head template at
app/design/frontend/base/default/template/page/html/head.phtml
To your theme's template folder
app/design/frontend/default/your-theme/template/page/html/head.phtml
If you look at that template, you'll see the HTML and PHP template code used to render the head element of all Magento HTML pages.
<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<title><?php echo $this->getTitle() ?></title>
<meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<link rel="icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
<![endif]-->
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>
You can simply add HTML tags to this file to add any additional script tags you need. Don't forget to use the removeItem method to ensure the local prototype.js is NOT rendered.
If you wanted to get really fancy, rather than edit the template you could use Layout XML to add new scripts with something like this
<default>
<reference name="head">
<block type="core/text" name="cdn_prototype">
<action method="setText">
<text><![CDATA[<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>]]></text>
</action>
</block>
</reference>
</default>
(advice here is 1.6.1 specific, but should apply to most, if not all, versions of Magento)
You'll find an extension for this purpose at the ever-helpful Inchoo blog (link).
If you read through the post, it will help understand some of the Block and layout architecture that Magento uses too.
This Magento extension allows to include external JS and CSS files via layout XML files.
After installing the extension, put the following line in page.xml:
<action method="addItem"><type>absolute_js</type><name>http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js</name>
Don't forget to use the removeItem method to ensure the local prototype.js is NOT rendered.
Link to the source directly:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
Or via Google API:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("prototype", "1.6.0.2");</script>
Read the manual, Search online before asking
I am working on a richface application and trying to evaluate the following xpath with xpather on firefox3.5. XPather does not evaluate any of the xpath though the same xpath works perfectly fine on firefox 3.6.
The page which I am testing is like -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="http://openfaces.org">
<head>
<script src="some source" type="text/javascript"></script>
<script src="some source" type="text/javascript"></script>
<link class="component" href="some source" rel="stylesheet" type="text/css" />
<link class="component" href="some source"
media="rich-extended-skinning" rel="stylesheet" type="text/css" />
<link class="component" href="some source" rel="stylesheet" type="text/css" />
<script type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script>
<link type="text/css" href="some source" rel="stylesheet"/>
<body class="Banner" onresize="setTreePnlHeight()" onload="loadApp();">
<input type="hidden" id="dsTreeScrollPos" value="0" />
<div id="a" class="application"><form id="form" name="form" method="post" action="...">
....
</body>
</html>
If I use xpather(v1.4.5) to evaluate the simple xpath on FF3.5 like //input, it does not return any result. Is namespace causing this issue? How can i verify my xpath on FF3.5?
simple xpath on FF3.5 like //input, it
does not return any result. Is
namespace causing this issue?
Yes. If you look at your document, you have a default namespace definition there.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="http://openfaces.org">
This means that //input is looking for an element <input> without a namespace, whereas you should look for <input> that is in the http://www.w3.org/1999/xhtml namespace. You need to define that namespace and bind it to a prefix and then use that prefix in your XPath. like //x:input