.Net Core Renderer: --sf-background-color attribute wrongly encoded in the frontend for the section background

Incorrect character in the --sf-background-color attribute of a section causes it to be encoded in the frontend.

Oct 2, 2024
Knowledge

Title

URL Name

net-core-renderer-sf-background-color-attribute-wrongly-encoded-in-the-frontend-for-the-section-background

Article Number

000267216

Environment

Product: Sitefinity .NET Core Renderer Version: 14.4, 15.0, 15.1

Question/Problem Description

When using the .Net Core Renderer Section widget and setting background colors the inline variable that gets applied "--sf-background-color" and "--sf-background-image" is using the Unicode character " U+043E" for the "o" in backgr[o]und.

Can this be changed to use a non Unicode "o" character?

Steps to Reproduce

1) Create a .Net Core Page. 2) Add a Section and define a Background color for it. 3) Add a ContentBlock widget and some dummy text (just to see the background color in action) 4) Browse the page and check the <section> tag It is visible that the --sf-backgrоund-color gets encoded and looks like this: <section style="--sf-backgrоund-color: #FF4848" class="row pt-3 pb-3">

Clarifying Information

Error Message

Defect Number

536532

Enhancement Number

Cause

The issue is caused by a bug in the Sitefinity .NET Core Renderer

Resolution

Fixed in:

Sitefinity Patch 15.1.8327

Refer to Knowledge Base Article How to update Sitefinity to hotfix, internal build or a patch for instructions on how to download and install the fix.

Workaround

Consider using a custom SectionModel instead and correct the misspelling.

To do that:

1) Use a CustomSectionModel that inherit from SectionModel (the code of the .Net Core Renderer widgets are in Github: https://github.com/Sitefinity/sitefinity-aspnetcore-mvc-widgets/blob/master/Progress.Sitefinity.AspNetCore.Widgets/Models/Section/SectionModel.cs )

E.g:

using System;
using System.Collections;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Extensions.Localization;
using Progress.Sitefinity.AspNetCore.Configuration;
using Progress.Sitefinity.AspNetCore.Models;
using Progress.Sitefinity.AspNetCore.ViewComponents;
using Progress.Sitefinity.AspNetCore.Web;
using Progress.Sitefinity.AspNetCore.Widgets.Models.Common;
using Progress.Sitefinity.AspNetCore.Widgets.Models.Form;
using Progress.Sitefinity.AspNetCore.Widgets.Models.Section;
using Progress.Sitefinity.AspNetCore.Widgets.ViewComponents.Common;
using Progress.Sitefinity.RestSdk;
using Progress.Sitefinity.RestSdk.Dto;
using Progress.Sitefinity.RestSdk.OData;

namespace Renderer.Models;

public class CustomSectionModel : SectionModel
{
    private const string ColumnNamePrefix = "Column";
    private const string SectionName = "Section";
    private IRestClient service;
    private IStyleClassesProvider styles;

    public CustomSectionModel(IStyleClassesProvider styles, IRestClient service)
     : base(styles, service)
    {
        if (service == null)
            throw new ArgumentNullException(nameof(service));

        this.service = service;
        this.styles = styles;
    }

    public override async Task<SectionViewModel> InitializeViewModel(SectionEntity entity)
    {
        if (entity == null)
            throw new ArgumentNullException(nameof(entity));

        var viewModel = new SectionViewModel();
        viewModel.TagName = entity.TagName;
        viewModel.ColumnsCount = entity.ColumnsCount;
        viewModel.ColumnProportions = entity.ColumnProportionsInfo;
        viewModel.ColumnNames = PopulateColumnNames(entity);
        viewModel.ColumnTitles = viewModel.ColumnNames.Select(name => ConstructColumnLabel(entity, name)).ToList();
        viewModel.SectionClasses = this.ConstructSectionClass(entity);
        viewModel.ColumnsClasses = this.ConstructColumnClasses(entity);
        viewModel.SectionStyle = entity.SectionBackground != null ? await this.ConstructBackgroundStyle(entity.SectionBackground) : null;
        viewModel.ColumnStyles = ConstructColumnStyles(entity);
        viewModel.ShowVideo = entity.SectionBackground != null && entity.SectionBackground.BackgroundType == Background.Video;
        viewModel.VideoUrl = viewModel.ShowVideo ? await this.GetVideoUrl(entity.SectionBackground) : null;
        viewModel.Attributes = entity.Attributes;
        viewModel.ColumnsAttributes = ConstructColumnsAttributes(entity);
        if (entity.Attributes != null && entity.Attributes.TryGetValue("Section", out IList<AttributeModel> value))
        {
            viewModel.SectionAttributes = value;
        }

        return viewModel;

       
    }

    private static IList<IList<AttributeModel>> ConstructColumnsAttributes(SectionEntity entity)
    {
        var columnsAttributes = new List<IList<AttributeModel>>();
        for (int i = 0; i < entity.ColumnsCount; i++)
        {
            string columnName = ColumnNamePrefix + (i + 1);
            var attributes = new List<AttributeModel>();
            if (entity.Attributes != null && entity.Attributes.ContainsKey(columnName))
            {
                foreach (var attribute in entity.Attributes[columnName])
                {
                    attributes.Add(new AttributeModel
                    {
                        Key = attribute.Key,
                        Value = attribute.Value,
                    });
                }
            }

            columnsAttributes.Add(attributes);
        }

        return columnsAttributes;
    }

    private async Task<string> GetVideoUrl(BackgroundStyle backgroundStyle)
    {
        if (backgroundStyle.BackgroundType == Background.Video && backgroundStyle.VideoItem != null && backgroundStyle.VideoItem.Id != null)
        {
            var video = await this.GetItemWithFallback<VideoDto>(backgroundStyle.VideoItem.Id, backgroundStyle.VideoItem.Provider);
            return video.Url;
        }

        return null;
    }

    private async Task<string> ConstructBackgroundStyle(BackgroundStyle backgroundStyle)
    {
        switch (backgroundStyle.BackgroundType)
        {
            case Background.None:
                return string.Empty;
            case Background.Color:
                return "--sf-background-color: " + backgroundStyle.Color;
            case Background.Image:
                if (backgroundStyle.ImageItem == null && backgroundStyle.ImageItem.Id != null)
                    return string.Empty;

                var image = await this.GetItemWithFallback<ImageDto>(backgroundStyle.ImageItem.Id, backgroundStyle.ImageItem.Provider);

                var imageUrl = image != null ? image.Url : null;
                var imagePosition = (string)null;

                switch (backgroundStyle.ImagePosition)
                {
                    case Position.Fill:
                        imagePosition = "--sf-background-size: 100% auto;";
                        break;
                    case Position.Center:
                        imagePosition = "--sf-background-position: center";
                        break;
                    default:
                        imagePosition = "--sf-background-size: cover;";
                        break;
                }

                return $"--sf-backgrоund-image: url({imageUrl});{imagePosition}";
            default:
                return string.Empty;
        }
    }

    private Task<TDO> GetItemWithFallback<TDO>(string id, string provider)
          where TDO : SdkItem
    {
        var args = new BoundFunctionArgs()
        {
            Id = id,
            Name = "Default.GetItemWithFallback()",
            AdditionalQueryParams = new Dictionary<string, string>() { { "sf_fallback_prop_names", "*" }, { "$select", "*" } },
            Provider = provider,
        };

        return (this.service as IODataRestClient).ExecuteBoundFunction<TDO>(args);
    }

    private IList<string> ConstructColumnClasses(SectionEntity entity)
    {
        var columnStyles = new List<string>();
        for (int i = 0; i < entity.ColumnsCount; i++)
        {
            columnStyles.Add(this.ConstructColumnClass(entity, ColumnNamePrefix + (i + 1)));
        }

        return columnStyles;
    }

    private string ConstructColumnClass(SectionEntity entity, string columnName)
    {
        StringBuilder columnCss = new StringBuilder();
        PaddingStyle columnPaddings = null;
        entity.ColumnsPadding?.TryGetValue(columnName, out columnPaddings);
        var paddings = this.styles.GetPaddingsClasses(columnPaddings);

        if (!string.IsNullOrEmpty(paddings))
        {
            columnCss.Append(paddings + " ");
        }

        var customCss = entity.CustomCssClass != null && entity.CustomCssClass.ContainsKey(columnName) ? entity.CustomCssClass[columnName] : null;
        if (customCss != null && !string.IsNullOrEmpty(customCss.Class))
        {
            columnCss.Append(customCss.Class);
        }

        return columnCss.ToString().TrimEnd();
    }

    private string ConstructSectionClass(SectionEntity entity)
    {
        StringBuilder sectionCss = new StringBuilder();

        var paddings = this.styles.GetPaddingsClasses(entity.SectionPadding);
        var imageBgClass = this.styles.StylingConfig.ImageBackgroundClass;
        var videoBgClass = this.styles.StylingConfig.VideoBackgroundClass;

        if (!string.IsNullOrEmpty(paddings))
        {
            sectionCss.Append(paddings + " ");
        }

        var margins = this.styles.GetMarginsClasses(entity.SectionMargin);
        if (!string.IsNullOrEmpty(margins))
        {
            sectionCss.Append(margins + " ");
        }

        if (entity.SectionBackground != null)
        {
            if (entity.SectionBackground.BackgroundType == Background.Image)
            {
                sectionCss.Append(imageBgClass + " ");
            }

            if (entity.SectionBackground.BackgroundType == Background.Video)
            {
                sectionCss.Append(videoBgClass + " ");
            }
        }

        var customCss = entity.CustomCssClass != null && entity.CustomCssClass.ContainsKey(SectionName) ? entity.CustomCssClass[SectionName] : null;
        if (customCss != null && !string.IsNullOrEmpty(customCss.Class))
        {
            sectionCss.Append(customCss.Class);
        }

        return sectionCss.ToString().TrimEnd();
    }

    private static string ConstructColumnLabel(SectionEntity entity, string columnName)
    {
        if (entity.Labels != null && entity.Labels.ContainsKey(columnName))
        {
            return entity.Labels[columnName].Label;
        }

        return null;
    }

    private static IList<string> PopulateColumnNames(SectionEntity entity)
    {
        var columnNames = new List<string>();
        for (var i = 0; i < entity.ColumnsCount; i++)
        {
            columnNames.Add(ColumnNamePrefix + (i + 1));
        }

        return columnNames;
    }


    private static string ConstructBackgroundBaseStyle(SimpleBackgroundStyle backgroundStyle)
    {
        switch (backgroundStyle.BackgroundType)
        {
            case BackgroundBase.None:
                return string.Empty;
            case BackgroundBase.Color:
                return "--sf-background-color: " + backgroundStyle.Color;
            default:
                return string.Empty;
        }
    }

    private static IList<string> ConstructColumnStyles(SectionEntity entity)
    {
        var columnStyles = new List<string>();
        for (int i = 0; i < entity.ColumnsCount; i++)
        {
            var key = ColumnNamePrefix + (i + 1);
            var columnStyle = entity.ColumnsBackground != null && entity.ColumnsBackground.ContainsKey(key) ? ConstructBackgroundBaseStyle(entity.ColumnsBackground[key]) : string.Empty;
            columnStyles.Add(columnStyle);
        }

        return columnStyles;
    }

  
}

2) Change the main.css which contains the same issue.

Create a folder structure within the wwwroot folder like this:

/sfrenderer/styles/main.css

Within the main.css replace the problematic "--sf-background-color" with the correct one.

/*sc- is a selector prefix meaning 'sitefinity core'. It can be changed by your preference*/

/*width styles*/
.-sc-w-5rem {
    width: 5rem;
}

.-sc-w-10rem {
    width: 10rem;
}

:root {
    --sf-backgrоund-image: transparent;
    --sf-backgrоund-image: none;
    --sf-background-size: auto;
    --sf-background-position: 0% 0%;
}

.sc-file-icon-extension {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(0%, -50%);
    font-size: 0.625em;
}

.row,
[class^="col-"] {
    --sf-background-color: transparent;
    background-color: var(--sf-background-color);
}

.sc-video__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sc-video__element {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);
}

.-sc-video {
    position: relative;
}

.row.-sc-image {
    background-color: var(--sf-background-color);
    background-image: var(--sf-backgrоund-image);
    background-size: var(--sf-background-size);
    background-position: var(--sf-background-position);
    background-repeat: no-repeat;
}

.sc-accordion-header {
    position: relative;
}

.accordion-button:not(.empty) + .sc-accordion-link {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 90%;
    font-size: 1rem;
    margin-left: 1.25rem;
    margin-top: 1rem;
    z-index: 10;
}

.accordion-button.empty::after {
    display: none;
}

.accordion-header .nav-link {
    font-weight: 500;
    color: #0c63e4;
}
/*#endregion Bootstrap navigation */
/*#region links */
a {
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }
/*#endregion  links */
/*#region External login buttons */
.-sf-google-button {
    color: #D54F50;
}

    .-sf-google-button:hover {
        color: #fff;
        background-color: #D54F50;
    }

.-sf-facebook-button {
    color: #3E86B4;
}

    .-sf-facebook-button:hover {
        color: #fff;
        background-color: #3E86B4;
    }

.-sf-github-button {
    color: #333;
}

    .-sf-github-button:hover {
        color: #fff;
        background-color: #333;
    }

.-sf-yahoo-button {
    color: #410093;
}

    .-sf-yahoo-button:hover {
        color: #fff;
        background-color: #410093;
    }

.-sf-linkedin-button {
    color: #0077b5;
}

    .-sf-linkedin-button:hover {
        color: #fff;
        background-color: #0077b5;
    }

.-sf-microsoft-button {
    color: #00a1f1;
}

    .-sf-microsoft-button:hover {
        color: #fff;
        background-color: #00a1f1;
    }

.-sf-adfs-button {
    color: #00a1f1;
}

    .-sf-adfs-button:hover {
        color: #fff;
        background-color: #00a1f1;
    }

.-sf-windows-button {
    color: #00bcf2;
}

    .-sf-windows-button:hover {
        color: #fff;
        background-color: #00bcf2;
    }

.-sf-twitter-button {
    color: #1da1f2;
}

    .-sf-twitter-button:hover {
        color: #fff;
        background-color: #1da1f2;
    }
/*#endregion External login buttons*/

3) Open the /Views/Shared/_Layout.cshtml base template and comment out the line:

<link rel="stylesheet" href="@Progress.Sitefinity.AspNetCore.Constants.PrefixRendererUrl("styles/main.css")" type="text/css" />

replace it by this:

<link rel="stylesheet" href="sfrenderer/styles/main.css" type="text/css" />

4) Finally to use the CustomSectionModel add it in this way to the Program.cs:

builder.Services.AddScoped<ISectionModel, CustomSectionModel>();

5) Build the Renderer.

Notes

Keyword Phrase

Last Modified Date

4/24/2026 1:32 AM

.Net Core Renderer: --sf-background-color attribute wrongly encoded in the frontend for the section background

Files(0)

Was this article helpful?

Was this article helpful?

.Net Core Renderer: --sf-background-color attribute wrongly encoded in the frontend for the section background

Information

Related Articles