<p><code>templates/layouts/_cp.html</code> has </p>

<pre><code>&lt;div class="grid"&gt;
  &lt;div class="item"&gt;
    &lt;div class="pane"&gt;
</code></pre>

<p>nested inside the <code>{% block main %}</code> (line  207) and <code>templates/entries/_edit.html</code> is overriding that <code>block main</code>, so those grid,item,pane divs get overridden too.</p>

CC BY-SA 3.0
2014-08-29T00:35:37.330Z
Bingo! Looked right past that. Using {% block main %} works as needed.
Ben Parizek
CC BY-SA 3.0
2014-08-28T22:49:17.770Z
2014-08-28T22:49:17.770Z
Marion Newlevant
<p>Hey Ben if you are using <code>{% extends '_layouts/cp' %}</code> how about something like this?</p>

<pre><code>{% set sidebar %}
     &lt;div class="buttons"&gt;
           &lt;a href="{{ url('') }}"&gt;&lt;div class="btn submit add icon"&gt;New Button&lt;/div&gt;&lt;/a&gt;
     &lt;/div&gt;
{% endset %}
</code></pre>

CC BY-SA 3.0
2014-08-28T16:16:21.043Z
Thanks @Adam.  In my tests {% set sidebar %} controlled the column to the left of the layout like on the Entries listing page, where I am hoping to have a column on the right of the layout, like on the Edit an Entry page.
Ben Parizek
CC BY-SA 3.0
2014-08-28T20:21:10.253Z
Ah gotcha. Yes I'd be interested in this too.
Adam McCombs
CC BY-SA 3.0
2014-08-28T15:37:05.223Z
2014-08-28T15:37:05.223Z
Adam McCombs
<p>I have a plugin where I'd like my CP tab to output two columns just like the entry page.  On the left, would be the body and then there would be a nice dividing gap and then on the right there would be a aside column.</p>

<p>I've tried to copy the way that the Entry Edit page works but I must be missing something.</p>

<p>Extending <code>_layouts/cp</code> wraps everything on the page with the following three divs which don't seem to get output at all on the Entry Edit page:</p>

<pre><code>&lt;div class="grid"&gt;
    &lt;div class="item"&gt;
        &lt;div class="pane"&gt;
             ...
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>How does the entry page get rid of these divs?  I'm not seeing anything obvious in the templates.</p>

<p><strong>EDIT</strong> To be clear, I can create the layout that I want, except for the fact that the layout I want gets wrapped in the above code and makes the gutter disappear and messes up the padding around the two columns on the page.  If I extend the {% extends '_layouts/cp' %} and remove those three divs above, just like the Edit and Entry page seems to do somehow, the page displays just as I want it to.  </p>

<p>What I can't figure out is how the Entry page is getting rid of those three divs. It uses {% extends '_layouts/cp' %} and those divs do not appear on the Edit an Entry page.</p>

<plugin-development><user-interface>
How do you create two grid columns like the Entry Edit page within a plugin?
# How do you create two grid columns like the Entry Edit page within a plugin?

(Asked by: username_0 on 2014-08-28)

I have a plugin where I'd like my CP tab to output two columns just like the entry page.  On the left, would be the body and then there would be a nice dividing gap and then on the right there would be a aside column.
I've tried to copy the way that the Entry Edit page works but I must be missing something.
Extending _layouts/cp wraps everything on the page with the following three divs which don't seem to get output at all on the Entry Edit page:

    
        
             ...
        
    


How does the entry page get rid of these divs?  I'm not seeing anything obvious in the templates.
EDIT To be clear, I can create the layout that I want, except for the fact that the layout I want gets wrapped in the above code and makes the gutter disappear and messes up the padding around the two columns on the page.  If I extend the {% extends '_layouts/cp' %} and remove those three divs above, just like the Edit and Entry page seems to do somehow, the page displays just as I want it to.  
What I can't figure out is how the Entry page is getting rid of those three divs. It uses {% extends '_layouts/cp' %} and those divs do not appear on the Edit an Entry page.

**Tags:** plugin-development, user-interface


---

## 2 answers

### Answer by username_1 on 2014-08-28. Score: 1 | Accepted answer

`templates/layouts/_cp.html` has

nested inside the `{% block main %}` (line 207) and `templates/entries/_edit.html` is overriding that `block main`, so those grid,item,pane divs get overridden too.

> **Comments:**
> **username_0**: Bingo! Looked right past that. Using {% block main %} works as needed.  

---

### Answer by username_2 on 2014-08-28. Score: 0

Hey Ben if you are using {% extends '_layouts/cp' %} how about something like this?
{% set sidebar %}
     
           New Button
     
{% endset %}

> **Comments:**
> **username_0**: Thanks @Adam.  In my tests {% set sidebar %} controlled the column to the left of the layout like on the Entries listing page, where I am hoping to have a column on the right of the layout, like on the Edit an Entry page.  
> **username_2**: Ah gotcha. Yes I'd be interested in this too.  

---

