Blog

Technology news & comments affecting web professionals' lives

HOWTO: jQuery UI Tabs Styling

October 19, 2012

From website:

jQuery UI Tabs Styling

Have you wanted to do something a little different with your jQuery UI Tabs?

  • Remove the header background
  • Remove the entire header
  • Remove most of the formatting
  • Make the non-active tabs smaller
  • Add icons
  • Centre the tabs
  • Move the tabs to the bottom
  • To the left
  • To the right
  • Nested horizontally and then vertically
  • Have a single line of tabs that scrolls

All of these examples only involve CSS changes (except for the single line of tabs) that can be added inline to your page to override the defaults. Note, however, that for the left and right side examples you need to explicitly set the tab content height and the tabs list width, and that for the single line of tabs you must specify the overall list width.


Filed under: design, tips-n-tricks, web Tagged: css, howto, jqueryui, tabs, webdesign

Demo Websites

To help you vizualize what your new website may look like, we've prepared different "template" websites with mock content.

Company Website

Typical pages for a business include: About Us, Products, Services, Customers, Contacts.
View Demo

Society Website

Typical pages for a non-profit society include: About Us, Officers, Programs, Meetings, Photo Gallery, Contacts.
View Demo

Portfolio Website

Typical pages for a portfolio include: Photo Gallery, About Me, Contacts.
View Demo

Event Website

Typical pages for an event include: General Information, Registration and Travel, Accommodations, Agenda/Program, Pricing, Contacts.
View Demo

Keep in mind, these are samples; your actual website will have your own branding (logo), content (text and images), and menu structure.

About Us

Web Page Authority's vision is to help businesses grow through effective and affordable web solutions. Our team members have experience in diverse industries including information technology, commerce, graphic design, printing, and management, thus building a strong foundation of expertise in web design solutions.

 

Contact Us

+1 (574) 208-3932 Paul (Indiana)
+1 (918) 850-4224 Bogdan (Oklahoma)