8. Solid – content (row of columns)

Don't forget - it was written in 2014

comments: 0
The goal of this part: e107 row columns There is already prepared code and menus for this in bootstrap3 theme:
<!-- Example row of columns -->
<div class="row">
  {SETSTYLE=col-md-4}
  {CMENU=jumbotron-menu-1}
  {CMENU=jumbotron-menu-2}
  {CMENU=jumbotron-menu-3}
</div>
if($style == 'col-md-4')
{
  echo ' <div class="col-xs-12 col-md-4">
  <h2>'.$caption.'</h2>
  '.$text.'
  </div>';
  return;	
}
e107 row columns So at first we will use this. e107 row columns 1. add new section to frontpage:
$LAYOUT['solid_home'] = '
  <div id="headerwrap">
   <div class="container">
			<div class="row">
          {WMESSAGE=force}
  			</div>
<!-- /row -->
	    </div> <!-- /container -->
	</div>
<!-- /headerwrap -->
  <!-- *****************************************************************************************************************
	 SERVICE LOGOS
	 ***************************************************************************************************************** -->
  <div id="service">
    <div class="container">
      <div class="row centered">
        {SETSTYLE=col-md-4}
        {CMENU=jumbotron-menu-1}
        {CMENU=jumbotron-menu-2}
        {CMENU=jumbotron-menu-3}
      </div>
    </div>
  </div>  
  {---}
';
Result: e107 row columns 2. fill the content from solid theme (texts, glyphs atd...) Note: because this is "service" section, I changed names of menus from jumbotron-menu to service-menu. Better idea is probably create 3 new menus, but this save time.
{CMENU=service-menu-1}
        {CMENU=service-menu-2}
        {CMENU=service-menu-3}
Little help with glyphs: e107 row columns You should have something like this: e107 row columns Result: e107 row columns It seems better, but still different. Now is time to choose what can be done by tablestyle and what by menu templating.

New tablestyle

The reason for new tablestyle (first code is page's source code): e107 row columns Example:
<div class="row centered">
        {SETSTYLE=services}  
        {CMENU=service-menu-1}
        {CMENU=service-menu-2}
        {CMENU=service-menu-3}
      </div>
if($style == 'service')
	{
		echo ' <div class="col-xs-12 col-md-4">
          '.$text.'
        </div>';
		return;	
	}

Menu templating

Bootstrap 3 (so our theme too) has already menu_template.php in template folder. But if you create new theme, there are rules for this: Moc wrote this usefull overview: e107 row columns1. create new template (you can rewrite button template, but it's not idea)
$MENU_TEMPLATE['button']['start'] 					= '<div class="cpage-menu">'; 
	$MENU_TEMPLATE['button']['body'] 					= '{CMENUBODY}<br>{CPAGEBUTTON}'; 
	$MENU_TEMPLATE['button']['end'] 					= '</div>'; 
  
	$MENU_TEMPLATE['service']['start'] 					= '<div class="cpage-menu">'; 
	$MENU_TEMPLATE['service']['body'] 					= '{CMENUBODY}<br>{CPAGEBUTTON}'; 
	$MENU_TEMPLATE['service']['end'] 					= '</div>';
2. change template of your menus e107 row columns Check frontpage - no visible changes should be there. 3. custom your template e107 row columns Example:
$MENU_TEMPLATE['service']['start'] 	 = ''; 
	$MENU_TEMPLATE['service']['body'] 	 = 
                               '{CMENUICON} <h4>{CMENUTITLE} </h4> 
                               <p>{CMENUBODY}</p>
<p><br>{CPAGEBUTTON}</p>'; 
	$MENU_TEMPLATE['service']['end'] 					  = '';
Result: e107 row columns Everything seems fine, except buttons. The reason for this is in using . This shortcode returns:
return 
'<a class="cpage btn btn-primary btn-cpage'.$inc.'" href="'.$url.'">'.$text.'</a>';
And we need:
<a href="#" class="btn btn-theme">More Info</a>
You can change this via styling (change btn-primary according to btn-theme), but I don't want to do it this way. 4. change cpagebutton - correct way Very easy replace your cpagebutton with:
<a class="btn btn-theme" href="{CPAGEURL}">'.LAN_READ_MORE.'</a>'
It's not my idea, it's Cameron. Result: e107 row columns We have done. 5. create new cpagebutton - my way I can't help myself, but I dislike this solution. CPAGEBUTTON shotcode has more code than only creating some link. What I need - to create new shortcode by copying cpagebutton shortcode and changing it. Problem is that I can do it only in core shortcodes (page_shortcodes). I can't use theme_shortcodes.php, because these shortcodes are not loaded in page/menu areas. Example:
$MENU_TEMPLATE['service']['start']   = ''; 
	$MENU_TEMPLATE['service']['body']     = '{CMENUICON} <h4>{CMENUTITLE} </h4> 
       <p>{CMENUBODY}</p>
<p><br>{CPAGETHEMEBUTTON}</p>'; 
	$MENU_TEMPLATE['service']['end'] 					 = '';
function sc_cpagethemebutton($parm)
	{
		$url = $this->sc_cpageurl();
		
		if($parm == 'href' || !$url)
		{
			return $url;
		}
		
		if(trim($this->var['page_text']) == '') // Hide the button when there is no page content. (avoids templates with and without buttons)
		{
			return "<!-- Button Removed: No page text exists! -->";	
		}
		
		parse_str($parm,$options);
		
		$text = vartrue($options['text'], LAN_READ_MORE);
		$size = vartrue($options['size'], "");
		$inc = ($size) ? " btn-".$size : "";
		
		return '<a class="btn btn-theme'.$inc.'" href="'.$url.'">'.$text.'</a>';
	}
Likewise to templates, there should be (or maybe already is) way how to put core or plugin shortcodes to theme folder, because these changes are related to theming, not core or plugins itself.