ByteEditor Site Builder

Wiki menu

Footer Customization

By following the steps in this instruction, you will be able to create your custom footer. You can use the code snippets provided in the guide to recreate this footer, or you can modify the steps to tailor the footer to your specific needs.
Footer Option 5

Step 1. Basic changes to the code

  1. Open the project folder
  2. Open the “App_Plugins” folder
  3. Create a folder for a custom footer, for example, name “Customization”
  4. Add a footer image 
  5. Create a test document named “footer5.html”
  6. Please copy the following code and paste it into the file
<footer class="site-footer footer-3 pt-5 pb-4 border-top">
    <div class="container">
        <div class="row flex-column-reverse flex-lg-row">
            {{logoItem = (design.logo.logo[0].mediaKey | mediaItemResolver); ""}}
            {{logoHoverItem = (design.logo.logoHover[0].mediaKey | mediaItemResolver); ""}}
            <div class="col-12 d-flex navbar align-items-center justify-content-center ps-3 pt-0">
                <div ng-if="logoItem !== null" class="d-inline-block position-relative" ng-class="{'has-logo-hover': logoHoverItem !== null}">
                    <img ng-if="design.logo.useCrop.includes('Use crop for Logo')" class="logo-default" ng-src="{{logoItem.mediaLink}}?{{getCropUrl(design.logo.logo[0].crops[0])}}" />
                    <img ng-if="!design.logo.useCrop.includes('Use crop for Logo')" class="logo-default" ng-src="{{logoItem.mediaLink}}?rmode=pad&ranchor=left&width=98&height=46&format=png&bgcolor=transparent" />
                    <img ng-if="logoHoverItem !== null && design.logo.useCrop.includes('Use crop for Logo Hover')" class="logo-hover" ng-src="{{logoHoverItem.mediaLink}}?{{getCropUrl(design.logo.logoHover[0].crops[0])}}" />
                    <img ng-if="logoHoverItem !== null && !design.logo.useCrop.includes('Use crop for Logo Hover')" class="logo-hover" ng-src="{{logoHoverItem.mediaLink}}?rmode=pad&ranchor=left&width=98&height=46&format=png&bgcolor=transparent" />
                </div>
                <div ng-if="logoItem === null" class="navbar-brand" style="color: var(--footer-link-color);">
                    {{websiteName}}
                </div>
            </div>
            <div class="col-12">
                <hr class="border-bottom">
            </div>
            <div class="col-lg-7">
                <div class="row">
                    <div ng-repeat="footerLink in block.data.footerLinks.contentData" class="col-lg-3 text-center text-lg-start justify-content-lg-start d-flex justify-content-center mb-3">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <h5>{{footerLink.groupName}}</h5>
                            </li>
                            <li ng-repeat="link in footerLink.links" class="nav-item mb-2">
                                <a ng-if="link.url" class="nav-link p-0">
                                    <span class="d-inline-flex gap-1 align-items-center">
                                        {{link.name}}
                                        <svg ng-if="link.target === '_blank'" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
                                            <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
                                        </svg>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <umb-block-grid-render-area-slots ng-click="$event.stopPropagation()"></umb-block-grid-render-area-slots>
            </div>
            <div class="col-12">
                <hr class="border-bottom">
            </div>
        </div>
        <div class="pt-4 text-center lead-sm">
            <p class="mb-0">{{block.data.copyrightMessage}}</p>
        </div>
    </div>
</footer>
Screenshot At Nov 13 06 11 36

6. Open the “Views” folder
7. Open the “Partials” folder
8. Create a test document named “footer5.cshtml"
9. Please copy the following code and paste it into the file

@using Umbraco.Cms.Core.Models
@using Umbraco.Cms.Core.Models.Blocks
@using Umbraco.Cms.Web.Common
@using Microsoft.Extensions.Configuration
@inject UmbracoHelper _umbracoHelper
@inject IConfiguration _configuration
@{
    IPublishedContent? assignedContentItem;
    try
    {
        assignedContentItem = _umbracoHelper.AssignedContentItem;
    }
    catch
    {
        assignedContentItem = null;
    }
    var design = ViewData["Design"] as Design;
    var settings = ViewData["Settings"] as Settings;
    var footerBlock = settings?.Footer?.FirstOrDefault(e => e.Content.ContentType.Alias == "footerBlock");
    var footerLinks = footerBlock?.Content.Value<BlockListModel>("footerLinks")?.Select(x => x.Content).OfType<FooterLinksGroup>()
    ?? Enumerable.Empty<FooterLinksGroup>();
    var buttons = footerBlock?.Content.Value<BlockListModel>("socialMediaButtons")?.Select(x => x.Content).OfType<SocialButton>()
    ?? Enumerable.Empty<SocialButton>();
    var copyrightMessage = footerBlock?.Content.Value<string>("copyrightMessage")
    ?? string.Empty;
}

<footer class="footer footer-4" style="
background-color: @design?.BaselineColors?.Footer.Background;
--footer-link-color: @design?.BaselineColors?.Footer.Link;
--footer-link-hover-color: @design?.BaselineColors?.Footer.LinkHover;
--footer-title: @design?.BaselineColors?.Footer.Title; --footer-text-color: @design?.BaselineColors?.Footer.CopyrightMessage;
">
    <div class="container">
        <div class="row">
            <div class="col-12 d-flex justify-content-center pb-4">
                <a class="@(design?.Logo != null ? "d-inline-block position-relative" : "navbar-brand") @(design?.LogoHover != null ? "has-logo-hover" : "")"
                    href="/" style="color: @design?.BaselineColors?.Footer.Link; !important;">
                    @await Html.PartialAsync("logo", new ViewDataDictionary(ViewData) { { "imageCropAnchor", ImageCropAnchor.Left } })
                </a>
                
            </div>
            <div class="col-12">
            <hr class="border-bottom">
            </div>
            <div class="col-lg-7">
                <div class="row">
                    @{
                        RenderFooterLinks(footerLinks, "col-lg-3 d-flex text-center text-lg-start justify-content-center justify-content-lg-start mb-4 mb-md-3");
                    }
                </div>
            </div>
            <div class="col-lg-3">
                @if (footerBlock?.Areas.Any(a => a.Any()) ?? false)
                {
                    @await Html.GetBlockGridItemAreasHtmlAsync(footerBlock)
                }
            </div>
            <div class="col-12">
                <hr class="border-bottom">
            </div>
        </div>
        <div class="pt-4 mt-4 mt-md-2 text-center lead-sm">
            <p class="mb-0 lh-1">@copyrightMessage</p>
        </div>
    </div>
</footer>

@functions {
    private void RenderFooterLinks(IEnumerable<FooterLinksGroup>? footerLinks, string divClass)
    {
        foreach (var footerLink in footerLinks ?? Enumerable.Empty<FooterLinksGroup>())
        {
            <div class="@divClass">
                <ul class="footer-nav flex-column">
                    <li>
                        <h5 class="footer-title">@footerLink?.GroupName</h5>
                    </li>
                    @foreach (var link in footerLink?.Links ?? Enumerable.Empty<Link>())
                    {
                        <li>
                            <a class="nav-link p-0" href="@link?.Url" target="@link?.Target">
                                <span class="d-inline-flex gap-2 align-items-center">
                                    @link?.Name
                                    @if (link?.Target == "_blank")
                                    {
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                                         <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
                                            <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
                                        </svg>
                                    }
                                </span>
                            </a>
                        </li>
                    }
                </ul>
            </div>
        }
    }
    private void RenderFooterButtons(IEnumerable<SocialButton> footerButtons, int footerOption)
    {
        var lastButton = footerButtons.LastOrDefault();
        foreach (var button in footerButtons)
        {
            if (!string.IsNullOrWhiteSpace(button?.Link?.Url))
            {
                <li class="@(button.Equals(lastButton) ? "" : "me-3")">
                    <a class="social-holder link-body-emphasis" href="@button.Link.Url" target="@button.Link.Target">
                        @{
                            var icon = button.Icon;
                            if (icon is not null)
                            {
                                <span class="social" style="background-image: url(@icon?.GetCropUrl(width: 38, height: 38)); 
                                                                                                                                                                                                                                                                                                                                                                                                                           margin-bottom: @(footerOption == 0 ? "0" : "5")px;">
                                </span>
                            }
                        }
                    </a>
                </li>
            }
        }
    }
}
Screenshot At Nov 13 06 10 48

⚠ Note

You can download the Customisation folder with the files here.

10. Open the project in Visual Studio
11. Open appsettings.json file
12. Copy the following code and paste it into the file 

"ByteEditor": {
  "CustomFooters": [
    {
      "BackOfficeView": "/App_Plugins/Customizations/footer5.html",
      "BackOfficeImage": "/App_Plugins/Customizations/Footer_Option_5.jpg",
      "BackOfficeDescription": "Option 5",
      "RazorView": "footer5"
    }
  ]
}
Screenshot At Nov 13 06 35 59
Previous
Next
Built with ByteEditor