Overriding Properties of the jQuery-UI Skin

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.
11/11/2012 3:47:39 PM
Gravatar
Total Posts 6

Overriding Properties of the jQuery-UI Skin

Let me start by saying I have very little web development experience, but a coworker steered me to this framework when I was considering Joomla.  So far, I think this is the right choice, from what I've seen so far. 

About my skin choice...  For now, money is tight, as my wife and I are supporting a disabled adult son, and I have this web idea that I'm hoping may bring in some extra money.  If it does, then money won't be so tight, but for the moment, buying a license for Artisteer is out of the question.  We just can't afford that.  So looking through the default skins, I've found that the jQuery-ui skin is the closest to what I'm looking for.  There are only three things I want changed.  Get rid of the picker that lets the user choose different skins within the jQuery-ui and go with just the Redmond theme, get rid of the wave/split color on the headers and go with one color, and get rid of the rounded corners and make them square. 

I've been successful on two of these fronts.  I commented out this line in Layout.Master to get rid of the picker:
<portal:JQueryUIThemePicker ID="tp1" runat="server" AutoPostback="true" RenderAsListItem="true" />

I copied the images from ajax.googleapis.blahblahblah and created my own Images folder at /Data/Sites/1/skins/jqueryui-1/Images and put the images in that folder, including the modified ui-bg_gloss-wave_55_5c9ccc_500x100.png that is now just one color.

I've added <file>jquery-ui.css</file> to the style.config file.

I've copied the jquery-ui.css file from ajax.googleapis.blahblahblah and put it in my /Data/Sites/1/skins/jqueryui-1 folder, and in the corner radius section I've changed all of the radii to 0px (from 5px).

It seems like this is all that I should need to do.  But it doesn't work.  The result is that my site now uses my images, but the corners are still rounded, and when I hit F12, the CSS is coming from ajax.googleapis.blahblahblah.  I'm confused, since the jquery-ui.css is what is telling it where to look for the images, and it is finding them correctly, but that same file says 0px for corners, but that is coming from the google copy.  I would think there should be a much easier way to override this.

I've already considered that I could download jqueryui and the javascript and such that I found in the directions on how to run mojoPortal on an intranet without internet access, but it seems overkill to do all that just because I don't know what I'm doing on a lousy skin.....  Embarassed  Surely I'm just overlooking something really simple...  Any help is very much appreciated.

 

11/11/2012 4:00:04 PM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Overriding Properties of the jQuery-UI Skin

Hello sir,

I can think of a few things that might be causing an issue. If your site is online, can you give me a link so I can check it out?

Also, I work for a company called i7MEDIA that builds skins for mojo on a regular basis. We've released two free skins that are HTML5 compliant and well rounded.

You can check them out here:
http://swiftblue.mojoskins.com
http://mocha.mojoskins.com

And given your predicament, I'd be willing to make some small adjustments on either of them for you (for free, over a weekend or something), if either of them looks at all appealing to you.

Hope this helps,
-Isaac

11/11/2012 4:15:01 PM
Gravatar
Total Posts 6

Re: Overriding Properties of the jQuery-UI Skin

The site is "online" with the offline message, at www.win8appsnow.com.  But I believe it is resolved.  Must have been my browser cache fooling me because all of a sudden it started working.  :/

11/11/2012 4:24:51 PM
Gravatar
Total Posts 6

Re: Overriding Properties of the jQuery-UI Skin

And thanks for the offer, Isaac.  I accidentally clicked post before I was done...  DOH.

I don't know... I'm torn now.  On one hand, I do like that Swift Blue.  It's not far from the look I'm after.  I'm going for a metro look.  Windows 8, Windows Phone, that kind of look.  Squared edges, no shadows, no gradients, no patterns, simple colors, simple design.  On the other hand, I enjoy giving more than I do receiving!  LOL!  It just touches my heart so much that you've offered.  Wow.  I don't know what to say.

11/11/2012 4:26:17 PM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Overriding Properties of the jQuery-UI Skin

Glad to hear it's working.

Since you're effectively hosting your own UI theme anyway, you should check out the jQuery UI themeroller. This would give you a lot more control over your theme, I think.

I've not really messed with the jQuery UI skin very much, but I'm fairly sure these steps will get you where you need to implement your own theme:

  1. First, go to the link above and input your colors as you like, then download the whole zip file.
  2. Extract the "jquery-ui-1.9.1.custom.zip" file on your computer. Navigate to the new folder, then to the "css" folder immediately inside that, then "custom-theme" (or whatever you named it when you downloaded it).
  3. Rename  the "jquery-ui-1.9.1.custom.css" file to "jquery-ui.css", and rename the "images" folder to "jquery-images".
  4. Copy both of them into your skin folder.
  5. Open your layout.master, and look for the "<portal:StyleSheetCombiner" line. Make sure it has "IncludeJQueryUI="false" inside it. If it's set for true, switch it to false.
  6. Next look for the "<portal: ScriptLoader" line. Add this inside it: AssumejQueryUiIsLoaded="true".
  7. Directly underneath your ScriptLoader, paste the following line:
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
  8. Open your style.config. Inside it you'll need to add the line: <file>jquery-ui.css</file> (if it's not already there).
  9. Next, open the "jquery-ui.css" file. Because the folder for your images is different, and because the jquery css is now being combined with all your other CSS by the StyleSheetCombiner, you'll need to make a few changes. Ignore the quotes for find & replace stuff.
    • First, do a "find and replace". Find "(images/", and replace it with "('jquery-images/".
    • Now find ".png)", and replace it with ".png')". The apostrophe's are important.
    • Next, find "(Opacity", and replace with "('Opacity".
    • Next, find "('Opacity", then look at each line and add an apostrophe to the end right before the number. You can't do a replace here because the numbers are always different. The like will say "filter: alpha('Opacity=#)", you'll need it to say "filter: alpha('Opacity=#')" - Note the apostrophes.

     

This way you'll hopefully be able to get more control over your color scheme and images.

Hope this helps,
-Isaac

11/11/2012 4:29:32 PM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Overriding Properties of the jQuery-UI Skin

Swift blue is a great skin in my opinion. We put a lot of time into making sure that it works well, and we offer technical support for the skin so that any bugs that do come up will hopefully get fixed pretty quickly.

If you want, contact me: isaac@i7media.net
I can change the colors/rearrange things for you. Assuming you're not enthralled by the themeroller now, haha.

11/11/2012 4:42:11 PM
Gravatar
Total Posts 6

Re: Overriding Properties of the jQuery-UI Skin

Thanks, Isaac.  I appreciate all your help.  I'll take a look.

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