Where should I place block icons and CSS in magento extension
My magento extension adds a new block (like the poll block for example) to the sidebar. I am using the same html structure as that used by the poll block to make the block look like its part of the system.
i.e.
<div class="block block-myblock">
<div class="block-title">
<strong><span><?php echo $this->__('block title') ?></span></strong>
</div>...
I know that the icons on the poll block apear because of a CSS rule:
.block-poll 开发者_如何学Go.block-title strong { background-image:url(../images/i_block-poll.gif); }
that is returned from: /skin/frontend/base/default/css/widgets.css
and I also know that the image itself is stored at:
skin/frontend/default/default/images/
I have two Questions:
What would be the appropriate way to add my own require CSS rule to show the icon near my block ? i.e. does
.block-myblock .block-title strong { background-image:url(../images/i_block-myblock.gif); }
go directly into some file ? and which file or is it added by the code of the block using some call like addCSS or something similar ?What would be the appropriate path for me to store the
i_block-myblock.gif
image ?
please remember that this is all in the context of an extension, not local modifications to my own store.
This is a very good question and +1 for keeping the Magento wording in your CSS ! What I personnally do in order not to confuse developpers that may use my module is that I create a skin subfolder dedicated to the module. This way, it will be whether easy to find and cut/paste its css rules and images in the right theme folder whether running correctly for non experimented users.
1- Create the folder and files architecture
Like :
- /skin/frontend/default/default/[your_module_name]/css/styles.css
- /skin/frontend/default/default/[your_module_name]/images/ (containing all your module's images)
2- Edit your /skin/frontend/default/default/[your_module_name]/css/styles.css
...as usual but containing only CSS classes related to your module, ie :
.block-myblock .block-title strong { background-image:url(../images/i_block-myblock.gif); }
3- Call the CSS file from the layout XML of your module
Open, let's say /app/design/frontend/default/default/layout/[your_module_name].xml and add the following lines after the first opening node like this :
<?xml version="1.0"?>
<layout version="0.1.0">
<!-- Code to add -->
<default>
<reference name="head">
<action method="addItem"><type>skin_css</type><name>[your_module_name]/css/styles.css</name><params/></action>
</reference>
</default>
<!-- [end] -->
.
.
.
</layout>
This should work while being respectful of Magento standards, not polluting existing themes and giving no headaches to developpers who wish to fully merge your skin with theirs.
精彩评论