Phillip Napieralski » jQuery UI http://blog.pnapieralski.com Programmer, Engineer, Researcher. Tue, 20 Dec 2011 16:41:18 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Design Your Site Around a jQuery UI Theme http://blog.pnapieralski.com/jquery/jquery-ui/design-your-site-around-a-jquery-ui-theme/ http://blog.pnapieralski.com/jquery/jquery-ui/design-your-site-around-a-jquery-ui-theme/#comments Sun, 31 Jan 2010 00:03:07 +0000 Phillip Napieralski http://blog.pnapieralski.com/?p=10 personal portfolio an overhaul. I started with a preset jQueryUI theme hosted by Google and the end results look pretty good!]]> I recently gave my personal portfolio an overhaul. I did it on a whim after looking at the various preconstructed google hosted jQuery UI themes.

Choosing a theme

I wanted to add jQuery to my portfolio for some time, but I always hit a wall when I tried to roll my own theme. I’m just incredibly inexperienced at “what looks good.” Lucky for me, google has a nice selection of quality jQueryUI themes that you can directly link to on your site.

Check out this blog post for an excellent list of themes to choose from.

Adding it to your website

I went with the Pepper Grinder theme for my portfolio. To add jQueryUI and the Pepper Grinder theme, I simply added the following lines between the <head> tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" type="text/css" />

Linking to the google hosted distributions has a serious advantage here: I’m saving bandwidth (not that it matters since DreamHost gives unlimited) and if someone comes to your profile after using these files from another website, it’s already cached!

Designing your website around the theme

I did almost zero work to get my website to match this theme. Here’s the key: the provided .css files also loads various .png files for the backgrounds used in the jQuery theme.

To find out what those files are, open up the .css file and do a search for “png.” At this point, I simply changed the background-image of each portion of my site until I got something that looked good (that’s pretty much it)!

Advice

A piece of advice I could give is to play with the jQuery theme quite a bit before delving into modifying your site. I loaded up the Pepper Grinder theme on my projects page and played with it for a good 30 minutes to get a feel for the theme. For example, I simply copied the link colors from the google hosted .css file to use on my nav bar.

UPDATE: I further redesigned my portfolio website. Check out my post on it.

]]> http://blog.pnapieralski.com/jquery/jquery-ui/design-your-site-around-a-jquery-ui-theme/feed/ 0