JQueryUI & Bullet issue

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.
3/13/2013 2:54:48 PM
Gravatar
Total Posts 83
-- Joe

JQueryUI & Bullet issue

The size of my JQuery tabs headers in the Admin areas (example: Administration Menu -> Site List -> Site Settings) are about twice as high as it should be.  This only happens in my Artisteer 4.1 created/exported skins using the latest Mojoportal plugin.

I have found this is because the CONTENT property for .art-post ul > li:before is applied to this selector in STYLE.CSS as shown here:

.art-postcontent ul > li:before, .art-post ul > li:before, .art-textblock ul > li:before
{    content: url('images/postbullets.png'); .... }

I have fixed (?) this with the following added to style-mysite.css (last loaded CSS file in style.config):

.art-post ul > li:before                      { content: normal;}
.slidecontainer ul > li:before            { content: url('images/postbullets.png'); }

The 1st line clears the content property (:normal) from the .art-post style - this sets the JQuery IU tabs to the correct height

The 2nd line adds the bullets back to <UL> items in the HTML Content feature.

I would appreciate any feedback on:

  1. Why the JQueryUI is using the art-post style? (maybe something I did?)
  2. Should I be setting my CSS differently?

I am using

  • the lastest version of Artisteer 4.1.0.59782
  • the MP Skin Exporter 4.1, and
  • mojoPortal Version 2.3.9.6 MSSQL, Operating System Microsoft Windows NT 6.1.7601 Service Pack 1, ASP.NET Info v4.0.30319 Running in Full Trust

Thank you in advance for any advice you can provide! 

-- Joe Vago

3/13/2013 3:58:34 PM
Gravatar
Total Posts 18439

Re: JQueryUI & Bullet issue

Hi Joe,

Your solution is correct you have to override what the Artisteer CSS is doing. It isn't that the jqueryui is using the artisteer styles its just that the artisteer css selectors are broad enough that they also impact the same elements that jqueryui is trying to style and their rules win because the jquery ui css is above it and rules lower within the total css have more precedence.

For the same reason of precedence your fixes are/should be lower in the css than the main artisteer css in order to override them.

Actually Artisteer also has some clashes with jQueryUI Slider both in javascript they include and in css. In fact when I implemented the skin exporter for mojoPortal I have to do some find and replace to rename some things in their javascript to make them unique because they were breaking jqueryui slider functionality. The Artisteer slider is just an image rotator thingy not anything remotely similar to what jQuery UI Slider is.

Hope that helps,

Joe

3/18/2013 9:12:47 AM
Gravatar
Total Posts 83
-- Joe

Re: JQueryUI & Bullet issue

Joe,

Thanks for confirming my approach for this fix.

One thing I noticed this weekend was that on v2.3.9.5 the JQueryUI renders fine with the skin in question.  When the site is upgraded to v2.3.9.6 - that is when the JQueryUI tabs double in size.

Maybe that is because of the fixes you did for JQuery in the 2.3.9.6 release?

-- Joe

3/18/2013 9:26:48 AM
Gravatar
Total Posts 18439

Re: JQueryUI & Bullet issue

Hey Joe,

The only things I did in 2.3.9.6 was update to newer versions of some jquery plugins (nothing related to jqueryui). Nothing changed since 2.3.9.5 regarding the jqueryUI css. It was version 2.3.9.5 where we updated the config settings to use jquery 1.9.0 and jqueryui 1.10.0. So nothing should have changed regarding jqueryui css in mojoPortal 2.3.9.6.

I see that jquery 1.9.1 and jqueryui 1.10.2 are now available so I will probably update to those for the next release. You could go ahead and update the settings in web.config if you want to try those now.

So I have no idea why you would be seeing doubling in size in the tabs. I have not seen that in the skins we ship.

Best,

Joe

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