Forums

Customize Elemental Theme - Header/Footer/Slider, etc not full width

Permalink
I am very new to concrete5 (and websites in general, minus basic html). I started with a copy of the elemental theme. I'd like to customize it such that the background image is shown on the sides (except for mobile).

I understand that what I want to set is a CSS max-width value, but I cannot figure out where to set it.

I can see that the header and footer are separate entities from the main body, and the slider seems to be its own entity as well, since it has a different background than the main body, but I cannot find where I would set the max-width in all of these to get the desired result.

Or would I need to make a "holding" container which would be around all the elements, and set that container's max-width?

Thanks,
Heather
HeatherMyers
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi HeatherMyers,

The Elemental theme has a wrapper div tag with a class of "ccm-page".

You can try this:
body {
    background: url(your_background_image.jpg);
}
.ccm-page {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
HeatherMyers replied on at Permalink Reply
HeatherMyers
MrKDilkington,

Thank you again for your help!! I first tried to put this in body.less, since that already had a placeholder for the background image:
body {
  background: transparent url(../../images/background.png) repeat scroll;
}
div.ccm-page {
  /*position: relative;*/
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

I commented out the position relative and pasted in your suggestion.

This did not work. So then I added a style section to my default.php file:
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
<style>
.ccm-page {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
</style>
<main>
<?php
$a = new Area('Main');
$a->enableGridContainer();
$a->display($c);
Viewing 15 lines of 23 lines. View entire code block.


and that worked. So thank you for the solution, I will add this to all my php pages and I'll be fine.

But for learning purposes, can you explain to me why it didn't work to put the code in body.less?

Thanks,
Heather
rge replied on at Permalink Reply
While customising or creating a theme it is important to disable the cache settings that can be found via dashboard -> settings.

Probably the less was cached and that is why your changes where not visible. Another advice is to keep your styles in the css / less files. This will make it easier to maintain.
HeatherMyers replied on at Permalink Reply
HeatherMyers
Thank you, that was exactly my issue. I was able to remove the style from the php files, only have it in body.less, and it worked.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@HeatherMyers

Until you are more comfortable with modifying the .less files, you might consider adding an "overrides" stylesheet. This additional stylesheet would be added underneath main.less. It would allow you to add modifications and overrides with less risk of breaking changes.

- in the theme CSS folder, create a new file called overrides.css
themes\elemental\css\overrides.css
- open header_top.php and look for the line where main.less is added
themes\elemental\elements\header_top.php
<?php echo $html->css($view->getStylesheet('main.less'))?>

- underneath this line, add this code that will add overrides.css
<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/overrides.css">

In your page head, you should now see overrides.css added after main.css:
<link rel="stylesheet" type="text/css" href="/concrete5/concrete/themes/elemental/css/bootstrap-modified.css">
<link href="/concrete5/application/files/cache/css/elemental/main.css" rel="stylesheet" type="text/css" media="all">    
<link rel="stylesheet" type="text/css" href="/concrete5/concrete/themes/elemental/css/overrides.css">

Credit for this approach goes to mesuva