Forums

How to make an area "Accent"

Permalink
Hi,

I see the page footer in some of the pages (in Elemental theme of 5.7) like home page, the page footer area's background color is nice and when I check the CSS, that's the accent-background-color. However, when I create a new page on my own, I can not find the way to make the page footer area "Accent" to have that color. My question is: how do I make the page footer area "Accent"?
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi gohyc,

What your seeing is a custom area class that injects classes into the page. In the Elemental theme directory, there is a file called page_theme.php. In that file you can set custom classes areas (and a whole lot more).

public function getThemeAreaClasses()
{
    return array(
        'Page Footer' => array('area-content-accent')
    );
}


.area-content-accent is the class that applies the background color
div.ccm-page div.area-content-accent {
  background-color: #f8faf1;
  margin-top: 80px;
  padding: 65px 0px 65px 0px;
}


Elemental also uses theme presets which allow you to customize colors, fonts, backgrounds, and more.

Here are the steps to do it.
http://imgur.com/Cp0uP8r
gohyc replied on at Permalink Reply
When I create a new empty page, how do I make the Page Footer area to use this area-content-accent?
gohyc replied on at Permalink Reply 1 Attachment
I always get "Permission Denied" when I try to "Edit Area Design". I am in administrators group.

I have also attached a screenshot of the Area permissions.