Search code examples
joomlajoomla2.5

add css style into module's xml file in joomla

I have hello world module in joomla. I would like to add css style in my xml file in admin section. e.g. Here is my xml code:

<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="2.5.0" method="upgrade">
    <name>MOD_HELLOWORLD</name>
    <!-- Следующие элементы не обязательны и могут содержать все, что вы считаете нужным -->
    <creationDate>05.05.2012</creationDate>
    <author>Dev Joomla</author>
    <authorEmail>[email protected]</authorEmail>
    <authorUrl>http://www.dev-joomla.ru</authorUrl>
    <copyright>Copyright Info</copyright>
    <license>License Info</license>
    <!-- Версия модуля – эта строка сохраняется в таблице расширений -->
    <version>0.0.1</version>
    <!-- Описание модуля также не обязательно и если оно не указано, то берется из тэга  name -->
    <description>MOD_HELLOWORLD_XML_DESCRIPTION</description>
    <!-- Обратите внимание на тэг  files: в нем содержится информация, о том какие файлу нужно копировать в каталог модуля -->
    <files>
        <filename module="mod_helloworld">mod_helloworld.php</filename>
        <filename>mod_helloworld.xml</filename>
        <folder>tmpl</folder>
        <folder>language</folder>
        <filename>helper.php</filename>
                <folder>css</folder>
                <folder>js</folder>
    </files>


    <!-- Описание параметров модуля -->
    <config>
        <fields name="params">
            <fieldset name="basic">
                <field
                    name="greeting"
                                        /*CODE HERE*/
                    type="text"
                    default="MOD_HELLOWORLD_GREETING_DEFAULT"
                    label="LABEL"

                />
            </fieldset>
        </fields>
    </config>
</extension>

Now I would like that my label LABEL becomes red. How can I do this?

Solution

  • If I understand your question correctly, I think you could do this with straight CSS. For example, say I wanted to color the second label of the protostar template in the Joomla template manager, use your web insptector to figure out the classes and divs.

    HTML is 

    <div id="attrib-advanced" class="tab-pane active">
    <div class="control-group ">
            <div class="control-label"><label>Template Colour</label></div>
                <div class="controls"> ....</div>
    </div>

    <div class="control-group ">       <------ target this control-group
            <div class="control-label"><label>Background Colour</label></div>
                <div class="controls"> ....</div>
    </div>

    ....
</div>

    In this case I could do it with the following in the template CSS: 

    #attrib-advanced .control-group:nth-of-type(2){
    color:red;
}

    Good luck!

    screenshot