Extend header background color

[Pixeldust]

I'd like to extend the background color for the breadcrumbs and p-body-header section to the edge of the page, just like the header and navigation bar. I'd like it to look something like the rough mockup below. I'm using the Bolt style.

Can you please tell me if there's an easy way to do this?

 

[Russ]

It's quite the edit, let me know how this goes for you.

Template: PAGE_CONTAINER

Find:

<div class="p-body">

Add above:

        <div class="custom-row custom-breadcrumb">
            <div class="custom-pagewidth">
                <xf:macro id="breadcrumbs"
                          arg-breadcrumbs="{$breadcrumbs}"
                          arg-navTree="{$navTree}"
                          arg-selectedNavEntry="{$selectedNavEntry}" />
            </div>
        </div>
        <div class="custom-row custom-title">
            <div class="custom-pagewidth">
                <xf:if is="$headerHtml is not empty">
                    <div class="p-body-header">
                        {$headerHtml|raw}
                    </div>
                    <xf:elseif contentcheck="true" />
                    <div class="p-body-header">
                        <xf:contentcheck>
                            <xf:if contentcheck="true">
                                <div class="p-title {{ $noH1 ? 'p-title--noH1' : '' }}">
                                    <xf:contentcheck>
                                        <xf:if is="!$noH1">
                                            <h1 class="p-title-value">{$h1}</h1>
                                        </xf:if>
                                        <xf:if contentcheck="true">
                                            <div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
                                        </xf:if>
                                    </xf:contentcheck>
                                </div>
                            </xf:if>

                            <xf:if is="$description is not empty">
                                <div class="p-description">{$description}</div>
                            </xf:if>
                        </xf:contentcheck>
                    </div>
                </xf:if>
            </div>
        </div>

Go down a bit and find:

            <xf:if is="property('xbBreadcrumbLocation') == 'aboveboth'"> 
            <xf:ad position="container_breadcrumb_top_above" />
            <xf:macro id="breadcrumbs"
                arg-breadcrumbs="{$breadcrumbs}"
                arg-navTree="{$navTree}"
                arg-selectedNavEntry="{$selectedNavEntry}" />
            <xf:ad position="container_breadcrumb_top_below" />
            </xf:if>

Replace with:

            <xf:if is="property('xbBreadcrumbLocation') == 'aboveboth'"> 
            <xf:ad position="container_breadcrumb_top_above" />
            <xf:comment>
            <xf:macro id="breadcrumbs"
                arg-breadcrumbs="{$breadcrumbs}"
                arg-navTree="{$navTree}"
                arg-selectedNavEntry="{$selectedNavEntry}" />
            </xf:comment>
            <xf:ad position="container_breadcrumb_top_below" />
            </xf:if>

Then find:

            <xf:if is="property('xbBodyHeaderLocation') == 'aboveboth'"> 
                {$bodyHeader|raw}
            </xf:if>

Replace with:

            <xf:if is="property('xbBodyHeaderLocation') == 'aboveboth'"> 
<xf:comment>
                {$bodyHeader|raw}
</xf:comment>
            </xf:if>

Then in extra.less:

.custom-row
{
    display: block;
    padding-top: @xf-paddingMedium;
    padding-bottom: @xf-paddingMedium;
    &.custom-breadcrumb
    {
        background: @xf-contentBg;
        .p-breadcrumbs--parent
        {
            margin-bottom: 0;
        }
    }
    &.custom-title
    {
        background: @xf-contentAltBg;
    }
    .custom-pagewidth
    {
        margin: 0 auto;
        max-width: @xf-pageWidthMax;
    }
}

Hope that helps...

 

[Pixeldust]

This is amazing! Thank you so much!

As a side note, I would love to see this as an option in a future update of the style itself. I believe many people would find it useful.

 

[Russ]

So, I just realized a potentially far easier method without having to edit the templates.

Thought about it when you suggested it being an option. As long as you have both:

Body header location + Breadcrumb location set to: Above content and sidebar (Style properties -> Miscellaneous)

You should be able to add this into extra.less and it'll work. No need for a PAGE_CONTAINER edit.

#XF .p-body-inner
{
    max-width: 100%;
    padding: 0;
    .p-body-header
    {
        display: block;
        padding-top: @xf-paddingMedium;
        padding-bottom: @xf-paddingMedium;
        background: @xf-contentAltBg;
    }
    .p-breadcrumbs--parent
    {
        display: block;
        padding-top: @xf-paddingMedium;
        padding-bottom: @xf-paddingMedium;
        margin-bottom: 0;
        background: @xf-contentBg;
    }
    .p-body-main, .p-title, .p-description, .p-breadcrumbs 
    {
        max-width: @xf-pageWidthMax;
        padding-right: @xf-pageEdgeSpacer;
        padding-left: @xf-pageEdgeSpacer;
        margin: 0 auto;
    }
}

 

[Pixeldust]

So, I just realized a potentially far easier method without having to edit the templates.

This is amazing and looks great! Thank you so much!