We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (1)

Resolved Add wrapper div outside of module-inner div?

0
Votes
Undo
  1. Dustin
    Dustin
  2. Sherlock Holmes
  3. General Discussion
  4. Thursday, 05 September 2013
  5.  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)
IECorners.png IECorners.png
ChromeCorners.png ChromeCorners.png
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
Dustin
Sherlock Holmes
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
Responses (1)


There are replies in this post but you are not allowed to view the replies from this post.