How to expand central region (main content)

How To
1

Hello,

Looking for a way to expand main content region to almost 100% width in some pages.

Both left and right sidebars are empty in such cases.

Thanks

2

Hello @juang,

The amount of columns that each region holds is defined in the CERN theme. More specifically the main content region holds 6 columns if both right and left regions are rendered or 9 bootstrap columns in any other case.

If you want to override this behaviour you need to:

  1. Install the CERN Override theme
  2. Under /templates/ folder create the page.html.twig template and override it based on your preference.
  3. You can find the original page.html.twig in the repository of the cern theme.. I suggest to copy-paste the original html and apply the overrides in the overridden theme.

By the way, do you want to apply changes only in some content types or all of them? Also by 100% you mean 100% of the container or 100% of the screen?

By default the CERN Theme uses a fixed width container. Do you want to change it to be fluid for some content types?

Konstantinos

3

Hello Konstantinos,

I include a screenshot for clarification. The idea is to expand the main region in order to be able to show the full table. It is actually a table inside an accordion block. No need to use 100% width but Iā€™d like to show full content at a glance.

This should only apply to a reduced number of pages since we use menus in the left side region some times.

I am also considering to just reduce the font size in this cases using css since we already use cern override theme.

Fluid container maybe makes more sense for the cases where we have content on the left side region, right?

image
image1780Ɨ566 22.2 KB

4

Hello @juang ,

I understand what you mean but its quite a unique case because you have a lot of columns ( > 10). Also you have a big table inside an accordion which is also quite unique. I dont think that setting the width to fluid will solve the issue in the long term. I think that a more long-term solution is to make the x-axis of the table scrollable (if it is not already).

CSS-wise this can be done with something like the following:

table{
   overflow: auto;  // or overflow: scroll;
}

What do you think of it?Also can you send the URL of the view you try to configure?

Konstantinos

5

Hello Konstantinos,

Yes,I know, it is something inherited from the past. And yes, t is already scrollable:

https://test-en-dep-cv-cl-v2.web.cern.ch/project-status-list

So my try was to reduce the font size inside accordion blocks with this:

.accordion-block-content {
    font-size: 80%;
}

Not sure if it will be the final option but it looks better now :slight_smile:

1 Like