Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

To improve the load time of customer self service web pages on your website, you can use the application to minimise the style sheet (CSS) files at run time.

This uses Razor technology.

Step-by-step guide

To

...

Bundle and Minify stylesheet Files:

  1. Login as an administrator
  2. Go to the "Template Editor" page
  3. Open up the "Code Editor"Administrator.
  4. Navigate to ContentTemplate Editor.
  5. Click to open the Code Editor.
  6. Include web optimisation and Bundler into and Bundler into the razor template.
  7. Create a new "cv Style Bundle"
  8. Include your styles into the bundle.
  9. Create and load your bundle

...

  1. .


Code Block
languagexml
@using System.Web.Optimization;
@using Bundler;
@{
  var cvStyles = new cvStyleBundle("~/TemplateBundles/CVStyles");
}
... Other HTML here
@{
	cvStyles.Include("~/documents/css/print/pmain.css");
	cvStyles.Include("~/documents/css/print/pbutton.css");
	cvStyles.Include("~/documents/css/print/preset.css");
// or you can use
	cvStyles.Include( new string [] {
		"~/documents/css/handheld/hbuttons.css",
		"~/documents/css/handheld/hreset.css",
		"~/documents/css/handheld/hmain.css"
	});
}
... Other HTML here
@{
  BundleTable.Bundles.Add(cvStyles);
  @Raw(@Model.TemplateUtil.StyleRender("~/TemplateBundles/CVStyles"))
  // If you want to attach additional tags you can use
  @Raw(@Model.TemplateUtil.StyleRender("~/TemplateBundles/CVStyles","Media:Print;Id:test;SomeTag:SomeValue"))
}

...

Tip

To enable this functionality, the template needs to be a version 4 (Razor) template

...

.


Related

...

help

Content by Label
showSpace
showLabelsfalse
max5
spacesKBDRAFT
showSpacefalse
sortmodified
falsereversetrue
typepage
cqllabel in ("javascript","stylesheets") and type = "page" and space = "KB"
labelskb-how-to-article javascript css