Try our conversational search powered by Generative AI!

Modifying, Adding or Linking to CSS and JS


Okay I have searched and read for a long time and found nothing. I am new to episerver.

All I want to do is be able to add in some CSS and some JS, not as a global item for every page, just for certain pages. So, for instance, we have a meet the team page, and all I want to do is add a simple flip card. This requires a few lines of CSS  and 9 lines of JS. There's no coherent way to do this from the user side at least not from what I have been able to find yet. I see some instances where its mentioned that you can add blocks that let you link to external style sheets in C#.

As pros what is your recommendation to getting this functionality added to specific pages or sections of a site? I have to believe other people have wanted some functionality with their pages over what the tiny MCE will let you do.

Our developer doesn't know how to do it.

Thank you In advance for any and all help.

Apr 02, 2018 19:23
  1. Normally you have all Javascript bundled and minified from layout. To initialize a Javascript component only on a single page type you can then add a script tag in your view that triggers your perfect function on document ready or similar. This I would say is the most used approach since the global Javascript file can easily be cached and bundled which normally leads to good performance.
  2. In some cases it makes sense to have a separate package of Javascript files that are not normally loaded. For instance, you might have a logged in section where you use a SPA application which uses a heavy framework like angularjs or similar. In that case I would use two separate layout files (cshtml) where one contains the scripts needed for the public part of the website and another contains the scripts needed for the logged in part. Other than that I would use the same approach as 1 and have a single script tag to wire things up in the view for the page template.
  3. If you are building addons or similar, Episerver do have a system for managing and injecting scripts that is documented here. That is usually overkill to use for a normal page type though.
Apr 02, 2018 20:46

Thank you very much for your help. I think you are correct with how to address the JS portion.

The issue is now we want to style a page, or have the lower end user be abel to style the page. In our organization we have several levels of user, we want some to have very little access and others to be abel to do some styling and then full blown administrators can do whatever. There has to be a way to add some additional styling features in the backend so the lower-credentialed logged in user can add some styles themselves? So lets say we are just doing a simple card layout for three topics we want to really stand out. It only lives on one page. The card wont show right if the user cant add some CSS. It only needs loaded for that page so we can add the call to just one section of pages I assume. Like lets say about the company which has 3 pages in it. We can only make a call for the CSS for that section. Hell I'd settle for the internal css <syle></style> type if we could get it to work, Tiny MCE keeps trying to block the code and theres no other reasonable place to add it.

Am I missing something? Is this option available somowhere Im not looking here or what?

thank you kindly for any help

Apr 02, 2018 23:38


What about if you add a string property to your page type(s), let's call it CustomPageCss. This is where these advanced editors can enter the page specific CSS and then your solution renders that string property to your page head when defined. Tadaa, custom CSS per page when needed.

(so really depending on your solution, but if you have an Alloy like pageviewmodel, then you would add that CSS string to that and render it from there)

Apr 03, 2018 5:56

If you want custom styles on a page, the best option is normally to make a custom drop down where the editor can select “red, green, blue” or similar and then in the backend/view this value will be used to set a css class on your card. 

Another option is of course to make a separate string property to let the editor create his own style tags. Then you can show it on page by using Html.Raw in the view. Normally I avoid this since it invites the editor to destroy “my” site :)

Apr 03, 2018 7:46

@Daniel, I understod from the original description that he actually needs in some cases to actually be able to inject custom css and js to the page.

I agree 100% with you that normally you would have properties for some known customization/variation in the styles so that editors can't brake the site :D

Apr 20, 2018 19:34
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.