0

I want to change the css class of a admin field's label. As I have found out there is not setter method such as setLabelHtml, I am not able to change the class. At last I override the Varien_Data_Form_Element_Abstract class as suggested by 'AlanStorm' in this post. I changed the 'getLabelHtml' and place the class attribute there and it worked. Is there any other better way to do it ?

  • 1
    I am sure @alanstorm would have found a better way, if one existed ;) – ProxiBlue Oct 8 '13 at 4:34
  • If @alanstorm says it should be done that way, you do it. Don't question his authority. :) – Marius Oct 8 '13 at 7:54
  • @Marius, In that he did not say anything about changing css of admin field label. In that post he says about overriding a lib/Varien object – kaushik Oct 8 '13 at 8:40
2

At last I have found two answers for my question. I wanted to change css class of elements inside the fieldset of the form.

1. First solution

All of the fieldset created inside a form object is using a renderer of Varien_Data_Form_Element_Renderer_Interface for rendering the html as a last step (if one is present).

The default renderer for a fieldset inside a form is Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element which is extending Mage_Adminhtml_Block_Template. Hence it has a template object attached to it. The template for our renderer is widget/form/renderer/fieldset/element.phtml.

The steps to change the default behaviour is as follows:

First of all created a renderer class.

class Kaushikamdotcom_Moduler_Block_Adminhtml_Module_Renderer extends Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element {        
    public function __construct() {
               // Setting template for the element
       $this->setTemplate('widget/form/fieldset/renderer/element.phtml');
    }

    public function render(Varien_Data_Form_Element_Abstract $element)
    {
               // Just returning the html rendered by parent
       return parent::render($element);
        }

    protected function _toHtml() {
               // Specifying location of template file for the renderer
       $template = $this->getTemplate();
       include(dirname(__FILE__) . '/../../../templates/' . $template);
    }   
}

Then I created a template by copying the element.phtml from app/design/adminhtml/default/default/template/widget/form/element/renderer/fieldset to templates/widget/form/fieldset/renderer/ inside my module folder. The content of that file is:

<?php
$_element = $this->getElement();
$_note    = $_element->getNote();
$_trId    = $_element->getHtmlContainerId();
$_class   = $_element->getFieldsetHtmlClass();
?>
<?php if (!$_element->getNoDisplay()): ?>
<tr<?php if($_trId): ?> id="<?php echo $_trId ?>"<?php endif; ?>>
    <?php if ($_element->getType()=='hidden'): ?>
    <td colspan="2" class="hidden"><?php echo trim($_element->getElementHtml()) ?></td>
    <?php else: ?>
    <td class="label<?php echo $_class ? " {$_class}-label" : ''?>">
    <?php 
         $label = '<label for="'.$_element->getHtmlId().'" class="'.$this->getLabelClass().'" >' . $this->escapeHtml($_element->getLabel())
                  . ( $_element->getRequired() ? ' <span class="required">*</span>' : '' ) . '</label>' . "\n";
        echo trim($label);
     ?>
    </td>
    <td class="<?php echo $_element->hasValueClass() ? $_element->getValueClass() : 'value' ?><?php echo $_class ? " {$_class}-value" : ''?>">
        <?php echo trim($_element->getElementHtml()) ?>
        <?php if ($_note): ?>
            <p class="note<?php echo $_class ? " {$_class}-note" : ''?>" id="note_<?php echo $_element->getId()?>"><span><?php echo $_note ?></span></p>
        <?php endif ?>
    </td>
    <?php endif; ?>
</tr>
<?php endif; ?>

As you can see I have used a getLabelClass() function which I have set on the renderer object in the _prepareForm() function in the widget form class.

The widget form class I have used is:

class Kaushikamdotcom_Moduler_Block_Adminhtml_Module_Edit_Form extends Mage_Adminhtml_Block_Widget_Form {

protected function _prepareForm() {
    $form = new Varien_Data_Form(
        array(
            'id' => 'view_form',
            'action' => '',
            'method' => 'post'              
        )
    );


    $fieldset = $form->addFieldset('module_fieldset', array(
            'legend' => $this->__('Module Information'),
            'class' => 'fieldset-wide'
    ));

    $fieldset->addField('name', 'text', array(
            'label' => $this->__('Module Name'),
            'name' => 'name'
    ));

            .....etc
       }    

   public function _beforeToHtml() {
            // Instantiating renderer
        $renderer = Mage::getBlockSingleton('moduler/adminhtml_module_renderer','renderer');

                // Setting label class
        $renderer->setLabelClass('testClass');

                // Setting the renderer on the fieldset
        Varien_Data_Form::setFieldsetElementRenderer($renderer);

        parent::_beforeToHtml();
   }    
}

Now I have my custom label for admin fields. I hope it will help you and also invite more better answers on this question (Hence not closing it).

2. Second solution

Create a directory etc inside app/code/local. Then inside app/code/local/etc create the whole directory structure needed for Varien_Data_Form_Element_Abstract class which is the parent class for all form elements. So there directory structure you need to create inside app/code/local/etc/ is Varien/Data/Form/Element and then copy Abstract.php from lib/Varien/Data/Form/Element/ to the directory you created. After that change the getLabelHtml() method as follows:

public function getLabelHtml() {
   if (!is_null($this->getLabel())) {
            $html = '<label for="'.$this->getHtmlId() . $idSuffix . '" class="$this->getLabelClass()">' . $this->_escape($this->getLabel())
                  . ( $this->getRequired() ? ' <span class="required">*</span>' : '' ) . '</label>' . "\n";
        } else {
            $html = '';
        }
        return $html;
}

As you can see we have placed a getLabelClass() on the current object. So you have to use setLabelClass($labelClass) by iterating through Varien_Form object or the fieldset object inside you have put the field.

1

While it doesn't change the class, you can manipulate a label based on the 'for' attribute of the label. Ex:

<style type="text/css">
    label[for=price]
    {
        color: green;
    }
</style>
  • Thats a new information – kaushik Nov 10 '13 at 1:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.