Copied to clipboard

Flag this post as spam?

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


  • Rohit 6 posts 106 karma points
    Feb 16, 2022 @ 19:09
    Rohit
    0

    Apply CSS to specific page created using document type and template

    Hi,

    I have page created from document type using template.

    I want to apply CSS only to specific page. How can I apply it.

    Thanks, Rohit

  • Lindow 154 posts 1301 karma points
    Feb 16, 2022 @ 19:20
    Lindow
    0

    Hey Rohit.

    You can just reference it in the head tag in your cshtml file for that specific document type :)

    We have a tutorial on how to build a simple site here - https://our.umbraco.com/documentation/Tutorials/Creating-Basic-Site/ - so give it a look.

    Alternatively, you can install the starter kit on your project and just check how the templates are built.

  • Rohit 6 posts 106 karma points
    Feb 16, 2022 @ 19:32
    Rohit
    0

    Thanks for quick reply.

    But I have n number of pages created from that document type and cshtml and I want css for only 1 particular page which obviously don't have cshtml so how can it be applied.

    Thanks.

  • Lindow 154 posts 1301 karma points
    Feb 16, 2022 @ 19:38
    Lindow
    0

    Hmm, why don't you simply create a separate document type + template for that specific page if it's only one of a kind?

  • Rohit 6 posts 106 karma points
    Feb 16, 2022 @ 19:47
    Rohit
    0

    Thanks again. Good solution but for 5-6 line css changes I don't want to create separate document type and template.

    Thinking some simple solution kind of inline CSS.

  • Lindow 154 posts 1301 karma points
    Feb 16, 2022 @ 20:03
    Lindow
    100

    How about using the rich text editor and just adding the code there? That way you can add it to a specific section of a specific page.

  • Rohit 6 posts 106 karma points
    Feb 17, 2022 @ 04:39
    Rohit
    0

    Thanks Lindow.

    I will try and check.

  • Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib
    Feb 16, 2022 @ 22:43
    Chriztian Steinmeier
    2

    Hi Rohit,

    I suggest you add something like this to your Master Layout template:

    <body data-page-id="@(Model.Id)">
    

    Then you can write a page-specific CSS selector like this:

    [data-page-id="1234"] a:link {
        text-decoration-color: hotpink;
    }
    

    I've done this a lot, usually it's CSS based on just the document type (applying to many pages) but you can definitely do it like this too, using the Id to make it page-specific.

    /Chriztian

  • Rohit 6 posts 106 karma points
    Feb 17, 2022 @ 04:40
    Rohit
    100

    Thanks Chriztian..

    Will try and let you know.

Please Sign in or register to post replies

Write your reply to:

Draft