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


  • 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

    Copy Link
  • 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.

    Copy Link
  • 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.

    Copy Link
  • 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?

    Copy Link
  • 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.

    Copy Link
  • 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.

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

    Thanks Lindow.

    I will try and check.

    Copy Link
  • 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

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

    Thanks Chriztian..

    Will try and let you know.

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies