Wider central area with the CERN template

Site building
1

Hello,

I created the following site with my limited knowledge of all this :slight_smile:

I’m wondering how I could tweak the theme to consistently make the central area wider (I don’t use the left/right areas anyway).

I imagine there are many options, but which way would be the easiest / most relevant ?

Thanks for your advice(s)!

2

Hello Cedric,

  • Not sure if you already override the CERN theme, but you will have to in order to make the page wider. In order to override the cern theme, you need to install the CERN Override theme.
  • After installing the CERN Override theme, you need to override the page template by creating a twig file in /templates/ named page.html.twig. So in total your structure should be templates/page.html.twig. Here is a useful documentation about how template overrides work.
  • The template that you try to override is the original page.html.twig of CERN theme. So copy-paste the original code in your override and apply changes accordingly.
  • Specifically about what you want to achieve, you should remove the left and right sidebars and make the central area to hold 12 columns. CERN theme is based on bootstrap and you can read more about the bootstrap grid and columns in this documentation.

Hope that helps. Let me know if you have more question or if it doesnt work.

Konstantinos

3

Hello Konstantinos,

Thanks a lot for the detailed instructions.

I followed the steps, but realised that in my specific case (no left or right sidebars), it should already be “full width” (12 bootstrap columns).

Strangely, in the theme.css file of cernovveride, there is a fixed value for the width of the container area (which does not have a bootstrap class):

.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}

I removed that bit, and now the “media-based” rules are applied:

@media (min-width: 768px) {
.container {
width: 720px;
}
}

@media (min-width: 992px) {
.container {
width: 940px;
}
}

@media (min-width: 1200px) {
.container {
width: 1140px;
}
}

I imagine this comes from “above” in the override of theme properties. I’m fine with that, I basically gained 200px for any “desktop-grade” screen.

Cedric