Umbraco Block Grid Get Parent settings from Child Block

Questions
1

Hi,

I have hit a bit of an issue on a site I am building, we have some block grid, that we can set a color on, Which is normally the outer container, for HTML that works ok.

But the issue I am now having is the fact that we need to set a style on the child blocks that are in the container if a colours set as the back ground.

So Example.

Outer Block would have a back colour and inside the container we have up to 4 columns depending on the block been used.

Each of the cols would then need to check the parent container to see if a back color is set, if it is then we need to apply a style at that point.

The problem is I can’t apply the style on the outer container, as if one or more of the cols dose not have a back color then the text style can’t be applied.

I have a work around in place I set the back color again on each of the cols that needs it. But this is just a work around and I can see it annoying the customer.

I just need a way to get he settings on the outer container from the child block in the container. If that make sence.

Thanks
Darren

2

Hey @darrenhunterEmerald,
there are ways to check this but may be more complex that using conditional CSS

e.g. If the outer container has a class of ‘dark’ then make the text ‘light’ and vice versa.

I have it set up like this in UmBootstrap using Bootstraps conditional CSS.

Please feel to install it and use the code.

3

To get this to work the way it needs to work, it has to write additional DIV before the content is generated.

See:

<div class="h-100 textBoxPaddingFix" @Html.Raw(getRowStyle()) > @*p-3*@
    <!--This div is used to add the border colour-->
    @if(BuildBorderWrapper() !=""){
        <div class="@BuildBorderWrapper() h-100">
            @{

                InnerRender();

            }
            <!--Area Content End Here-->
        </div>
    } else {
        <!--No DIV Needed-->
        InnerRender();
    }

</div>

So I have some code that check my setting to see if the back ground colour is set,

 Boolean hasBackGroundColour = colSettingsHelper.hasBackGroundColour();

 public void GetSettings() {

     if(mode == 0)
     {
         if (Setup)
         {

             colSettings.cssClass = Model.Settings.Value<string>("class");
             colSettings.setABackGroundImage = Model.Settings.Value<IPublishedContent>("setABackGroundImage");
             colSettings.backgroundClass = Model.Settings.Value<string>("backgroundClass");
             colSettings.colourClass = Model.Settings.Value<string>("textColour");
             settingsName = Model.Settings.ContentType.Alias;
             parentName = Model.Content.ContentType.Alias.ToUpper();
         }
     }

     if(mode == 1)
     {
         if (Setup)
         {
             colSettings.cssClass = model[0].Settings.Value<string>("class");
             colSettings.setABackGroundImage = model[0].Settings.Value<IPublishedContent>("setABackGroundImage");
             colSettings.backgroundClass = model[0].Settings.Value<string>("backgroundClass");
             colSettings.colourClass = model[0].Settings.Value<string>("textColour");
             settingsName = model[0].Settings.ContentType.Alias;
             parentName = model[0].Content.ContentType.Alias.ToUpper();
         }
     }

 }

 public Boolean hasBackGroundColour()
 {
     if(colSettings.backgroundClass != "")
     {
         return true;
     }

     return false;
 }

This works for the current item but what I like is if the flag is false then to check the outer container at this point programmatically. To see if a back grounds set.

Regards
Darren

4

Thank you for providing the example code.
I would still suggest using conditional CSS to change the inner colour if the outer colour is set.
If you want to make it more robust you can set a data attribute and use that as the condition in the CSS e.g. data-bg-set="true"

[data-bg-set="true" ]  .myText {
color:  #ff000;
}
5

Sorry I may not be explaining it very well.

We need to add a an extra wrapper to each of the col if the outer (Parent) has a back color set. That then adds the correct positioning for the text.

I done this my adding code in to the block renderer that checks if the back color of the childs set and this works.

But I like to be able to check the row that each of the cols been rended in to see if that got a background color.

So I need to go back up the tree from area.cshtml to what areas.cshtml and know what called the area.cshtml from areas.cshtml.

Thouse this is a CSS issues at hart it also a settings issue on the block, I feel it needs to be addressed in area and areas .cshtml files and not in the CSS it self.

So again my Question is how can I see the parent block from the child block.

This code may show what I am trying to do, this works for current item in area.cshtml.

async void  Normal(){
    /*
    * Original render method. 
    */
    if(hasBackGroundColour) {
         <!--Padding Added-->
        <div class="RteTextFixPadding">
            @await Html.GetBlockGridItemsHtmlAsync(Model)
        </div>
    } else {
         <!--No Padding Added-->
         @await Html.GetBlockGridItemsHtmlAsync(Model)
    }

Thanks
Darren

So I need to do this programmatically and not in CSS.

6

The site is also very close to launch with all the content in, we can’t just start rebuilding pages using new templates.

7

OK now I get it, you need to add a container based on whether the background colour is set.
I presume you need a container with padding etc when you add the background colour so the text doesn’t touch the edge or something similar.

Quick fix I have used many times is to create a variable that is set in the partial you check for the setting, then use viewdata to pass it to an if/else in the template.

8

Any chance you can post a example please so I can see how it works in Umbraco 13.

9

this is not been called by a controller per say it part of the inbuilt umbraco 13 functionality.

10

In which partial are you setting the background color?

11

Areas.cshtml, where I set the background colour.

I need to pass it to area.cshtml at this point.

12

So I usually do something like this:

var backgroundColour = hasSettings ? Model.Settings.Value<ColorPickerValueConverter.PickedColor>("layoutSettingsColourPicker") : null;

which you could then pass to other partials using viewdata:

ViewData["backgroundColour"] = backgroundColour;

I hope that helps.

13

Thank you that work a treat. Did exactly what I wanted thank you for your help.

14

My pleasure.
Please feel free to install UmBootstrap for lots of examples of manipulating Block Grid / List.

15

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.