Site Stylesheet Order

David Good asked on November 3, 2014 20:20

Here is the stylesheet order in my head section:

<link href="/CMSPages/GetResource.ashx?stylesheetname=Jemco" type="text/css" rel="stylesheet"/> 
<!-- Bootstrap -->
<link href="/app_themes/jemco/css/bootstrap.min.css" rel="stylesheet">
<link href="/app_themes/jemco/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]--> 
<link href="/favicon.ico" type="image/x-icon" rel="shortcut icon"/> 
<link href="/favicon.ico" type="image/x-icon" rel="icon"/> 
<link href="/CMSPages/GetResource.ashx?stylesheetfile=/App_Themes/Jemco/css/bootstrap.min.css" type="text/css" rel="stylesheet" /><link href="/CMSPages/GetResource.ashx?stylesheetfile=/App_Themes/Jemco/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />

Is it possible for my site stylesheet (/CMSPages/GetResource.ashx?stylesheetname=Jemco) to come after my links to the bootstrap stylesheets? I have to override bootstrap settings for the design in my site to work. Also, Kentico is adding my bootstrap stylesheets twice and I'm not sure why. I also need the following to show up last:

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

Recent Answers

Brenden Kehren answered on November 4, 2014 04:47

So you have a few problems.

First, stylesheet order. Remove the stylesheet you assigned in the Sites app. Set it to none. Then go to your master page and add the HTML webpart or Stylesheet webpart and add the stylesheets in the order you want. Key to this is removing the stylesheet you assigned in the Sites app.

Second, duplicate stylesheets. Any stylesheet you have in the App_Themes/

1 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on November 4, 2014 13:55

Evidently my second solution didn't get added.

The second problem, duplicate stylesheets. Any stylesheets you have the /App_Themes/< your current theme > directory will automatically be added to the pages < head > section. This is NOT a Kentico "thing". It is an IIS and ASP.NET "thing". This is a default action. My recommendation is to take any of those stylesheets and place them in the CSS Stylesheets app and load them like I suggested in the first answer. This way you can control the order, when they are loaded, minify them, etc. You have much more control vs. leaving them in the file system.

1 votesVote for this answer Mark as a Correct answer

David Good answered on November 5, 2014 01:53

Thanks! I did as you mentioned, then deleted the bootstrap stylesheets from my app_themes directory. Finally I load bootstrap from the CDN and everything works great!

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on November 5, 2014 14:28

Be careful of loading any files (css, js, fonts, etc.) from a 3rd party site like that especially if your site design is dependent on it. I'd suggest saving those files locally and using them that way vs. loading them from a CDN. Not only are there performance issues with this but what if that CDN isn't available or the file changes? Your site's design and anything else using that file is negatively affected.

0 votesVote for this answer Mark as a Correct answer