oscommerce 默认采用Jquery UI 实现各box的效果。
通过添加修改CSS 能覆盖原始效果实现子定义
我们以includes/modules/bm_information.php 为例子
可以看到
function execute() { global $oscTemplate; $data = '<div class="ui-widget infoBoxContainer">' . ' <div class="ui-widget-header infoBoxHeading">' . MODULE_BOXES_INFORMATION_BOX_TITLE . '</div>' . ' <div class="ui-widget-content infoBoxContents">' . ' <a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . MODULE_BOXES_INFORMATION_BOX_SHIPPING . '</a><br />' . ' <a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . MODULE_BOXES_INFORMATION_BOX_PRIVACY . '</a><br />' . ' <a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . MODULE_BOXES_INFORMATION_BOX_CONDITIONS . '</a><br />' . ' <a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . MODULE_BOXES_INFORMATION_BOX_CONTACT . '</a>' . ' </div>' . '</div>'; $oscTemplate->addBlock($data, $this->group); }
一个box 就是 一个外部div 内嵌两个DIV: 一个infoBoxHeading 和 一个 infoBoxContents
其中ui-widget, ui-widget-header, ui-widget-content 为Qjquery UI CSS样式
infoBoxContainer, infoBoxHeading, infoBoxContents 为osCommerce 默认stylesheet.css 中定义的CSS
了解了结构 加一个ID即可方便的定义自己的CSS
代码改写如下
function execute() { global $oscTemplate; $data = '<div class="infoBoxContainer" id="infobox">' . ' <div class="infoBoxHeading">' . MODULE_BOXES_INFORMATION_BOX_TITLE . '</div>' . ' <div class="infoBoxContents">' . ' <a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . MODULE_BOXES_INFORMATION_BOX_SHIPPING . '</a><br />' . ' <a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . MODULE_BOXES_INFORMATION_BOX_PRIVACY . '</a><br />' . ' <a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . MODULE_BOXES_INFORMATION_BOX_CONDITIONS . '</a><br />' . ' <a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . MODULE_BOXES_INFORMATION_BOX_CONTACT . '</a>' . ' </div>' . '</div>'; $oscTemplate->addBlock($data, $this->group); }
CSS 代码如下:
在stylesheet.css 文件末尾加入如下代码 即可修改显示效果
#infobox{} #infobox .infoBoxHeading{} #infobox .infoBoxContents{}