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.

8/7/2013 12:25:57 PM

tyler.christopherson

Total Posts 37

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

Thanks Isaac. I originally had the MobileKitPro standard skin installed and it was the exact same. It could be that a dll didn't get copied over correctly, but I did take a look in the bin and the MobileKitPro dll is in there and up to date as far as I can tell. I appreciate the help!

8/7/2013 12:27:07 PM

Joe Audette

Total Posts 18439

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

That error is saying the dll for mobile kit pro is not installed

sts.MobileKit.Web.dll needs to be in the /bin folder beneath the root of the site

Hope that helps,

Joe

8/7/2013 12:32:35 PM

tyler.christopherson

Total Posts 37

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

Hey Joe,

Very strange?? I did check and the sts.MobileKit.Web.dll is in the bin folder at the root of the site. I'm not sure why its not finding it?

8/7/2013 12:52:01 PM

Joe Audette

Total Posts 18439

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

Did you upload it by ftp? I would try uploading it again. Also make sure you use the one for your .NET framework, ie if you use .NET 4 make sure you upload the .NET 4 version of the file.Then if it still doesn't work try checking the permission on the file and make sure it is readable by the user that is the identity on the application pool.

Are you sure the folder you think you are looking at is the intended site/installation or are you sure the folder that you think is the root is the actual root folder? The error is very specifically saying it cannot find the file:

"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'"

Also make sure there are no extra copies of web.config file in any folders besides the root folder. Sometimes people back up that file to folders like /Data and it can cause weird problems

8/7/2013 1:22:35 PM

tyler.christopherson

Total Posts 37

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

It was uploaded onto the server directly. I just checked on the file and it has all the correct permissions. Its also in the correct /bin folder. I tried replacing it just to be sure, but its in the right spot. We have some other items we purchased from you such as the Form Wizard Pro and the dll's for those are in the same place and are working fine.

The only thing I'm not sure of is what .NET version we are running. I'm not sure if the dll matches that version? Also is there somewhere in the web.config file where it might be pointing to that dll in a different location? We haven't changed any of those settings.

8/7/2013 1:32:56 PM

Isaac Hall

Total Posts 216

View Posts

mojoPortal Hosting & Design @ i7MEDIA!

Re: Mobile Skin with Custom JQuery Theme Not Working

You can find out what version of .NET your mojoPortal installation is running by going to Administration -> System Information.

Considering that your desktop skin works fine, that will be the correct version of .NET that your server is running, so that's the version of the MobileKitPro files you'll need.

8/7/2013 1:38:40 PM

tyler.christopherson

Total Posts 37

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

Thanks for the info Isaac, looks like we're running .NET version 4. I'll check and see if we're running the correct mobile skin for that version.

Thanks

8/7/2013 2:52:45 PM

Joe Audette

Total Posts 18439

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

There is nothing in web.config that points to dlls but the presence of extra web.config files in other folders could possibly throw off where it expects the /bin folder to exist.

I've just emailed you a new copy of the dll to try. This one is compiled against the latest version of mojoPortal so maybe that will solve it, if so I'll update the package.

8/7/2013 2:54:05 PM

Joe Audette

Total Posts 18439

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

The email I sent you just bounced back, can you contact me from another email address that will accept an attachment? I'm at joe dot audette a t g mail dotcom

8/7/2013 3:17:22 PM

tyler.christopherson

Total Posts 37

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

Thanks Joe,

Just shot you an email from my personal address. Sorry about that, our work email doesn't accept attachments anymore. The personal address should though. I appreciate the help and will try the dll after I receive it.

So far I haven't found any other web.config files in the site, so I'm hoping the dll will be the fix.

Thanks

8/7/2013 5:10:40 PM

tyler.christopherson

Total Posts 37

View Posts

Re: Mobile Skin with Custom JQuery Theme Not Working

Thanks again Joe and Isaac for all your help. It turned out a backup copy was made of our site, so the dll file that I was pasting in was not going to the live site. Once I pasted it in the right spot everything took off. I do appreciate the help though, because we had the wrong version of the dll file so without yours it wouldn't have worked anyway. You guys have been great as always and I'm very appreciative!

Thanks