How to insert HTML tags in Joomla! module title?

Question

What I'm trying to do is to add some HTML tags to my Joomla! module titles. I will need something like this

Some <b>Title</b>

but when I save !Joomla trims the titles and remove all HTML tags.

I've check the administrator/com_content, which I think should be responsible for inserting the database data, but I couldn't find the answer there.

Can anyone help me with this headache?

Answer 1

Check out ../templates/system/html/modules.php

You can style your module structure in HTML.

function modChrome_myCustomModule($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css  = ".otherClass {}";
$css .= ".yourClass {}";

$doc->addStyleDeclaration($css);

?>
    <div>
        <?php if ($module->showtitle != 0) : ?>
            <h1><?php echo $module->title; ?></h1>
    <?php endif; ?> // post your title
    </div>
    <div>
         <?php echo $module->content; ?> // post your module content
    </div>

<?php
}

Then call your styled module in index.php:

  <jdoc:include type="modules" name="right" style="myCustomModule"  />

Answer 2

So I found the solutions. It includes both of the previous answers, so I'm putting a new one here with the correct code.

First of all I need to say, that this solution works only for a fixed amount of words (last one, two, etc.) I need only to have the last one, so I will post an example code with one word.

First as SMacFadyen sad I needed to create a new module structure in my template html folder: /templates/system/html/modules.php file.

Note: If you don't want to add this new module styling to all templates, but just on one of them you need to put the module.php in your template's html folder.

The provided by SMacFadyen looks like this:

function modChrome_myCustomModule($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css  = ".otherClass {}";
$css .= ".yourClass {}";

$doc->addStyleDeclaration($css);

?>
    <div>
        <?php if ($module->showtitle != 0) : ?>
            <h1><?php echo $module->title; ?></h1>
    <?php endif; ?> // post your title
    </div>
    <div>
         <?php echo $module->content; ?> // post your module content
    </div>

<?php
}

Then expired by the comments of Hanny I've added some php code to match the last word of the title and to store it in a new varibale.The code looks like this:

$wrap_tag = 'b';
$html_title = preg_replace("~\W\w+\s*$~", '<'.$wrap_tag.'>'.'\\0'.'</'.$wrap_tag.'>', $module->title);

Note: the $wrap_tag variable stores the tag you want. You can put b, em, u and etc. to have different result.

The last thing was to replace the displayed title, so I've replaced this code: <h1><?php echo $module->title; ?></h1> <h1><?php echo $module->title; ?></h1> with this one: <h1><?php echo $html_title; ?></h1> <h1><?php echo $html_title; ?></h1>

The final result was this:

function modChrome_myCustomModule($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css  = ".otherClass {}";
$css .= ".yourClass {}";

$wrap_tag = 'b';
$html_title = preg_replace("~\W\w+\s*$~", '<'.$wrap_tag.'>'.'\\0'.'</'.$wrap_tag.'>', $module->title);

$doc->addStyleDeclaration($css);

?>
    <div>
        <?php if ($module->showtitle != 0) : ?>
            <h1><?php echo $html_title; ?></h1>
    <?php endif; ?> // post your title
    </div>
    <div>
         <?php echo $module->content; ?> // post your module content
    </div>

<?php
}

Thanks to everybody for the help.

Answer 3

The Gantry framework can help you accomplish what you want (1st word styled one way, 2nd word styled another) - but it's a lot of overhead just accomplish that one task you're looking for. Ultimately you'll have to create a template override for your template, and then do some creative editing with php in order to get it to display that way.

There's no quick and easy way to get that done. You'll have to do some php coding on the backend and edit the template (use an override so you don't hack core files). Ultimately you'll probably have to code the php to pull apart the title, and apply formatting to each pulled apart word (or string of words as the case may be) using CSS.

Hope that helps.