Old Forums
Search:
Design and CSS styles
Version 4.x > Design and CSS styles > css and conditional comments in masterpage (template) View modes: 
User avatar
Member
Member
stefan.baerthlein-gmx - 5/13/2009 8:37:23 AM
   
css and conditional comments in masterpage (template)
hey there,

i'm totally new to kentico and want to include kentico cms in an existing webpage (former asp.net web-app).

so i made a BlankASPX template and assigned a global stylesheet to it. the original design has ha complicate/stylish menu realized through conditional comments for the css like:

so i have todo something like:

<!--[if lte IE 6]>
<style type="text/css">
body { behavior: url( "CMSTemplates/BlankASPX/PromontAMTemp01_css/navigation/hover.htc" ); }
@import url(CMSTemplates/BlankASPX/PromontAMTemp01_css/navigation/ie6.css);
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">@import url(CMSTemplates/BlankASPX/PromontAMTemp01_css/navigation/ie6.css);</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">@import url(CMSTemplates/BlankASPX/PromontAMTemp01_css/navigation/ie7.css);</style>
<![endif]-->


so my question would be how to include the different stylesheets depending on which browser is used?

i would be gratefull for any hint!
greetings s.

User avatar
Member
Member
rookie07 - 5/14/2009 5:43:14 AM
   
RE:css and conditional comments in masterpage (template)
ok. i think i've got it:

*) put all images in the App_Themes/<myTemplateName>/Images
*) put the hover.htc in the App_Themes/<myTemplateName>/
*) create all needed css like in this tutorial: http://devnet.kentico.com/docs/devguide/index.html?css_overview.htm

in the stylesheets refer to the image-source like this:
background: url(/App_Themes//<myTemplateName>/Images/menu_back.png);

*) in the master-template use this code to refere to the css and htc

<link href="~/CMSPages/GetCSS.aspx?stylesheetname=PromontAM_navigation" rel="stylesheet" type="text/css"/>
<link href="~/CMSPages/GetCSS.aspx?stylesheetname=PromontAM_print" type="text/css" rel="stylesheet" media="print" />
<!--[if lte IE 6]>
<style type="text/css">
body { behavior: url( "~/App_Themes/PromontAmTemp01/hover.htc" ); }
@import url(/CMSPages/GetCSS.aspx?stylesheetname=PromontAM_ie6);
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">@import url(/CMSPages/GetCSS.aspx?stylesheetname=PromontAM_ie6);</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">@import url(/CMSPages/GetCSS.aspx?stylesheetname=PromontAM_ie7);</style>
<![endif]-->


it seems to work like this for now *g

Top