T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. Dustin
  2. General Discussion
  3. Thursday, September 05 2013, 03:50 PM
  4.  Subscribe via email
I added two background colors to my component/module areas for a specific effect (see image) and I am running into a problem with IE9 background bleed at the corners (see other image). For the mainbody content I added two wrapper divs around

<jdoc:include type="message" />
<jdoc:include type="component" />

and added the following LESS/CSS:

.t3-mainbody {
.t3-content {
border-radius: 10px; //IE9 fix for bg corner bleed
overflow: hidden; //IE9 fix for bg corner bleed
}
.bgWrap1 {
background: @bgWrap1Color; //Bottom level background
padding: 7px;
border-radius: 10px;
border: 2px solid @customColorTwo;
#gradient > .vertical(@bgWrap1Color, @bgWrap2Color);

.bgWrap2 {
background: @bgWrap2Color; //Top level background
padding: 14px;
border-radius: 10px;
}
}
}


I have two modules set to the position sidebar2 which doesn't give me the top level wrapper to apply the IE9 fix you see in the code above. For the modules I utilized the divs already generated (with the classes of 't3-module' & 'module-inner'). I applied the LESS/CSS below:

.t3-mainbody {
.t3-module {
background: @bgWrap1Color; //Bottom level background
padding: 7px;
border-radius: 10px;
border: 2px solid @customColorTwo;
#gradient > .vertical(@bgWrap1Color, @bgWrap2Color);

.module-inner {
background: @bgWrap2Color; //Top level background
padding: 14px;
border-radius: 10px;
}
}
}


The problem is with the modules I need to add a wrapper div around the 't3-module' div. If I was to apply the IE9 fix to the 't3-sidebar' it would only work on the top corners of the top module and the bottom corners of the bottom module as it wraps both together. When I look at the sidebar2 code in mainbody.php I have the following:

<!-- SIDEBAR 2 -->
<div class="t3-sidebar t3-sidebar-2 <?php echo $this->getClass($layout, $col) ?><?php $this->_c($sidebar2)?>" <?php echo $this->getData ($layout, $col++) ?>>
<jdoc:include type="modules" name="<?php $this->_p($sidebar2) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR 2 -->


I need to add the following IE9 fix to a wrapper div when the modules are called in:

border-radius: 10px; //IE9 fix for bg corner bleed
overflow: hidden; //IE9 fix for bg corner bleed


How would I go about adding the wrapper div for the modules?
Attachments (2)
References
  1. http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding
  2. http://stackoverflow.com/a/5899300/1590427
Comment
There are no comments made yet.
Accepted Answer
Dustin Accepted Answer Pending Moderation
0
Votes
Undo
I figured out how to do it but I'd like some confirmation this is the best way to go about things. I read up and leaned a little about Module Chromes in Joomla (see additional URL's below) and saw in 'mainbody.php' the jdoc is calling "T3Xhtml" which can be found in the 'modules.php' file in \plugins\system\t3\base\html\ folder. In that folder you can find the Module Chrome "T3Xhtml" after the commenting:

function modChrome_T3Xhtml($module, &$params, &$attribs)
{
$badge = preg_match ('/badge/', $params->get('moduleclass_sfx'))? '<span class="badge"></span>' : '';
$moduleTag = htmlspecialchars($params->get('module_tag', 'div'));
$headerTag = htmlspecialchars($params->get('header_tag', 'h3'));
$headerClass = $params->get('header_class');
$bootstrapSize = $params->get('bootstrap_size');
$moduleClass = !empty($bootstrapSize) ? ' span' . (int) $bootstrapSize . '' : '';
$moduleClassSfx = htmlspecialchars($params->get('moduleclass_sfx'));

if (!empty ($module->content)) {
$html = "<{$moduleTag} class=\"t3-module module{$moduleClassSfx} {$moduleClass}\" id=\"Mod{$module->id}\">" .
"<div class=\"bgWrap1\"><div class=\"module-inner\">" . $badge;

if ($module->showtitle != 0) {
$html .= "<{$headerTag} class=\"module-title {$headerClass}\"><span>{$module->title}</span></{$headerTag}>";
}

$html .= "<div class=\"module-ct\">{$module->content}</div></div></div></{$moduleTag}>";

echo $html;
}
}


I copied what was above and added changed the module chrome name to 'customModule' as well as added in the new div and classes needed:

function modChrome_customModule($module, &$params, &$attribs)
{
$badge = preg_match ('/badge/', $params->get('moduleclass_sfx'))? '<span class="badge"></span>' : '';
$moduleTag = htmlspecialchars($params->get('module_tag', 'div'));
$headerTag = htmlspecialchars($params->get('header_tag', 'h3'));
$headerClass = $params->get('header_class');
$bootstrapSize = $params->get('bootstrap_size');
$moduleClass = !empty($bootstrapSize) ? ' span' . (int) $bootstrapSize . '' : '';
$moduleClassSfx = htmlspecialchars($params->get('moduleclass_sfx'));

if (!empty ($module->content)) {
$html = "<{$moduleTag} class=\"t3-module module{$moduleClassSfx} {$moduleClass}\" id=\"Mod{$module->id}\">" .
"<div class=\"bgWrap1\"><div class=\"module-inner bgWrap2\">" . $badge; //div.bgWrap1 & .bgWrap2 added for IE9 rounded corner fix

if ($module->showtitle != 0) {
$html .= "<{$headerTag} class=\"module-title {$headerClass}\"><span>{$module->title}</span></{$headerTag}>";
}

$html .= "<div class=\"module-ct\">{$module->content}</div></div></div></{$moduleTag}>"; //Closing div for .bgWrap1 added.

echo $html;
}
}


Lastly, I went to the mainbody.php and updated the jDoc to:
<jdoc:include type="modules" name="<?php $this->_p($sidebar2) ?>" style="customModule" />
.

As I said, it is all working just as needed. Should I have done this any differently?
References
  1. http://docs.joomla.org/Module_chrome
  2. http://docs.joomla.org/Applying_custom_module_chrome
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # Permalink
harry Accepted Answer Pending Moderation
0
Votes
Undo
Nice! thank you so much! Thank you for sharing. Your blog posts are more interesting and informative. I think there are many people like and visit it regularly, including me.
Animal Crossing Pocket Camp Crazy Taxi Colour Switch
  Province of Lodi, Italy
Visit 
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.