Forums (Obsolete)

Certified Developer 12

chetan2309-gmail - 1/20/2014 2:51:35 PM

Foundation css file

I have included foundation css as a first file in my master template.

However when I go to another page template, it puts the template above foundation css and that's breaking my design.

Any hint how can I make sure that my Foundation CSS will be first CSS? Earlier I was inherting foundation file in my main.css file for kentico.

Thanks,
Chetan

Kentico Consulting

Kentico_RichardS - 1/21/2014 1:13:30 AM

RE:Foundation css file

Hi,

Thank you for your message.

I think that you should be able to insert your CSS file manually in CMSPages/PortalTemplate.aspx file directly so that know it will always be first.

However it this is causing you issue I would think about the structure of your CSS and maybe alteret it a little so that the order would not be crucial.

Let me know how it works.

Kind regards,
RichardSustek

Kentico Legend

Brenden Kehren - 1/21/2014 8:59:30 AM

RE:Foundation css file

I've found a way to do this without modifying any of the source code. You simply create your CSS in the UI (Site Manager>Development>CSS Stylesheets). That stylesheet you create there and assign to your site, will be the first stylesheet that is rendered in the HEAD tag. Then I'll go create additional stylesheets (in Site Manager>Development>CSS Stylesheets) and assign them to the site I'm working on. The difference is the additional stylesheets aren't rendered because they aren't assigned in the Site Manager>Site.

What I'll do then is place a HEAD tag webpart on my master page and include the other stylesheets as needed. The HEAT tag webpart places the HTML directly before the closing HEAD tag. So if you properly order your stylesheets you will get your desired results.

If you don't use the UI and simply place .css files in your App_Themes/<site>/ directory, those files will automatically be included as a "feature" of asp.net. I've avoided using that method for that reason. From a development side of things you can use the development features in Kentico so you can develop your stylesheets in an editor and check them back into Kencito.

Good luck
Brenden

Certified Developer 12

chetan2309-gmail - 1/21/2014 9:16:45 PM

RE:Foundation css file

Thanks Richard and Brenden for you solutions!!

Since we have stuck ourselves to the portal development, I may not do any code addition in .aspx side for now.

Brenden solution seems more in line what I can tweak as of now. I have tried this approach for JS never for CSS.

Brenden, what you are suggesting is that I should add "Foundation" CSS in head webpart in the master template and not in the master template edit region head tag?

Thanks,
Chetan

Kentico Legend

Brenden Kehren - 1/22/2014 6:29:28 AM

RE:Foundation css file

chetan2309-gmail wrote: Brenden, what you are suggesting is that I should add "Foundation" CSS in head webpart in the master template and not in the master template edit region head tag?

I don't do any inline CSS, I use stylesheets for everything. Adding inline CSS in the templates, layouts, webparts, transformations, etc. doesn't allow them to be minified AND in my opinion, it makes it harder to maintain because you have to look all over the place to find the style definitions.

What I'm suggesting is your main styles should be in the stylesheet assigned to your site in Site Manager>Sites. By default this stylesheet will be loaded first followed by any .css files in your /App_Themes/<site>/ directory.

If I have any page specific styles, for instance on my home page I have 2-3 different sliders and each have about 100 lines of CSS, I'll add those into one file, add a HEAD web part to the template and reference the CSS using the built in methods to allow for minification. Same is true with any JS. If you don't use the built-in tools, you won't see the benefits.

Here's an example of how to reference a stylesheet and a JS file:

<!-- reference a stylesheet created in the Site Manager -->
<link href="/CMSPages/GetResource.ashx?stylesheetname=DevNet" type="text/css" rel="stylesheet" />

<!-- or reference it in the file system -->
<link href="/CMSPages/GetResource.ashx?stylesheetname=/CSSStyleSheets/Custom/style1.css" type="text/css" rel="stylesheet" />

<!--reference a script file in the file system -->
<script src="/CMSPages/GetResource.ashx?scriptfile=/CMSScripts/Custom/jquery.slider-home.js" type="text/javascript"></script>

Certified Developer 12

chetan2309-gmail - 1/23/2014 1:04:39 AM

RE:Foundation css file

Thanks Brenden for the detailed reply!!

Your solution to access CSS/JS was different than what we were doing. That really helped!!

However I still don't have solution for my original problem. We are inheriting Foundation CSS through macro in one of our file. Now, foundation CSS has few tags because of which Kentico is unable to minify it.

So I thought of moving it out and moved it to master template. I means using <link> tag and not inline CSS.

Each of our template(Roughly 10-15) has its own Page level CSS. Now somehow, kentico is loading Page level CSS before Master template CSS. This is breaking few of our classes as we are overriding a lot of Foundation classes.

I hope I am able to explain it more clearer?

Thanks for continuous help!!
Chetan

Kentico Legend

Brenden Kehren - 1/23/2014 9:45:28 AM

RE:Foundation css file

Yes it was clear before. What I provided will resolve the issue you're having. Where are you placing the page level CSS in the page? Is it via a webpart or is it in the page templates HEAD property? The difference between the two is the webpart will always be the very last item before the closing < head > tag.

So if you have your master page with the main style sheet < link > tag, that will fall about line 10 in your source. The if you add a head webpart and add another stylesheet that will fall right before the closing < head > tag. Then if in your home page, which inherits the master page, you place a head webpart and add another stylesheet, it will be placed right before the closing < head > tag and push the one from the master page up a line. So it might look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec" http://devnet.kentico.com/Blogs/Lenka-Navratilova/May-2013/Top-10-Kentico-Websites-for-April-2013.aspx>
<head id="head"><title>
	Forums - Kentico CMS for ASP.NET
</title><meta name="generator" content="Kentico CMS 7.0 (build 7.0.4962)" /> 

<!-- main stylesheet set in Site Manager>Site -->
<link href="/CMSPages/GetResource.ashx?stylesheetname=DevNet" type="text/css" rel="stylesheet" /> 

<!-- master page web part -->
<link href="http://devnet.kentico.com/Forums/f65/t43316/Foundation-css-file.aspx?rss=forums" type="application/rss+xml" rel="alternate" title="Kentico CMS for ASP.NET - DevNet - Forums - Version 7.x - Portal Engine" /> 

<!-- home page web part -->
<link href="/CMSPages/GetResource.ashx?stylesheetfile=/App_Themes/DevNet/css/main.css" type="text/css" rel="stylesheet" />
</head>

I suggest using the webparts more than using the HEAD property of a template because the HEAD property ends up putting the HTML in a weird place you don't really have a lot of control over in my opinion.


Certified Developer 12	chetan2309-gmail - 1/23/2014 9:48:11 PM RE:Foundation css file Thanks Brenden!! Your approach really worked for me, I tried on few page templates. However the only problem I have is the no of templates in which I have to put Head Webpart. I have around 15-20 Page templates with their own CSS. Is there any solution to tackle large no of templates at once? Thanks, Chetan


Kentico Legend	Brenden Kehren - 1/24/2014 7:58:29 AM RE:Foundation css file Do they all have the same layout or a group of them have the same layout? You might add the CSS reference in the shared layout then it will replicate through the templates utilizing that layout.