Page Footer Area
Permalink 1 user found helpful
How can I delete the Page Footer Area in Elemental? Thanks
Which part - Can you be a little more specific?
All of it. It's currently empty and the empty space doesn't look good.
I would target the footer ids in your css file and set the display to none.
footer#footer-theme, footer#concrete5-brand { display: none; }
How do I access the css file? Thanks
How do I access the css file? Thanks
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.
Once you have acces to the files you simply follow the path and open the file in a text editor.
Here is screenshot of the file system on the host server. Which ones would be of interest? Thanks
Here is screenshot of the file system on the host server. Which ones would be of interest? Thanks
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.
\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.
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:
padding-top: 0px; will remove the gap.
Or you can edit the main area container styling in \concrete\themes\elemental\css\build\content.less
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. ;-)
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. ;-)
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
Thanks
If you have turned off caching for your site, yes.
Yes, caching is off.
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?
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?
I tried the above code and it deleted the wrong part, lol. I put it back.
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
Empty Page Footer Area
Empty Sitewide Footer Site Title Area
Empty Sitewide Footer Social Area
Thanks
And you want to remove those on every page? So that they'll be never displayed?
Yes
OK. Then you have to edit footer.php found in \concrete\themes\elemental\elements\
There you delete the following:
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
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.
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>
Viewing 15 lines of 18 lines. View entire code block.
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.
Thank you.
You're welcome. I hope this will help other users as well.
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.
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.
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; }
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.
You are right of course. I have a little experience with CSS3 and HTML5. Attached are 2 screenshots showing the empty pinkish area:
The display: none did seem to work. It just needs to be applied to the correct areas, perhaps.
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.
Whichever one gets rid of the onscreen blanks area would be my choice.
If they both do, then the first option is best.
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.
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.
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-...
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-...
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.
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.
I think I got it.
Thank you for mentioning that. I'll make a copy.