Weird issue with Themes

[nethrelm]

Okay, this is really strange and I have no idea why this is happening... I've created multiple themes by copying from a default theme, which was itself copied from one of the included themes (probably Wireframe, but honestly I don't remember at this point). Here is what is happening: the output is rendering all CSS files to the head section. This happens inconsistently as far as which one renders correctly, and which one does not. Sometimes it is fine in preview, but then incorrect when theme is set. Other times it is the opposite. It is consistent for a given theme, however. In other words, if Theme A does not render the preview correctly, then Theme A never renders the preview correctly, but Theme B may render the preview correctly, but it will not render correctly when set. See code fragments from View Source. This is from a theme that works when set as default, but not in preview.

view-source:http://localhost:58994/Default.aspx

Code: Select all

***snip***
</title>
    <link type="text/css" href="/App_Themes/OnlineScubaJuly4th/normalize.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/OnlineScubaJuly4th/style.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/OnlineScubaJuly4th/print.css" rel="stylesheet" media="Print" />
<link type="text/css" href="/App_Themes/OnlineScubaJuly4th/jquery/jqueryui.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/OnlineScubaJuly4th/chat.css" rel="stylesheet" media="screen" />
***snipped meta tags***
<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script><script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script><script src="/Scripts/superfish.js" type="text/javascript"></script><script src="/Scripts/jquery.equalheights.js" type="text/javascript"></script></head>

view-source:http://localhost:58994/Default.aspx?the ... ubaJuly4th

Code: Select all

***snip***
</title>
    <link type="text/css" href="/App_Themes/OnlineScubaJuly4th/normalize.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/OnlineScubaJuly4th/style.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/OnlineScubaJuly4th/print.css" rel="stylesheet" media="Print" />
<link type="text/css" href="/App_Themes/OnlineScubaJuly4th/jquery/jqueryui.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/OnlineScubaJuly4th/chat.css" rel="stylesheet" media="screen" />
***snipped meta tags***
<link href="App_Themes/OnlineScubaJuly4th/chat.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/jquery/jquery.ui.core.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/jquery/jquery.ui.datepicker.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/jquery/jquery.ui.dialog.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/jquery/jquery.ui.menu.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/jquery/jquery.ui.tabs.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/jquery/jquery.ui.theme.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/jquery/jqueryui.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/mobile.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/normalize.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/print.css" type="text/css" rel="stylesheet" /><link href="App_Themes/OnlineScubaJuly4th/style.css" type="text/css" rel="stylesheet" /><script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script><script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script><script src="/Scripts/superfish.js" type="text/javascript"></script><script src="/Scripts/jquery.equalheights.js" type="text/javascript"></script></head>

See what I mean? All of the css file links are being rendered to the head. Now here is one where it is reversed.

view-source:http://localhost:58994/Default.aspx

Code: Select all

***snip***
</title>
    <link type="text/css" href="/App_Themes/onlinescubasummer/normalize.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/onlinescubasummer/style.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/onlinescubasummer/print.css" rel="stylesheet" media="Print" />
<link type="text/css" href="/App_Themes/onlinescubasummer/jquery/jqueryui.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/onlinescubasummer/chat.css" rel="stylesheet" media="screen" />
***snipped meta tags***
<link href="App_Themes/onlinescubasummer/chat.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/jquery/jquery.ui.core.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/jquery/jquery.ui.datepicker.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/jquery/jquery.ui.dialog.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/jquery/jquery.ui.menu.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/jquery/jquery.ui.tabs.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/jquery/jquery.ui.theme.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/jquery/jqueryui.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/mobile.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/normalize.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/print.css" type="text/css" rel="stylesheet" /><link href="App_Themes/onlinescubasummer/style.css" type="text/css" rel="stylesheet" /><script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script><script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script><script src="/Scripts/superfish.js" type="text/javascript"></script><script src="/Scripts/jquery.equalheights.js" type="text/javascript"></script></head>

view-source:http://localhost:58994/Default.aspx?the ... cubaSummer

Code: Select all

***snip***
</title>
    <link type="text/css" href="/App_Themes/onlinescubasummer/normalize.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/onlinescubasummer/style.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/onlinescubasummer/print.css" rel="stylesheet" media="Print" />
<link type="text/css" href="/App_Themes/onlinescubasummer/jquery/jqueryui.css" rel="stylesheet" media="All" />
<link type="text/css" href="/App_Themes/onlinescubasummer/chat.css" rel="stylesheet" media="screen" />
***snipped meta tags***
<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script><script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script><script src="/Scripts/superfish.js" type="text/javascript"></script><script src="/Scripts/jquery.equalheights.js" type="text/javascript"></script></head>

Never seen anything like this before. Any ideas???

[jmestep]

Have you edited and saved any of the theme files in the admin? I don't know about recent builds, but doing that had caused the theme files to change format in the past.
Also, are the pages you are checking using the same layout .master file?

[nethrelm]

No, I have not edited any of them in the admin, and yes these are all checked against the home page (same layout .master file).

[nethrelm]

It's been a week...Nobody has any idea what might be happening here?

[Katie]

It looks like the theme css does not display consistently when you are trying to "preview" from the admin themes page. The preview feature was designed to let you get a quick view of the theme style and colors before selecting it. After the theme is set for the store, you shouldn't see any inconsistencies.

[nethrelm]

But I am seeing inconsistencies after setting the theme... My second example demonstrates that.

[Katie]

Your second example shows that you are using "preview mode". I might be able to help if you can simply show the steps to reproduce the issue and include your version so I might try and reproduce on a stock installation.

[nethrelm]

No, you didn't look at the post closely enough. There are four code blocks posted. The third code block shows the problem occurring in non-preview mode. I have recently discovered that when encountering this problem, shutting down and restarting the site resolves the issue and the theme displays properly. I am starting to think this is a .NET (or IIS) quirk and not anything related to AbleCommerce itself...not sure.