Inlining CSS

We've introduced a way to 'Inline your CSS'. You'll need some technical expertise to take advantage of this option because when you move a CSS file into a style tag you need to update the urls referenced from your CSS for things like background images and fonts so that they are now relative to the root of the site rather than relative to the CSS file.

You should also try to slim down your CSS considerably. (Google doesn't recommend you try to inline large CSS files.)

The inline option works in concert with .Net Bundling and Minification. Bundling and minification allows you to work with user-friendly individual multi-line) files, and then at runtime the application bundles those separate user-friendly files into one minified file. So to enable CSS inlining you must first enable bundling and minification by setting the EnableBundlingAndMinification key in the /AppSettings.config file to true. My default, bundling and minification should be enabled in your site template. 

<add key="EnableBundlingAndMinification" value="true" />

Next you'll need to go find your style bundle(s). They are usually in your /Skins/{SkinName}/Views/Shared/_Head.cshtml file. 

The default style bundle looks something like this:

@Html.RenderStyleBundle(
    bundlePath: Url.SkinUrl("css/_skin_bundle"),
    filePaths: new[]
    {
        Url.AppRelativeSkinUrl("css/bootstrap.css"),
        Url.AppRelativeSkinUrl("css/font-awesome.css"),
        Url.AppRelativeSkinUrl("css/base.css"),
        Url.AppRelativeSkinUrl("css/fonts.css"),
        Url.AppRelativeSkinUrl("css/style.css"),
    })

@Html.RenderStyleBundle(
    bundlePath: Url.SkinUrl("css/_skin_bundle"),
    filePaths: new[]
    {
        Url.AppRelativeSkinUrl("css/bootstrap.css"),
        Url.AppRelativeSkinUrl("css/font-awesome.css"),
        Url.AppRelativeSkinUrl("css/base.css"),
        Url.AppRelativeSkinUrl("css/fonts.css"),
        Url.AppRelativeSkinUrl("css/style.css"),
    },
    inline: true)

Now if you load up the website in a browser you can see that your CSS looks like so:

<style type="text/css">html{font-family:sans-serif;...</style>

Take a close look around the site though. You will probably notice that your work here is not done. You now need to change all of the url references throughout your CSS from something like this ../images/mailicon.gif to something more like /skins/{SkinName}/images/mailicon.gif. 

For example this:

background: url('../images/mailicon.gif') no-repeat scroll left center;

becomes:

background: url('/skins/default/images/mailicon.gif') no-repeat scroll left center;

• These new topics are created and available to facilitate adding custom code and styling to your site without editing site files through FTP (no longer available to non-Ultra sites)
• These new topics will load on each page of the front end of the site via the Skin_X/Views/Shared/_Head.cshtml file. They are loaded last in that file - appended to the end of the file in each skin.
• CSS Topics (you can put CSS in some or all of these: there is no enforcement for which CSS goes where, but they're meant to help site owners organize things).
  • Does not need an opening tag - these tags are pre-included in _Head.cshtml
  • CustomColorCss
  • CustomFontCss
  • CustomOverrideCss
• JavaScript Topic
  • Does not need an opening tag - these tags are pre-included in _Head.cshtml
  • CustomJavaScript