magento 页怎么调用css?

html-css029

magento 页怎么调用css?,第1张

一、引用css的几种方法

Magento的CSS文件一般存放到 $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin | install}/<package name>/<theme name>/css目录下。也有些和全局js脚本配合使用的css文件存放在$MAGENTO_INSTALLED_FOLDER/js下,但是一 般我们不直接调用它们。

那么Magento应用又是如何引用CSS文件的呢?

1、 最一般的方法是配置全局block. 在page.xml中有

12345678<default> <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml"> <block type="page/html_head" name="head" as="head"> <action method="addCss"><stylesheet>css/menu.css</stylesheet></action> <action method="addItem"><type>skin_css</type><name>css/iestyles.css</name><params/><if>IE</if></action> </block></block> </default>

可以根据浏览器版本有条件地包含.css文件。和包含全局js文件不同,这里别忘记相对路径css/

2、.包含特定Theme包下phtml文件中的css文件:

和页面中包含js文件一样,示例如下:

1<link type="text/css" rel="stylesheet" href="<?php echo $this->getSkinUrl('css/reset.css') ?>" media="all"/>注意: getSkinUrl(..)是基于路径 $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin | install}/<package name>/<theme name>/的,所以别忘记了路径css/。

二、引用js的几种方法

Magento的JS文件存放有两个地方:

1). 系统级别的js目录位置 : $MAGENTO_INSTALLED_FOLDER/js,该目录下也存放相应js功能的css文件。

2). 特定于某套页面风格的目录下: $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin | install}/<package name>/<theme name>/js

那么Magento应用又是如何引用这些js文件的呢?

1. 引用系统级别的js文件

1、 最一般的方法是配置全局block. 在page.xml中有

01020304050607080910<default> <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="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action> </block></block> </default>

任何使用该template的页将自动包含$MAGENTO_INSTALLED_FOLDER/js/prototype目录下的prototype.js文件,根据浏览器版本有条件地载入js文件

2、在页面文件里包含系统级js文件

1<script type="text/javascript" src="<?php echo $this->getJsUrl('varien/accordion.js') ?>"></script>

一个Helper类做同样事情,该方法主要用来在某些页面包含额外的js文件。而这些文件在其他页面中却不常使用。下面是例子

1<?php echo $this->helper('core/js')->includeScript('varien/accordion.js') ?>

3、在Block类中使用下面的代码

将在page.xml中的名称为"head"的Block中说明的包含js的基础上,继续包含$MAGENTO_INSTALLED_FOLDER/js/mage/adminhtml/sales.js文件。

12345protected function _prepareLayout(){ $this->getLayout()->getBlock('head')->addJs('mage/adminhtml/sales.js') ..... return parent::_prepareLayout()}

CMS >Manage pages >你的页面 >Design

加入下面代码,根据你自己的情况改文件名

<reference name="head">

<action method="addCss"><stylesheet>css/skin.css</stylesheet></action>

</reference>

addCss这个action 会自动去找你的主题下面的css/skin.css

第一步:

打开

E:\xampp\htdocs\magento\skin\frontend\default\bluescale\css\styles.css

在底部添加返回按钮css代码,如下:

/* Back Button */

.product-back {

text-align: right

padding: 8px 24px 10px 0

}

第二步:

打开

app\design\frontend\default\default\template\catalog\product\view.phtml

在适当的地方添加红色部分代码就可以了。(红色代码可以放在你自己想要的位置,不一定是和我这样。)

//]]>

</script>

</div>

<div class="product-back">

<a href="javascript:history.back()" class="form-button-alt" ><?php echo $this->__('Back') ?></a>

</div>

<div class="product-collateral">

第三步:

保存更改的文件,刷新你的浏览器。