Try adding this at the bottom of main.less in your themes CSS directory:



This might do the trick, if I havent missed something.

But to make it really "clean", you should to a override of the original theme to not mess up everything when upgrading to the next 5.7 version.

Basic steps for using it as a new theme:
(pulled from:http://www.concrete5.org/community/forums/themes/5.7-custom-modific...



1) Copy the 'concrete/themes/elemental' folder into 'application/themes/elementalcustom'
2) Open the 'application/themes/elementalcustom/description.txt' file and change the first line to 'Elementalcustom'. I also changed the second line to indicate that this was a copy of the core Elemental theme.
3) Open the 'application/themes/elementalcustom/css/main.less' and add a '../' to the path in line 6.
4) In main.less, change to: @import "../../../../concrete/css/build/core/include/mixins.less";
5) in page_theme.php change to: namespace Application\Theme\Elementalcustom;

*replace "elementalcustom" with the name of your custom theme.

Then try customizing :)

Makes sense that would work, but for whatever reason it doesn't.

Having looked throughout the theme files, I can't help but think that this might not be doable through CSS and might have to be done in one of the PHP files somewhere, but I know very little about PHP.

I would think we could designate that the header be fixed in the themes/elemental/default.php, or in themes/elemental/elements/header.php or header_top.php, but none of my programming experience, what little there has been, allows for the kind of self-referential programming that would be necessary if we used one of the header files.

Hi,

I just tried myself and the above code works. Try applying it in Chromes Dev tools and you'll see.

The fact that it does not work only shows that the changes are not applied when putting it into main.less like that.

So you could go on changing the header.less file in /build or append !important to your changes (thats dirty). Either way, changes like this should only be made when setting up elemental as a new theme. And dont forget the z-index or the page will scroll over your header.

And as always: delete the Cache :)

Okay, the code works, but now the question is where do I need to place this code in order to make it be called properly so it will work on the site if/when I take it live. I appreciate the help and the proof of concept for CSS, and that addresses whether or not this can be done in CSS in Concrete5, but it still doesn't help me get it working live.

Okay... finally got it figured out, but now I need to make sure that my body content doesn't start below the header. Thank you so much for your help.

Ok, good, now just add



to your main.less (Line 73).

But I would rather make the header a little thinner, in the original elemental theme, it has bulky 30px paddings on top and bottom and this seems very thick for a "omnipresent header".

So if you change header height, you might also play around with the padding-top of <main> until it just fits.

Have fun trying :)

Hi everyone

Works fine in 5.7.4 and 5.75 as long as you are not logged in as administrator. Once you click, on page settings icon, the web design option can no longer be seen. It somehow hidden due to the formatting. It somehow breaks the format of the add content dialog box too.

Is there anything can be done about the code? Or perhaps can it be set so it checks to see if the admin top bar is activated. If the admin is logged in, ignore the custom css and if not, display it? Some thing like if / else command?

I'm not really an expert, just following the directions as posted and having problems troubleshooting it to find out what's conflicting with what. Any help is appreciated.

By the way, regarding creating a copy of the elemental theme, it might help people who come across this thread to mention that Elemental in 5.7.5 no longer has a description.txt. Even if you add one yourself, the description is not being pulled from it. The description is actually embedded in page_theme.php.

Thank you in advance for any help you can offer.

I didn't read the messages above so my reply is only to this post.

First of all you should scope the selector to your theme page to not affect the Concrete5 editing interface:



When the toolbar is visible the page wrapper div has the class .ccm-toolbar-visible, so you can do this:



This assumes that the theme you are using has a div that wraps the whole page with the code snippet:

Excellent. Thank you so much. That solved the problem. I did have to add a z-index to it though otherwise the page would roll on top of the header bar instead of under it. Thanks again.

I feel a bit silly asking but(and of course late to the party!) but do I place these edits in the LESS files? i.e. header.less?

Also, where do I put



Which file(s) does it go in? I don't see <body> within any files...

I'm using concrete5.7.5.6 with the elemental theme and SSHing to the server for editing.. I did manage to get the header fixed but I am assuming the wrapper is my missing link because all the pages(and side editing bar) are not wrapped properly and are tucked underneath the header.

EDIT:

Well, I ended up using the solution from above by editing main.less and adding



My issue is still the top of the left toolbar "Page Settings" is still cut off when using this solution. Other than that I guess I just needed to read what had already been stated...

EDIT 2:

I guess I didn't look everywhere.. Just in case anyone else needed the help I found the <body> tag under my themes element/header_top.php file(I already had pageWrapperClass). I am assuming this may be different for each theme.

Hi, just dropped by to say thanks to all.

As advised just added this on Page Settings > Design > Customize > Custom CSS > Apply to entire site



...and worked perfectly.

This on C5 8.2.1