Mobile Skin with Custom JQuery Theme Not Working

8/6/2013 5:34:52 PM

Total Posts 37

View Posts

Mobile Skin with Custom JQuery Theme Not Working

I'm having some trouble getting the mojoPortal mobile skin (mobilekit_1) to work with my custom jQuery theme. I used theme roller to produce the theme. I've made all the changes to my install to accommodate the jQuery theme and its working with my current skin. However, it won't work on the mobile skin.

I added the custom css and images to my skin just as I did for the regular site skin.

I added the file to the style.config file:

<file>jquery-ui-1.10.3.custom.css</file>

I also changed the "StyleSheetCombiner" line for my new theme name (custom-theme). The line reads as:

<portal:StyleSheetCombiner ID="StyleSheetCombiner" runat="server" IncludejQueryUI="false" JQueryUIThemeName="custom-theme" UseIconsForAdminLinks="false" />

I also set the mobile skin in the site administration. However, the mobile skin doesn't take effect when I visit it from my iPhone (haven't tested any others). I'm stumped on this because it does work with my regular skin but not the mobile. The only thing different is the jquery.min.js files are present in the regular skin, but not in the mobile skin. Do these need added? If so which ones need added and what else do I need to do do get this working?

I've linking a screenshot of my current file layout. I appreciate the help in advance

Thanks

8/6/2013 6:13:02 PM

Isaac Hall

Total Posts 216

View Posts

mojoPortal Hosting & Design @ i7MEDIA!

Re: Mobile Skin with Custom JQuery Theme Not Working

Hi Tyler,

Try changing your stylesheet combiner line to this:

<portal:StyleSheetCombiner ID="StyleSheetCombiner" runat="server" IncludeJQueryUI="false" UseIconsForAdminLinks="false" />

The primary difference being that you need a capital "J" on the "IncludeJQueryUI" part. You can include JQueryUIThemeName if you want, but it won't change anything as long as IncludeJQueryUI is set to false, because it is used to determine which of the innate jQuery UI themes to use, and is not used at all when you're self-hosting.

Here's a blog post that might provide further information: http://i7media.net/jquery-ui-mojoportal-happiness

Hope this helps,
-Isaac

8/7/2013 10:23:11 AM

tyler.christopherson

Total Posts 37

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

Thanks Isaac,

I tried changing the stylesheet combiner line to the one you provided and still no luck.

I then followed the directions in the blog post and still had no luck. Its got me stumped. Especially since the current site is working fine with the theme and i'm using the exact same theme and files for the mobile kit!?

Your welcome to check the site out and see if you can tell why its not working.

The homepage is: communitycolleges.wy.edu

A good page to hit on the desktop sit to see the custom JQuery theme is: http://communitycolleges.wy.edu/commission.aspx

I've been visiting the site from an iPhone to test with no avail. It just shows a theme stripped site when visited.

I appreciate any other ideas you may have and your help so far.

Thanks

8/7/2013 10:59:45 AM

Isaac Hall

Total Posts 216

View Posts

mojoPortal Hosting & Design @ i7MEDIA!

Re: Mobile Skin with Custom JQuery Theme Not Working

When I go to the commissions page it looks like the jQuery UI theme is working fine to me. I checked and it is definitely loading the UI theme from your skin, not from a CDN. You should make sure that you have JS enabled in the browser when viewing the site.

To my knowledge, jQuery works just fine natively on iPhone.

You may want to consider adding IncludeJQueryMigrate="true" to the <portal:ScriptLoader /> if you haven't already. Another thing to keep in mind is that the site may be caching itself in your browser, you can hit ctrl+f5 to reload the page without using cached files, so that might make the difference as well.

8/7/2013 11:07:20 AM

Isaac Hall

Total Posts 216

View Posts

mojoPortal Hosting & Design @ i7MEDIA!

Re: Mobile Skin with Custom JQuery Theme Not Working

Ah never mind, sorry I thought you meant it wasn't working on the desktop either, but it seems you know it works on desktop it's just broken on the phone.

It's difficult to diagnose mobile issues because of a lack of browser tools. Are you using MobileKitPro, or jQuery Mobile?

It looks like your site on mobile is using the base layout.master, which is something mojoPortal does to make sure the site doesn't completely break even if the layout.master you give it is broken. I would look for typos in your layout.master, or try copying in the one from your desktop skin (since we know that one works) to see if that fixes it (but keep a copy of the old one).

8/7/2013 11:25:31 AM

tyler.christopherson

Total Posts 37

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

Thanks Isaac. I'm using the MobileKitPro. We just threw the most up to date skin for it in the site. I'll take a look at the layout.master and see if I can find any typos. I'll also try copying in the desktop one and see if that does anything. I appreciate the help!

Thanks

8/7/2013 11:38:01 AM

Isaac Hall

Total Posts 216

View Posts

mojoPortal Hosting & Design @ i7MEDIA!

Re: Mobile Skin with Custom JQuery Theme Not Working

If you're using MobileKitPro, one primary concern I would have is making sure that you added this tag in the layout.master:

<%@ Register Namespace="sts.MobileKit.Web" Assembly="sts.MobileKit.Web" TagPrefix="mkp" %>

Put it right above the <!DOCTYPE html> declaration.

Hope that helps,
-Isaac

8/7/2013 11:59:07 AM

tyler.christopherson

Total Posts 37

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

OK, so i've checked it for typos, made sure the tag you gave me was placed above the <!DOCTYPE html> and even tried swapping out the layout.master file with the current skin one, but it still doesn't work. I'm going to paste my layout.master file below for you to look at as well as my style.config file. Maybe you'll see something I missed. Thanks in advance!

Layout.Master

<%@ Master Language="C#" AutoEventWireup="true" Inherits="mojoPortal.Web.layout" %>
<%@ Register Namespace="sts.MobileKit.Web" Assembly="sts.MobileKit.Web" TagPrefix="mkp" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<%-- JQueryUIThemeName valid options are:
   base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks,
   humanity, le-frog, mint-choc, overcast, pepper-grinder,
   redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader
--%>
<portal:StyleSheetCombiner ID="StyleSheetCombiner" runat="server" IncludeJQueryUI="false" JQueryUIThemeName="custom-theme" UseIconsForAdminLinks="false" />
<portal:MetaContent ID="MetaContent" runat="server" PreZoomForIPhone="false" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<portal:Favicon ID="Favicon1" runat="server" />
<portal:ScriptLoader ID="ScriptLoader1" runat="server" JQueryTabConfig="{}" JQueryAccordionConfig="{}" IncludeColorBox="false" IncludeImageFit="true" ImageFitSelector="#wrapcenter" UseMobileVersionOfFlickrGallery="true" />

</head>
<body class="pagebody" id="Body" runat="server">
<portal:AnalyticsAsyncTopScript ID="analyticsTop" runat="server" />
<form id="frmMain" runat="server">
<asp:sitemapdatasource id="SiteMapData" runat="server" showstartingnode="false" />
<asp:sitemapdatasource id="ChildPageSiteMapData" runat="server" showstartingnode="false" />
<asp:scriptmanager id="ScriptManager1" runat="server" />
<portal:SiteTitle ID="SiteTitle" runat="server"></portal:SiteTitle>
   <div id="divtabs" class="mojo-tabs">
       <ul>
           <li><a href="#tabContent">
               <asp:Literal ID="litContentTab" Text="Content" runat="server" EnableViewState="false" /></a></li>
           <li><a href="#tabMenu">
               <asp:Literal ID="litMenuTab" Text="Menu" runat="server" EnableViewState="false" /></a></li>
           <li><a href="#tabTools">
               <asp:Literal ID="litToolsTab" Text="Tools" runat="server" EnableViewState="false" /></a></li>
       </ul>
       <div id="tabContent">
       <div id="wrapcenter">
           <asp:panel id="divCenter" runat="server" visible="True" cssclass="center-rightandleftmargins"
               skinid="pnlPlain">
               <portal:ChildPageMenu ID="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu>
               <asp:contentplaceholder id="mainContent" runat="server">
               </asp:contentplaceholder>
           </asp:panel>
           <asp:panel id="divLeft" runat="server" cssclass="leftside" visible="True" skinid="pnlPlain">
               <a id="startcontent"></a>
               <asp:contentplaceholder id="leftContent" runat="server">
               </asp:contentplaceholder>
           </asp:panel>
           <asp:panel id="divRight" runat="server" visible="True" cssclass="rightside" skinid="pnlPlain">
               <asp:contentplaceholder id="rightContent" runat="server">
               </asp:contentplaceholder>
           </asp:panel>
       </div>
       </div>
       <div id="tabMenu">
           <mkp:MobileMenu ID="SiteMenu" runat="server"></mkp:MobileMenu>
       </div>
       <div id="tabTools">
           <portal:SearchInput ID="SearchInput1" runat="server" LinkOnly="false" UseHeading="false" />
           <ul class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons">
           <portal:WelcomeMessage ID="WelcomeMessage" runat="server" RenderAsListItem="true"
           ListItemCss="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" />
           <portal:LoginLink ID="LoginLink" runat="server" />
           <portal:LogoutLink ID="LogoutLink" runat="server" />
           <portal:RegisterLink ID="RegisterLink" runat="server" />
           <portal:UserProfileLink ID="UserProfileLink" runat="server" />
           <portal:MailboxLink ID="MailboxLink1" runat="server" />
           <portal:MemberListLink ID="MemberListLink" runat="server" />
           <portal:MobileSkinLink ID="mobileskin" runat="server" RenderAsListItem="true" />
           <portal:AdminMenuLink ID="lnkAdminMenu" runat="server" />
           <portal:NewPageLink ID="lnkNewPage" runat="server" />
           <portal:PageEditFeaturesLink ID="lnkPageContent" runat="server" />
           <portal:PageEditSettingsLink ID="lnkPageSettings" runat="server" />
           <asp:contentplaceholder id="pageEditContent" runat="server">
           </asp:contentplaceholder>
           </ul>
       </div>
   </div>
   <script type="text/javascript">
$(document).ready(function() {
           $('div.edlinks a').button();
});
</script>
</form>
<portal:Woopra ID="woopra11" runat="server" />
<portal:AnalyticsAsyncBottomScript ID="analyticsBottom" runat="server" />
</body>
</html>

Style.Config

<?xml version="1.0" encoding="utf-8" ?>
<cssfiles>


<file>style-reset.css</file>
<file cssvpath="/ClientScript/colorbox/cb_mojo_dark1.css" imagebasevpath="/ClientScript/colorbox/">none</file>
<file cssvpath="/Data/style/common/style.css" imagebasevpath="/Data/style/common/">none</file>

jplayer.phone



<file cssvpath="/Data/style/forums/style.css" imagebasevpath="/Data/style/forums/">none</file>

<file cssvpath="/Data/style/cluetip/jquery.cluetip.css" imagebasevpath="/Data/style/cluetip/">none</file>
<file cssvpath="/Data/style/gridview/YahooGridView.css" imagebasevpath="/Data/style/gridview/">none</file>


<file cssvpath="/Data/style/qtfile/default.css" imagebasevpath="/Data/style/qtfile/">none</file>
<file cssvpath="/ClientScript/markitup/skins/html/style.css" imagebasevpath="/ClientScript/markitup/skins/html/">none</file>

<file>styleaspcalendar.css</file>
<file>styledatacalendar.css</file>

<file>style.css</file>

<file>jquery-ui-1.10.3.custom.css</file>



<file cssvpath="/Data/style/jplayer/bluemonday/jplayer.phone.css" imagebasevpath="/Data/style/jplayer/bluemonday/">none</file>


</cssfiles>

8/7/2013 12:15:12 PM

Joe Audette

Total Posts 18439

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

Are you seeing anything in the log under Administration > System Log?

If it fails to load your layout.master file it should log an error and it doesn't seem to be loading yours.

I'm viewing your site with Firefox and the user agent switcher plugin to make it load your mobile skin and I can see it is not using your master page at the moment so an error must be happening.

Newest errors will be at the bottom of the log.

Post the error detail, but please try to only post one entire copy of the error message, please don't post all of the log.

It might be best to clear the log then make the error happen by refreshing the mobile browser and then get the new error and post it here.

8/7/2013 12:16:28 PM

Isaac Hall

Total Posts 216

View Posts

mojoPortal Hosting & Design @ i7MEDIA!

Re: Mobile Skin with Custom JQuery Theme Not Working

Well I see a line in the style.config that looks wrong, it just says "jplayer.phone" but it's not commented out and not proper syntax. That shouldn't cause the issue you're having though.

Have you tried using the standard skin that ships with MobileKitPro? Setting the site to use that briefly will tell us whether or not the problem is in your skin. If the mobilekit_v1 skin doesn't work, there's an issue somewhere in your installation, and it's very likely that the MobileKitPro dll's didn't get copied correctly into the bin folder. If the mobilekit_v1 skin does work, then you know your issue is in your current skin.

8/7/2013 12:23:41 PM

tyler.christopherson

Total Posts 37

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

Hey Joe,

Here is the message I get in the log. I cleared the log first and then hit the website from my phone:

2013-08-07 11:21:58,169 ERROR 70.196.192.86 - en-US - / - mojoPortal.Web.mojoBasePage - Error setting master page. Will try setting to default skin.en-US - 70.196.192.86
System.Web.HttpParseException (0x80004005): Could not load file or assembly 'sts.MobileKit.Web' or one of its dependencies. The system cannot find the file specified. ---> System.Web.HttpParseException (0x80004005): Could not load file or assembly 'sts.MobileKit.Web' or one of its dependencies. The system cannot find the file specified. ---> System.IO.FileNotFoundException: Could not load file or assembly 'sts.MobileKit.Web' or one of its dependencies. The system cannot find the file specified.
File name: 'sts.MobileKit.Web'
at System.Reflection.RuntimeAssembly._nLoad(AssemblyName fileName, String codeBase, Evidence assemblySecurity, RuntimeAssembly locationHint, StackCrawlMark& stackMark, Boolean throwOnFileNotFound, Boolean forIntrospection, Boolean suppressSecurityChecks)
at System.Reflection.RuntimeAssembly.InternalLoadAssemblyName(AssemblyName assemblyRef, Evidence assemblySecurity, StackCrawlMark& stackMark, Boolean forIntrospection, Boolean suppressSecurityChecks)
at System.Reflection.RuntimeAssembly.InternalLoad(String assemblyString, Evidence assemblySecurity, StackCrawlMark& stackMark, Boolean forIntrospection)
at System.Reflection.Assembly.Load(String assemblyString)
at System.Web.Configuration.CompilationSection.LoadAssembly(String assemblyName, Boolean throwOnFail)
at System.Web.UI.TemplateParser.AddAssemblyDependency(String assemblyName, Boolean addDependentAssemblies)
at System.Web.UI.MainTagNameToTypeMapper.ProcessTagNamespaceRegistrationCore(TagNamespaceRegisterEntry nsRegisterEntry)
at System.Web.UI.BaseTemplateParser.ProcessDirective(String directiveName, IDictionary directive)
at System.Web.UI.TemplateParser.ParseStringInternal(String text, Encoding fileEncoding)

WRN: Assembly binding logging is turned OFF.
To enable assembly bind failure logging, set the registry value [HKLM\Software\Microsoft\Fusion!EnableLog] (DWORD) to 1.
Note: There is some performance penalty associated with assembly bind failure logging.
To turn this feature off, remove the registry value [HKLM\Software\Microsoft\Fusion!EnableLog].

at System.Web.UI.TemplateParser.ProcessException(Exception ex)
at System.Web.UI.TemplateParser.ParseStringInternal(String text, Encoding fileEncoding)
at System.Web.UI.TemplateParser.ParseString(String text, VirtualPath virtualPath, Encoding fileEncoding)
at System.Web.UI.TemplateParser.ParseString(String text, VirtualPath virtualPath, Encoding fileEncoding)
at System.Web.UI.TemplateParser.ParseFile(String physicalPath, VirtualPath virtualPath)
at System.Web.UI.TemplateParser.Parse()
at System.Web.Compilation.BaseTemplateBuildProvider.get_CodeCompilerType()
at System.Web.Compilation.BuildProvider.GetCompilerTypeFromBuildProvider(BuildProvider buildProvider)
at System.Web.Compilation.BuildProvidersCompiler.ProcessBuildProviders()
at System.Web.Compilation.BuildProvidersCompiler.PerformBuild()
at System.Web.Compilation.BuildManager.CompileWebFile(VirtualPath virtualPath)
at System.Web.Compilation.BuildManager.GetVPathBuildResultInternal(VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate)
at System.Web.Compilation.BuildManager.GetVPathBuildResultWithNoAssert(HttpContext context, VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate)
at System.Web.Compilation.BuildManager.GetVPathBuildResult(HttpContext context, VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean ensureIsUpToDate)
at System.Web.UI.MasterPage.CreateMaster(TemplateControl owner, HttpContext context, VirtualPath masterPageFile, IDictionary contentTemplateCollection)
at System.Web.UI.Page.get_Master()
at mojoPortal.Web.mojoBasePage.SetupMasterPage()
at mojoPortal.Web.mojoBasePage.OnPreInit(EventArgs e)
2013-08-07 11:21:58,169 ERROR 70.196.192.86 - en-US - / - mojoPortal.Web.UI.CmsPage - Content is assigned to altcontent1 placeholder but it does not exist in layout.master so using center.
2013-08-07 11:21:58,184 ERROR 70.196.192.86 - en-US - / - mojoPortal.Web.UI.CmsPage - Content is assigned to altcontent2 placeholder but it does not exist in layout.master so using center.