Question

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 .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:

1. 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 ?

2. 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.

Answer 1

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.