Custom Module Chrome Question

Everything to do with Joomla! 2.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
christos312
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Thu Jul 09, 2009 7:28 pm

Custom Module Chrome Question

Post by christos312 » Fri Feb 25, 2011 9:48 am

Hello to everyone,

I am trying to change my modules look to fit my page. I read the documentation and i found that i can do it by creating a module.php file but I want somehow to know what options i have?

I mean the following text(Copy from docs.joomla) says about three or for Module properties that i can use
$module->content, $module->showtitle etc
Is there any documentation on all of the available properties? I searched and I didnt found one... ;)
but the main ones you are likely to need are $module->content, $module->showtitle and $module->title. $module->showtitle is a Boolean variable, so is either true (when the Module title should be shown) or false (when it shouldn't be shown). $module->content and $module->title will return the main Module content and the Module title respectively.
Thanks in advance

 
daniel_jackson2
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 175
Joined: Wed Mar 03, 2010 7:58 pm

Re: Custom Module Chrome Question

Post by daniel_jackson2 » Fri Feb 25, 2011 5:40 pm

There are several ways to change the output of a module... Chrome and Renderer.

For Chroming you have to include a "modules.php" file in your templates/mytemplatename/html folder. Joomla will automatically load this when needed. You have to apply your styles in your index.php file like this:

Code: Select all

<jdoc:include type="module" style="yourChromeStyleName" name="yourModulePositionName" />
Now, inside of your modules.php file you include a function to run the new styling for Chrome...

Code: Select all

function modChrome_yourChromeStyleName($module, $params, $attribs)
{
    
}
To answer your question, you wondered what these variables offer. Well, first... this data reflects a single module's output. Below you will find what comes into the variables:

Code: Select all

$module = 
stdClass Object
(
    [id] => 
    [title] => 
    [module] => mod_nameofmodule
    [position] => position's name
    [content] => content from the output buffer, or "view", usually html
    [showtitle] => (int- 0 or 1)
    [params] => {"keyname":"value"} (use $module->get('keyname') to grab the module's individual params)
    [menuid] => 0
    [user] => 0 (this means guests can see a module)
    [name] => nameofmodule (without mod_ prefix)
    [style] => finally the style, this comes from the <jdoc:include /> statement

//NOTE: use $module->keyname ($module->id, etc)
) 

Code: Select all

$params = 
JRegistry Object
(
    [data:protected] => stdClass Object
        (
        [menutype] => (e.g. usermenu)
        [startLevel] => (int)
        [endLevel] => (int)
        [showAllChildren] => (int)
        [tag_id] => 
        [class_sfx] =>
        [window_open] =>
        [layout] =>
        [moduleclass_sfx] => 
        [cache] => (int)
        [cache_time] => 
        [cachemode] => 
    )

)

// NOTE: use $params->get('keyname') since it is a JRegistry object... it has functions like get, set, def, etc.

Code: Select all

// attributes can be anything from a <jdoc:include /> that is not there by default...
$attribs = 
Array
(
    [name] => (module positions name from <jdoc:include /> statement)
    [style] => 
    [headerLevel] =>
    [myAttrib] => 
) 
// NOTE: this would have looked like <jdoc:include name="" style="" headerLevel="" myAttrib="" />

// NOTE: use $attribs['keyname'] to access values ($attribs['name'], etc.)
Now keep in mind that anything brought to this page will be sent to the output buffer of the document... this is how premium templates are made... by setting up a folder of html "views" that take this data and wrap it with html, then echo the results to the page.

christos312
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Thu Jul 09, 2009 7:28 pm

Re: Custom Module Chrome Question

Post by christos312 » Sat Feb 26, 2011 10:42 am

Thank you very much, that's exactly what i wanted :D

Thanks again :)

User avatar
AdAgency
Joomla! Apprentice
Joomla! Apprentice
Posts: 25
Joined: Sat Feb 26, 2011 7:47 pm
Location: Houston, TX
Contact:

Re: Custom Module Chrome Question

Post by AdAgency » Sun Feb 27, 2011 4:07 pm

You need to have a folder in your template directory called ' html ' with a file called 'modules.php'

Feel free to use this code - I customize the modules all the time with my web design.
This is an example of a modified header module. You can set the HTML elements as you wish to suit your needs.

Code: Select all

function modChrome_headerModule($module, &$params, &$attribs)
{
	if (!empty ($module->content)) : ?>
		<div class="headermod<?php echo $params->get('moduleclass_sfx'); ?>">
        <?php if ($module->showtitle != 0) : ?>
			<h3><?php echo $module->title; ?></h3>
            <?php endif; ?>
        <?php echo $module->content; ?>
		</div><!-- End headermod -->
	<?php endif;
}
You will call upon this module in your 'index.php' file using the following line of code:

Code: Select all

<?php if ($this->countModules( 'header' )) : ?>
<div id="header">
	<jdoc:include type="modules" name="header" style="headerMod" />
</div>
<?php endif; ?>
What's even better, if you don't put a module in the header position, it won't show up in the page due to the conditional statement.

Here is another example if your web design requires a little more control of the module: say for instance you need a top, content, and bottom style to create a fancy looking box.

Code: Select all

function modChrome_headerModule($module, &$params, &$attribs)
{
	if (!empty ($module->content)) : ?>
		<div class="headermod<?php echo $params->get('moduleclass_sfx'); ?>">
        <?php if ($module->showtitle != 0) : ?>
			<h3><?php echo $module->title; ?></h3>
            <?php endif; ?>
       <div class="middle"><?php echo $module->content; ?></div>
       <div class="bottom"></div>
		</div><!-- End headermod -->
	<?php endif;
}
Woodlands Ad Agency
Houston Advertising and Website Design
http://woodlandsadagency.com

christos312
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Thu Jul 09, 2009 7:28 pm

Re: Custom Module Chrome Question

Post by christos312 » Sun Feb 27, 2011 10:21 pm

AdAgency thank you,

I had this in mind i found it in the Joomla Wiki, now I have another question.

At first I wanted to use this way to customize my modules, and it works.

Now i want to customize the way that the Search Module is displayed, but how do i target the textbox, the botton, and the label of the search module.

I think that is generated with this
<?php echo $module->content; ?>
Am i right? But how do i know how to target it with CSS?

Lets say i want to target the button to put a graphic instead of the classic button, how can i do it?

daniel_jackson2
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 175
Joined: Wed Mar 03, 2010 7:58 pm

Re: Custom Module Chrome Question

Post by daniel_jackson2 » Sun Feb 27, 2011 10:47 pm

It is... but, the proper way is to go to the views folder and create the new view or even an "alternate layout" for the search module. A Chrome method is something to wrap the content to be displayed... . I suppose it wouldn't make any difference, but if you did do $module->content you would have a bunch of HTML content like form, inputs, div blocks (everything from the view).

A simple way to do this is going to joomlasite/modules/mod_search/tmpl/default.php and copy that file (CTRL-C). Then go to joomlasite/templates/your_template/html/mod_search/ (creating the folders if they do not extist) and paste that file in that folder (CTRL-V).

Now you have: joomlasite/templates/your_templatename/html/mod_search/default.php

You can also define alternate layouts here, just by pasting the file again and renaming it to alternatelayout.php (or whatever name you want).

christos312
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Thu Jul 09, 2009 7:28 pm

Re: Custom Module Chrome Question

Post by christos312 » Mon Feb 28, 2011 8:25 am

So I will create an overwrite view ( i read this in documentation as well) and based on the class that are already assigned to the search form i will target them.

Or even better create my own classes!

Ok thanks, i wasnt sure if this is the best way to do it:D

Thank you very much

daniel_jackson2
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 175
Joined: Wed Mar 03, 2010 7:58 pm

Re: Custom Module Chrome Question

Post by daniel_jackson2 » Mon Feb 28, 2011 4:28 pm

You can also use pageclass_sfx to run several layouts in addition to having several layouts. You can also include alternate layouts (not just views) by adding a _name after the file name (e.g. newlayout_layout.php)

 

Locked

Return to “Templates for Joomla! 2.5”