Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Christoffer Frede 34 posts 144 karma points
    Sep 18, 2024 @ 11:12
    Christoffer Frede
    0

    Block grid change the html that is rendered in the frontend ?

    Hi all. i am currently trying to develop a umbraco 13 website using the block grid. but i would like to change the html that gets rendered from the frontend, so that i can add bootstrap or some other responsive framework and have more control over the frontend html in general. is there any way to do this ?

    i have seen some examples of adding bootstrap classes to the partial views, but they still contain all the umbraco grid html as well which i dont want. Best regards Christoffer.

    Copy Link
  • Darren Hunter 134 posts 226 karma points
    Sep 18, 2024 @ 13:06
    Darren Hunter
    0

    Just add the boot strap css and js file to the master template and then just reference the Bootstrap classes.

    Here an Example of how I done it.

    @using Umbraco.Extensions @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage

    Link linkParameter = Model.Content.Value<Link>("link");
string buttonColor = Model.Content.Value<string>("buttonColour");
Boolean fullWidthButton = Model.Content.Value<Boolean>("tickForFullWidthButton");
var cssClass = "";
string inlineStyle = "";
if (buttonColor != "")
{
    inlineStyle = "background-color:#" + buttonColor + ";border-color:#" + buttonColor;
    if (buttonColor == "ffffff") // White Button
    {
        inlineStyle = inlineStyle + ";color:#000000 !important;";
    }
    if (fullWidthButton)
    {
        cssClass = "d-grid gap-2";
    }
    if (linkParameter != null)
    {
        <div class="inPageButton mt-2 mb-2 @cssClass">
            <a class="btn btn-block btn-secondary" style="@inlineStyle" href="@linkParameter.Url" target="@linkParameter.Target">@linkParameter.Name</a>
        </div>
    }



}

    }

    Copy Link
  • Christoffer Frede 34 posts 144 karma points
    Sep 18, 2024 @ 13:17
    Christoffer Frede
    0

    yes that is correct Darren, but that will still render all the umbraco grid html in the frontend as well around the partial view as far as i know. that is what i want to know if it is possible to change that or control/maniuplate the umb-block-grid__area-container classes.

    for example:

    <div class="umb-block-grid__area-container" style="--umb-block-grid--area-grid-columns: 12;">
<div class="umb-block-grid__area" data-area-col-span="12">
    <div class="umb-block-grid__layout-container">
        <div class="umb-block-grid__layout-item"  data-col-span="12" data-row-span="1" style=" --umb-block-grid--item-column-span: 12; --umb-block-grid--item-row-span: 1; ">
            <!-- in here is the partial view code as you posted -->
        </div>
    </div>
</div>

    Copy Link
  • Darren Hunter 134 posts 226 karma points
    Sep 18, 2024 @ 13:18
    Darren Hunter
    0

    You all so need to update the following files on the block grid folder

    Area

    div class="[email protected]" data-area-col-span="@Model.ColumnSpan" data-area-row-span="@Model.RowSpan" data-area-alias="@Model.Alias"> @await Html.GetBlockGridItemsHtmlAsync(Model)

    Areas

    div class="row" data-area-col-span="@(Model.AreaGridColumns?.ToString() ?? Model.GridColumns?.ToString() ?? "12");"> @foreach (var area in Model.Areas) { @await Html.GetBlockGridItemAreaHtmlAsync(area) }

    Copy Link
  • Christoffer Frede 34 posts 144 karma points
    Sep 18, 2024 @ 13:28
    Christoffer Frede
    0

    okay that would seem like it would work. do you know if the area.cshtml and areas.cshtml is updated or overwritten with Umbraco upgrades ? lets say upgrade from umbraco version 13 to version 14 ?

    Copy Link
  • Darren Hunter 134 posts 226 karma points
    Sep 18, 2024 @ 13:31
    Darren Hunter
    0

    Not sure this is on a 13 site we are building and we only use the LTS version, I know when I have done patches on the site it not over written it, and it dose not seem to over write on 10 sites either when patching.

    What I would do is take a copy of the site before and upgrade and if it dose over write them, copy the changes back in.

    Copy Link
  • Christoffer Frede 34 posts 144 karma points
    Sep 18, 2024 @ 13:42
    Christoffer Frede
    0

    okay. i guess that is fairly easy to test, so i will see about that. i will try and change the area and areas templates and see if it works and report back. thank you

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft