Search code examples
asp.netasp.net-mvcrazorumbracoumbraco7

How to load different styles on different pages in Umbraco

I have Master Template where i am Loading all the styles here 

@{
    Layout = null;
}

<!doctype html>
<html>
    <head>

        <link rel="stylesheet" href="~/css/socialiconstyle.css" />
        <link rel="stylesheet" href="~/css/bootstap/css/bootstrap3.css" />
        <link rel="stylesheet" href="~/css/carousel.css" />
        <link rel="stylesheet" href="~/css/umasterclass.css" /> 

        <script type="text/javascript" src="/scripts/jquery.min.js"></script>
        <script type="text/javascript" src="/scripts/bootstrap.min.js"></script>

    </head>

Where as child page is: 

@{
    Layout = "Master1.cshtml";
}

<div class="internal-wrapper">
   <p>@Umbraco.Field("headingSubline")</p>
    @RenderBody()

</div>

Due to the master page include all the style sheets is loading here.

For example I don't want the carousel.css to load in this child page because there is no carousel in this child page so how to achieve not load all the styles and add some conditions based on the page to load the style any idea or suggestions ?

Solution

  • One why is to not include all the css file to the layout page, for instance, carousel.css is using by one or two view pages, then load that css file only that page instead globally.

    Layout page:

    <head>

    <link rel="stylesheet" href="~/css/socialiconstyle.css" />
    <link rel="stylesheet" href="~/css/bootstap/css/bootstrap3.css" />
    <link rel="stylesheet" href="~/css/umasterclass.css" /> 

    @RenderSection("css", false)

    <script type="text/javascript" src="/scripts/jquery.min.js"></script>
    <script type="text/javascript" src="/scripts/bootstrap.min.js"</script>

</head>

    View pages are using that css:

    @section css {
    <link href="@Url.Content("~/css/carousel.css")" rel="stylesheet"/>
}

    Hope this helps!