Change layout classes or add extra ones.

Permalink 1 user found helpful
Is there anyway to change the layout classes generated by concrete5 or add extra ones. As an example I mean this, if I create a 4 column layout using Bootstrap 3 as the grid, then I get this in the code:
<div class="container">
  <div class="row">
    <div class="col-sm-3">..</div>
    <div class="col-sm-3">..</div>
    <div class="col-sm-3">..</div>
    <div class="col-sm-3">..</div>
  </div>
</div>

How do I change the above classes is my first question. How to add more classes like this for example is my second.
<div class="container">
  <div class="row">
    <div class="col-sm-3 col-xs-6">..</div>
    <div class="col-sm-3 col-xs-6">..</div>
    <div class="col-sm-3 col-xs-6">..</div>
    <div class="col-sm-3 col-xs-6">..</div>
  </div>
</div


My third question is what exactly controls the class that is generated there by the grid layout system?

 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi dexcode,

1. You can use a custom grid system using your own classes.
http://www.concrete5.org/documentation/developers/5.7/designing-for...
https://github.com/Mesuva/skeleton-starting-point-for-concrete5.7...

2. You can use layout presets to add multiple classes to grid elements.
http://www.concrete5.org/documentation/developers/5.7/designing-for...

3. This thread covers how the grid system works.
https://www.concrete5.org/community/forums/5-7-discussion/custom-gri...
dexcode replied on at Permalink Reply
Hi MrKD,

I just implemented method #2 with the layout presets as you see in the code below:
<?php
/**
 * Created by PhpStorm.
 * User: Dexter
 * Date: 30/10/2015
 * Time: 12:18 PM
 */
namespace Application\Theme\DorsetFlex;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme {
   protected $pThemeGridFrameworkHandle = 'bootstrap3';
   public function registerAssets()
   {
      $this->providesAsset('css', 'core/frontend/*');
      $this->requireAsset('css', 'font-awesome');


I then uploaded the file, deactivated the theme, removed the theme, re installed the theme and reactivated it but I cannot see the choice in the layout presets. I can only see Twitter Bootstrap3 and Free-Form Layout.

Is there anything else I need to do?

Dex
MrKDilkington replied on at Permalink Reply
MrKDilkington
@dexcode

Use this class and interface.
use Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface;
class PageTheme extends \Concrete\Core\Page\Theme\Theme implements ThemeProviderInterface
dexcode replied on at Permalink Reply
Thanks MrKD,

That solved the issue.

Dex