Page Footer Area

Permalink
How can I delete the Page Footer Area in Elemental? Thanks

Engine44
View Replies: View Best Answer
juddc replied on at Permalink Reply
juddc
Which part - Can you be a little more specific?
Engine44 replied on at Permalink Reply
Engine44
All of it. It's currently empty and the empty space doesn't look good.
juddc replied on at Permalink Reply
juddc
I would target the footer ids in your css file and set the display to none.

footer#footer-theme, footer#concrete5-brand {
   display: none;
}
Engine44 replied on at Permalink Reply
Engine44
How do I access the css file? Thanks
Engine44 replied on at Permalink Reply
Engine44
How do I access the css file? Thanks
HardOne replied on at Permalink Reply
HardOne
That depends on where you are developing your site. As you said that you are a beginner in web development I guess you are developing your site on your webhost's server. So you have to access the files via ftp or via the file manager provided by your webhost, just like you've uploaded the installation files of C5.

Once you have acces to the files you simply follow the path and open the file in a text editor.
Engine44 replied on at Permalink Reply 1 Attachment
Engine44
Here is screenshot of the file system on the host server. Which ones would be of interest? Thanks
Engine44 replied on at Permalink Reply 1 Attachment
Engine44
Here is screenshot of the file system on the host server. Which ones would be of interest? Thanks
HardOne replied on at Permalink Reply
HardOne
Taking the following path as an example: \concrete\themes\elemental\css\build\footer.less

\concrete\ is the folder you have to navigate to, inside this folder you go to the folder named "themes", then to "elemental" folder and so on until you see the file "footer.less". Then download the file and open it in a text editor.
HardOne replied on at Permalink Reply 4 Attachments
HardOne
If the footer area is really empty, then it should not display. I guess that you you want to minimize the space between Main area and Sitewide Footer Site Title. The space is caused by two css settings. The container of the main area has a bottom padding of 80px and the footer a top padding of 30px.

You can either edit the css in \concrete\themes\elemental\css\build\footer.less

search for:
section {
    border-top: 1px solid @footer-section-divider-color;
    padding-top: 30px;
    padding-bottom: 30px;
  }


padding-top: 0px; will remove the gap.

Or you can edit the main area container styling in \concrete\themes\elemental\css\build\content.less

main {
    background-color: @page-background-color;
    /*
    padding-bottom: 80px;
    */
    div.container:last-child {
      padding-bottom: 80px;
    }
  }


Changing the value of div.container:last-child { padding-bottom: 80px } to something valuable for you should do it.
I've attached some before/after screenshots. ;-)
Engine44 replied on at Permalink Reply
Engine44
I made the file changes as you suggested but noticed no change. I used the code editor in GoDaddy and didn't download the files. Are the changes supposed to appear immediately?

Thanks
HardOne replied on at Permalink Reply
HardOne
If you have turned off caching for your site, yes.
Engine44 replied on at Permalink Reply
Engine44
Yes, caching is off.
Engine44 replied on at Permalink Reply
Engine44
Above, another member suggested this:

I would target the footer ids in your css file and set the display to none.

footer#footer-theme, footer#concrete5-brand {
display: none;
}

What do you think?
Engine44 replied on at Permalink Reply
Engine44
I tried the above code and it deleted the wrong part, lol. I put it back.
Engine44 replied on at Permalink Reply
Engine44
There are three areas I would like to get rid of:

Empty Page Footer Area
Empty Sitewide Footer Site Title Area
Empty Sitewide Footer Social Area

Thanks
HardOne replied on at Permalink Reply
HardOne
And you want to remove those on every page? So that they'll be never displayed?
Engine44 replied on at Permalink Reply
Engine44
Yes
HardOne replied on at Permalink Best Answer Reply 2 Attachments
HardOne
OK. Then you have to edit footer.php found in \concrete\themes\elemental\elements\

There you delete the following:
<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <?php
                $a = new GlobalArea('Footer Site Title');
                $a->display();
                ?>
            </div>
            <div class="col-sm-3">
                <?php
                $a = new GlobalArea('Footer Social');
                $a->display();
                ?>
            </div>


That will remove Footer Social and Footer Site Title.

To remove the highlighted footer you have to remove the accent-class. To do so, see attached screenshots.

edit: I forgot to tell you how to remove the page footer.

Edit default.php, located in \concrete\themes\elemental\ and delete the following
<?php
$a = new Area('Page Footer');
$a->enableGridContainer();
$a->display($c);
?>


Edit: Important Notice! The changes proposed above are meant to be exemplary. One should never edit core files unless being aware of the consequences.

In this case you should copy elemental theme and make your custom one out of it. Here's a howto:http://www.concrete5.org/documentation/how-tos/designers/how-to-cop...
By doing this you prevent your changes from being overriden by core updates.
Engine44 replied on at Permalink Reply
Engine44
Thank you.
HardOne replied on at Permalink Reply
HardOne
You're welcome. I hope this will help other users as well.
HardOne replied on at Permalink Reply
HardOne
As I stated above, an empty area is not displayed at all. So it cannot cause a gap being displayed.

If you take a look at the screenshots and the markup you'll see that the gap is caused by the main area's bottom padding and the sitewide footers top padding.

footer#footer-theme, footer#concrete5-brand {
display: none;
}
will hide the whole footer of your page from being displayed. I can't believe that you want that and I don't believe that this will solve your problem.

Despite that, you said that you are new to webdesign and development. Am I correct, that you do not know html and css? If so, you should learn what html and css is and how to make a simple html page styled by css before you even think about editing themes in C5. You would never try to edit a text written in chinese language, when you're not speaking chinese. ;-) And html and css are way easier to learn than chinese.
Engine44 replied on at Permalink Reply 2 Attachments
Engine44
You are right of course. I have a little experience with CSS3 and HTML5. Attached are 2 screenshots showing the empty pinkish area:
Engine44 replied on at Permalink Reply
Engine44
The display: none did seem to work. It just needs to be applied to the correct areas, perhaps.
HardOne replied on at Permalink Reply
HardOne
Yes, you have two options to choose from. Hiding the content from being displayed to humans, thus being in the markup, or you delete the areas out of the template.
Engine44 replied on at Permalink Reply
Engine44
Whichever one gets rid of the onscreen blanks area would be my choice.
Engine44 replied on at Permalink Reply
Engine44
If they both do, then the first option is best.
HardOne replied on at Permalink Reply
HardOne
This thread is messed up and I'm sorry for that.

To make one thing clear. In edit mode empty areas are displayed and are editable. But if they are empty and have no style classes applied, they are not displayed to the audience visiting your site, thus not taking any space on your site. If you want to edit a themes template in the way of not providing those areas to appear in general, you have to remove them from the templates php files. So they simply do not exist anymore.
mhawke replied on at Permalink Reply
mhawke
So... I hate to pour water on all the work that's gone into this thread but there is a serious problem with editing 'core' files that live inside the /concrete folder. All your changes will work fine until you update your website to a new version of concrete5 which will happen soon because version 5.7.4 is almost ready to come out. When you update to a newer version, concrete5 looks in the /updates folder for it's 'core' files which will include new, fresh copies of all the Elemental theme's files which, of course, don't include all the changes you made.

You need to made a copy of the Elemental theme files and make your changes to the copy.

https://www.concrete5.org/community/forums/themes/problem-with-core-...
HardOne replied on at Permalink Reply
HardOne
You are absolutely right. I should have mentioned that and also point to the existing howto explaining how to do that.

Tutorial can be found here:http://www.concrete5.org/documentation/how-tos/designers/how-to-cop...

I'll edit my answer. Thank you very much for your input.
Engine44 replied on at Permalink Reply
Engine44
I think I got it.
Engine44 replied on at Permalink Reply
Engine44
Thank you for mentioning that. I'll make a copy.