Trouble with customized jquery-ui-1 skin after deploy

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
1/3/2014 10:04:19 AM
Gravatar
Total Posts 23

Trouble with customized jquery-ui-1 skin after deploy

Hi,

I recently customized jquery-ui-1 from the extra skins on a recent version of mojoportal running on my laptop locally. All went fine working on my local machine and I was able to avoid making any changes to html that is generated by mojoportal user controls (or the configuration of mojo controls in layout.Master), such as SiteMenu, but still style these generated html tags just using css selectors. I also allowed the stylesheets from google to be used unchanged and simply overrode any css from those that I needed to override in my local style.css file. My skinning changes are confined to layout.Master (html), style.css and stylemenu.css.

Then I deployed to my staging site into a subfolder using Visual Studio 2013 web deploy. This is where my trouble starts. The Data folder and the user.config were not deployed so I simply ftp'ed them over. It turned out they were excluded from publishing in the Web project file.

Some of my links were incorrect due to deploying to a subfolder, and I realize Joe cautions about not pushing data from development to staging in  http://www.mojoportal.com/packaging-and-deployment.aspx. I have gotten away with this in the past but after this experience have been converted to a believer!

Anyway I was able to fix my data problems by just adding the subfolder to my broken links. However, I have 2 problems with the customized skin: SiteMenu (which is configured as a Superfish) and SiteTitle are not generating the correct html and therefore have no styling. The weirdest part, though, is that if I go into Admin and change the skin to the original jquery-ui-1, this skin's superfish menu and sitetile are styled correctly and the generated html is correct! After re-reading the documentation on superfish, I suspected maybe it had to do with the link in the ScriptRelativeToRoot attribute in the <portal:SiteScript> control, and I did confirm in Firebug that the link does need the subfolder added to work correctly, however that does not fix the problem.

Does anyone have any ideas on what might be causing these problems with SiteMenu and SiteTitle?

Thanks

Dan

 

 

1/3/2014 1:54:55 PM
Gravatar
Total Posts 23

Re: Trouble with customized jquery-ui-1 skin after deploy

Update: I was able to resolve most of the problems by creating another version of my skin on the server this way:

     1. Create a new empty folder for another skin on the server.

     2. Copy the entire contents of the original jqueryui-1 skin (old one, not the new one) to the new folder on the server (from development PC).

     3. Overlay the layout.Master, style.css, stylemenu.css and style-reset.css from my new skin from development PC to server.

So now all the old files from jquery-ui-1 are there except the 4 files I changed.

Now almost all the html generating from SiteMenu and SiteTitle is correct, so my new styling is there.

Still one problem though...when there are sub menu items (pages) under a top menu item, the triangle that points down and renders to the right of the menu item is not generating on the html side. This is causing the width of the menu items with children to be narrower and if a child page title is longer (then the top menu item title) it wraps, but the height of the sub menu item is not long enough to handle it and the text overflows.

On development I have (for my second menu item (currently inactive) - starting from the <li>:

     <li class="sf-with-ul">
                <a href="/our-properties" class="inactive sf-with-ul">
                    Our Properties<span class="sf-sub-indicator"> »</span></a>


                <%the submenu ul, etc is here%>

On the server I get this:

          <li class="sf-with-ul">
                <a href="/friendwelldemorevisedpublish1/our-properties" class="inactive">
                    Our Properties</a>               

                  <%the submenu ul, etc is here%>

So I'm missing one class on the <a> tag and the entire <span> along with it's content.

I was hoping that if I created the pages now on the server, it would correct the problem, so I created a subpage for a top item page that did not have subpages. However this did not do it.

The site is here for reference: dmendoza.net/friendwelldemorevisedpublish1

In general, I followed the advise in the documentation by starting with a copy of an existing skin that had a layout closest to the look of what I was aiming at for my new skin, and then modifying the css, testing each modification as I went. I got great results from this in my development environment, but I'm getting hung up on deploying the skin to the server. My deployment situation is further complicated by the fact that I like to first deploy to a subfolder, but eventually need to re-deploy from the staging/subfolder site to the final site that uses a root folder (no subfolder). So would really appreciate some general advise also on the best way to deploy new skins!

Thanks

Dan 
 

1/3/2014 2:05:28 PM
Gravatar
Total Posts 18444

Re: Trouble with customized jquery-ui-1 skin after deploy

If you use web browser dev tools to check for script errors and for files that fail to load you will find the problem. It is failing to load the superfish script.

1/3/2014 2:14:28 PM
Gravatar
Total Posts 23

Re: Trouble with customized jquery-ui-1 skin after deploy

Yes, thanks. I just found it also. The <portal:SiteScript> link was also missing the subfolder.

What do you think of the second method I used to deploy the new skin? (Deploy a copy of the old one first, then overlay only the files that were changed). Why does this appear to be necessary for SiteMenu and SiteTitle to generate right?

Thanks

Dan

1/3/2014 2:22:02 PM
Gravatar
Total Posts 18444

Re: Trouble with customized jquery-ui-1 skin after deploy

I cannot diagnose what might have been wrong before without having seen the problem and using browser dev tools while the problem was happening.

1/7/2014 12:08:55 PM
Gravatar
Total Posts 23

Re: Trouble with customized jquery-ui-1 skin after deploy

Hi Joe,

Thanks for your comments; they are really helpful. I had 2 other problems, but was able to find them using the Firefox console.

I have another question though. I modified jqueryui-1 so I'm using a horizontal superfish. I have the situation where two of the top level menu items are only there to allow for drop downs for child menu items. I made them unclickable per your instructions for treeview menu, and now they do not go to any page when clicked. However, when they are clicked, the content that was in the main part of the page (the CMS part) goes away (except a small sliver of white). Is that normal for a mojoPortal unclickable menu item? I was expecting for them to do nothing at all, leaving the main part of the page alone that was rendered from the prior clicked menu item. (Also the Firefox console is clean after clicking the unclickable menu item, except for a bunch of CSS warnings I'm always seeing).

Thanks

Dan

1/7/2014 12:10:37 PM
Gravatar
Total Posts 23

Re: Trouble with customized jquery-ui-1 skin after deploy

This is in same site: http://dmendoza.net/friendwelldemorevisedpublish1

Dan

1/7/2014 1:25:12 PM
Gravatar
Total Posts 18444

Re: Trouble with customized jquery-ui-1 skin after deploy

Hi Dan,

The problem is that the css class "unclickable" is rendering on the li element instead of the link a element so it isn't working, clicking the link is navigating to the empty page.

If you zip your skin and email it to you I can probably fix it easily and send it back to you

I also noticed that you have

<add key="CombineCSS" value="false"/>

which is a very bad idea and making it render separate links to all the css files. I recommend change that back to true, there is really no good reason to ever set that to false unless you manually combine the css into one file.

joe [at] mojoportal.com

 

 

1/8/2014 12:22:21 PM
Gravatar
Total Posts 18444

Re: Trouble with customized jquery-ui-1 skin after deploy

Hi,

Put this in your theme.skin file:

<portal:FlexMenu runat="server" SkinID="Superfish"
    ContainerElement="div"
    ContainerCssClass="AspNet-Menu-Horizontal"
    RootUlCssClass="sf-menu sf-navbar"
    DescriptionCssClass=""
    ChildContainerElement=""
    ChildContainerCssClass=""
    RootLevelLiCssClass=""
    ItemDepthCssPrefix=""
    ParentLiCssClass="sf-with-ul"
    MaxDataBindDepth="-1"
    RenderDescription="false"
    LiSelectedCssClass="current active"
    AnchorSelectedCssClass="current"
/>

In your layout.master file you currently have this:

<portal:SiteMenu id="SiteMenu1" runat="server" 
                MenuSkinID="Superfish"
                UseTreeView="true" 
                TreeViewShowExpandCollapse="false" 
                TreeViewExpandDepth="-1"  
                HideMenuOnSiteMap="false" ></portal:SiteMenu>

replace it with this:

<portal:SiteMenu id="SiteMenu1" runat="server" 
                MenuSkinID="Superfish"
                UseFlexMenu="true"
                HideMenuOnSiteMap="false" ></portal:SiteMenu>

That will make the unclickable menu link work correctly.

Hope that helps,

Joe

1/8/2014 6:17:15 PM
Gravatar
Total Posts 23

Re: Trouble with customized jquery-ui-1 skin after deploy

Hi Joe,

Sorry I got confused about the flex menu. I have the unclickable now. I had to adjust my styles a bit with the new rendering, but looking much better now! smiley

Thanks for all your help,

Dan
 

1/9/2014 3:06:12 PM
Gravatar
Total Posts 18444

Re: Trouble with customized jquery-ui-1 skin after deploy

Thanks for the beer Dan!

Cheers,

Joe

You must sign in to post in the forums. This thread is closed to new posts.