Beautiful custom jqueryui themes

Source: Internet
Author: User
Tags jqgrid

In the previous project, the jqueryui UI component was used. jqueryui's personalized customization is indeed good, but most of them are small changes in fonts and colors. I wonder whether you have read the jquery Sample Page. It seems that the layout is very elegant, but you can use the view style to see that there is a setting for font-size in the style of the Body element. Use firebug to disable this style, and then you can see that the layout is "fat" and N more. Why is the jqueryui size style so strange ??

 

Previously, I saw that jquery easyui looks more eye-catching and said that it is a "extjs". I think it is not bad. But it seems that this guy is in conflict with the powerful jqgrid, and sometimes the execution speed is slow and delayed. We have to endure these pains. After all, we are reluctant to give up the powerful features of jqgrid.

 

Since jquery easyui looks like a style at first, download a custom UI topic from jqueryui and use firebug to adapt it to your needs. If you want to change the font and color, you must change the font, color, size, and layout.

 

The following content is the Redmond topic provided by jqueryui and the modified aero topic (
) (All removed the font-size style in the body), of course, each person has a different aesthetic.

 

 

1. The appearance of the entire jqueryui is the most pleasing to the eye. The original tab component is fat and ugly and looks insensitive at all. The modified topic reduces the margins of each label, removes the dark background behind the label bar, and makes it look more harmonious.

 

 

 

2. The modified topic integrates the title of the dialog box with the entire form.

 

 

 

3. The date selection box of the modified topic is also consistent with the style of the entire topic.

 

These changes are only obtained by modifying jquery-ui-1.8.1.custom.css. Of course, some icons can still be replaced and beautified. I believe it is not difficult to use the CSS sprite method.

 

What is the difference between a condition and a condition. As long as you have basic CSS knowledge, you will be able to understand it.

 

New Theme: http://code.google.com/p/jquery-ui-theme-aero/downloads/list

 

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.