dynamic classes for bodymain tags - Templates, (partial) views and macros

Victor 25 posts 146 karma points

Mar 19, 2018 @ 14:32

Dynamic classes for body/main tags

Hello, I'm having a problem integrating some HTML components, because it has some variations in their style, depending on the page they are. We use a class on the main tag to generate specific styles for that page and each individual component.

For example, my Image Gallery component has a specific margin or background color in one page, and a different one in another.

I created my structure in Umbraco with only one document type and template, and the rest of it is the components that composes a page.

Example:

This way in my Page template, I just get the first Document Type of my Content, iterate over it's children and use Umbraco.RenderTemplate, because each of them has their own template.

I looked upon answers for this, but every solution was using the current ID of a page, template or the document type alias, but for my case, because the user can create the pages dynamically and rearrange them at his will, I can't use this kind of solution.

Is there a good solution for this? What comes on top of my mind is creating a dropdown for the editor to select which class it will use in the page, but that ruins a bit of the usability depending how big is the content.

Copy Link

Nigel Wilson 945 posts 2077 karma points

Mar 19, 2018 @ 18:33

Hi Victor

If you are looking to set a body class then if I understand your issue, is it not just a property on the "Page" node as per your screenshot ? And if you make it mandatory then you can ensure it is set.

Or are you suggesting you need to set a dynamic css class for each of the items under the "Content" folder ?

Cheers, Nigel

Copy Link

Victor 25 posts 146 karma points

Mar 19, 2018 @ 18:39

Hi Nigel, thanks for answering.

For every page, I've a custom class in my main tag, it is the same thing as the body tag if it helps you understand. I need to set a dynamic CSS class in either the body or the main tag, it doesn't matter which one, they're both the same for me.

It could be a property on the Page node, but my problem with creating a property for the editor to choose, is that he won't know what each value represents on differences in each component.

Copy Link

Nigel Wilson 945 posts 2077 karma points

Mar 19, 2018 @ 19:03

Hey

OK - I understand the issue with a content editor and him/her knowing which setting to apply.

Sorry but it sounds like you've got an issue with the technical setup of the site if you have differing layouts per page but then are trying control the presentation of the site with only one primary document type. Again tho, I guess you strike a similar issue with a content editor knowing which document type to use.

The other possible way to control things is to have different templates available for the one document type, but again that comes back to the editor being able to set the right template.

What are the rules for determining which pages have different margins, etc, ? If you post those here we might be able to help with suggestions.

Nigel

Copy Link

Victor 25 posts 146 karma points

Mar 19, 2018 @ 19:54

Hey,

This is an example of my master template:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>@Umbraco.Field("pageTitle", recursive: true)</title>
    <meta name="description" content="@Umbraco.Field("pageDescription", recursive: true)">

    <link rel="stylesheet" href="~/Content/css/style.min.css">

<script src="~/Content/js/modernizr.js"></script>

</head>

<body>

    @RenderBody()

<script src="~/Content/js/plugins.min.js"></script>
<script src="~/Content/js/app.min.js"></script>

</body>
</html>

This is my only page template, which is rendered in the @RenderBody()

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Master.cshtml";
}

<main>
    @Html.Partial("Custom/Menu")

    @if (Model.Content.Children.Count() > 0)
    {
        foreach (var Content in Model.Content.Children.FirstOrDefault(x => x.DocumentTypeAlias == "contentStructure").Children)
        {
            @Umbraco.RenderTemplate(Content.Id)
        }
    }

    @Html.Partial("Custom/Footer")
</main>

This is a component template example, Image Gallery (from the first screenshot, ignore any possible errors like object null references, this is just an example):

<div data-component="article-slider">
    <div>
        <div class="div-to-slide">
            @foreach (var Article in Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("articleSliderComponentItems"))
            {
                <div class="article main">
                    <div class="content">
                        <div class="article-title">
                            <h2>@Article.GetProperty("articleSliderComponentItemTitle").Value</h2>
                        </div>
                        <div class="article-text">
                            @Article.GetProperty("articleSliderComponentItemText").Value
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

Now, imagine I've two different styles of this component (article-slider), and this style is based on a class/data attribute that I have on my main tag.

The CSS selectors which creates the style of this component, is one when I have X class on the main tag and another when I have Y class.

Here it is some generic CSS examples related to my problem:

main.classX [data-component='article-slider'] div {
    top: 45px;
}

main.classY [data-component='article-slider'] div {
    top: -150px;
}

What is the best way to do this?

I could create:

A dropdown with some kind of identifier for this component, managing on razor. (Like I mentioned at the end of my first post on this thread.)
A CSS selector based on the node document type alias isn't possible since all my content is inside the same page with the same doc alias.
A CSS selector based on the node ID doesn't works because of the problem I've with different styles of the same component.

Any suggestions?

Thanks in advance.

Copy Link

is working on a reply...

Flag this post as spam?

Dynamic classes for body/main tags