Below is the text version of our ‘How To Modify Indexhibit’ screencast. Also, the pdf version is available here.

How to Modify Indexhibit w/CSS:

This tutorial will show you how to modify your Indexhibit website by creating a new theme and making some simple changes to the CSS. We will focus on three major areas:

1. How to create the files necessary for your own Indexhibit theme
2. Using Firebug to examine web pages
3. Styling your theme by modifying an existing CSS stylesheet

Step 1: Creating a new theme

We will begin by guiding you through the process of creating, uploading and activating your new theme. The theme we will create will be based on the ‘Sample’ theme included with your Indexhibit download, and will be based solely on modifying the style.css file (i.e., you need not worry about messing with the index.php file).

First, you need to locate the Indexhibit themes folder on your computer. Locate the themes folder by following:

User > Sites > ‘yoursitefolder’ > indexhibit > ndxz-studio > site > sample

The ‘site’ folder is basically where Indexhibit stores the files for all of its themes. In our example, the new theme we create will start off as a copy of the ‘sample’.

Next, create a new folder inside of the ‘site’ folder and give it a name (e.g., “theme_01″). Once you’ve created this new folder open the ‘sample’ folder and copy and paste the style.css, ie.css and index.php files into “theme_01.” Again, we will only be working with the style.css file, so don’t worry about the other two, they only need to be in that same folder in order for the theme to work.

Now, upload “theme_01″ to ‘yoursitefolder’ > indexhibit > ndxz-studio > site on your remote server (the same way as you did during the Indexhibit installation process).

Next, login to your Indexhibit backend site (http://yoursitename/indexhibit/ndxz-studio/) and click on the ‘Settings’ link in the top right of the screen.

From here you can chose which theme to apply to your site by selecting the ‘Theme’ drop menu on the left-hand side of the screen. Go ahead and select the new theme we created, “theme_01,” from this menu and then click “Update” to set this as your theme. Leave this browser window open.

So by now you should have created a new folder inside of the ‘site’ folder, uploaded this new folder to your server, and activated this theme (don’t worry that it’s just a copy of ‘sample’ so far, we will soon be modifying it shortly to create a unique theme of your own. But before we do that, its a good idea to mention Mozilla Firebug and how it can make your life much easier (or at least more manageable) by allowing you to examine and “borrow” code from other sites.

Step 2: Firebug – how to examine track and examine source code

Mozilla Firebug is a free plugin available for Firefox that allows you to view the HTML and CSS code for pages open in your browser window. By using the “Inspect” feature, you can easily hover over and click on various page elements to reveal the corresponding html and css code for that element.

We will be using Firebug here to identify the parts of our site that we want to modify and the corresponding CSS rule in the style.css file that defines how that element appears on the screen. By doing so, we can then apply this knowledge towards modifying our own theme and track these changes to ensure they look how we want them to.

Remember, our new theme is based on a copy of the style.css file attached to the default “Sample” theme provided by Indexhibit. For the purposes of this tutorial all of our modifications will be made by editing existing rules only — we will not be creating any new rules.

Before we move on to styling our new theme, now is a good time to click on “Visit Your Site” link in the upper right hand corner of the ‘Exhibits: Settings’ window. If you don’t have it already, download and install Firebug.

Once you’re set up with Firebug its time for Step 3: Styling Your Theme with style.css

Step 3: Modifying Your Theme

We will now modify the look of our site by editing its stylesheet. Begin by locating the style.css file for ‘Theme_01,’ the folder we created in step 1. The file should be here:

User > Sites > ‘yoursitefolder’ > indexhibit > ndxz-studio > site > theme_01

Open style.css in your text editing program and notice how it lists things like “#menu” and “#menu ul” followed by sublists of things like “width,” “overflow” and “background color”. These are the CSS rules that define how our site looks, and this is where we will be making our modifications. In particular, we will be making changes to 8 rules: body, a:link (a:visited, a:hover), #menu, #menu ul, #menu ul li.section-title, #content, #content p, and p.

Please note how the following two directions are used:

• ‘Add’ means to leave the existing definitions intact and just adding the given lines to the rule.

• ‘Change’ means to actually replace the current value in a definition(s) with the given one.

The Body:

The first change we will make will be used to make some global definitions for the site’s style. In style.css find the body rule and make the following additions/changes:

1. In ‘body’ Set the default typeface for the site by adding ‘monospace’ in front of ‘Verdana’ in the ‘font-family’ line.
2. Set the background color for the page by changing ‘background: #fff’ to #ccffff.

The Menu:

Next, we move to the navigation menu. Inspecting the menu in Firebug reveals that this section is defined by the rule #menu. Begin modifying the menu by making changes to its color:

In ‘#menu,’ change ‘background-color’ from #fff to #666666. This will give us a charcoal grey navigation menu.

Change the font size, color & layout for the exhibit titles:

In ‘#menu ul li.section-title’ add the following definitions:

1. line-height: 18pt;
2. border-bottom-color: white;
3. border-bottom-style: dotted;
4. border-bottom-width: 1px;
5. color: white;
6. font-size: 14pt;

Next, to modify the exhibit links:

a:link – defines links in their default (unclicked) state. Add the definition:

1. color: #ccffcc

a:visited – defines links after they have been clicked on. Change the definition:

1. color: #666 to #ccffff

Finally, to change the size and color of your name as it is displayed at the top of the menu:

In ‘p’ add the definitions:

1. color: white;
2. font-size: 14pt;

Lastly, we move to modifying the content section.

The Content:

The last changes we will be making are going to effect the content area of the page (ie, where your exhibits appear. To modify the content text:

In ‘#content p’:
Change ‘width’ from 400 px to 700 px.
Then add the following definitions:

1. line-height: 21pt;
2. margin-left: 5px;
3. font-size: 18pt;
4. color: #666666;

These modifications will change the font size, color and spacing for the content text. Lastly, adjust the content display area:

In ‘#content’ add the definition:

1. padding-left: 50px;

Make sure to upload your final style.css to your server, and enjoy! You have now learned how to go about making changes to your indexhibit site by modifying themes.

I have finished by indexhibit theme, now styled and commented. I still think there can be some inprovements with the commenting, but i guess thats the beauty of opensource.

Here is my thread on indexhibit forum

I have applied the theme to my current website and created a page specifically for the theme.

http://www.ednacional.com/indexhibit/index.php?/identity/theme/

Basically the sidebar I have now looks like this:

<div id="menu">
    <div class="container">
 
        <div class="top-section">
            <h1>Mushon</h1>
        </div>
 
        <ul class="nav sectional">
            <li id="Projects">
                <h3>Projects</h3>
                <ul>
                    <li><a onclick="do_click();" href="http://www.mushon.com/fall08/osd/indexhibit/index.php?/project/kriegspiel/">Just a test</a></li>
                </ul>
            </li>
            <li id="Info">
                <h3>Info</h3>
                <ul>
                    <li class="active"><a onclick="do_click();" href="http://www.mushon.com/fall08/osd/indexhibit/">Main</a></li>
                </ul>
            </li>
            <li id="oldstuff">
                <h3>old stuff</h3>
                <ul>
                    <li><a onclick="do_click();" href="http://www.mushon.com/fall08/osd/indexhibit/index.php?/project/older-one/">older one</a></li>
                </ul>
            </li>
        </ul>
 
        <ul class="bottom-section">
	        <p>Just testing</p>
        </ul>
 
        <!-- you must provide a link to Indexhibit on your site someplace - thank you -->
        <ul class="built">
            <li>Built with <as href="http://www.indexhibit.org/">Indexhibit</as></li>
        </ul>
 
    </div>	
</div>

So try it out and tell me what do you guys think?

• Write a css plugin
• Write comments for the css code
• Do a screencast of how to install Indexhibit
• Do a screencast of how to use Indexhibit
• Do a screencast of how to modify Indexhibit (maybe using Firebug too)
• Write a post(s) to document our efforts
• Float our user interface and accessibility concerns to the Indexhibit community (on the forums) and follow up the discussion to fix it.
• more…

As the semester is neerly done, and since you guys seem to be much more in control of your WordPress stuff, I think we should feel safe to swich gears and focus our attention on our OSD project – our class legacy…

• Write a CSS Plugin for Indexhibit, please communicate with the rest of us what your plugin will be about.
• Chip in on the documentation for the Sandbox theme
• Let’s communicate about our Friday gig.

WordPress:

• Start diving into plugins.
• Make your theme links url independent.
• Upload content to your blog.
• Get ready to finish this thing.

Enjoy

• Continue down the WP path:
  1. try to finish the main page
  2. Next go to post page (single.php) (+ if relevant: comments.php)
  3. Then to page page (page.php)
  4. Then to the menus (archive.php archives.php author.php category.php tag.ph)
  5. Then to search (search.php)
  6. Last (/optional): 404.php, attachment.php, image.php, links.php)
• Let’s get our heads into Indexhibit and how can we make it better:
  1. We’ll discuss it in class today
  2. Let’s share some findings from the Indexhibit forum that can shed some light on where to take this
  3. Let’s experiment with theming Indexhibit, it’s not hard, how can it be easier?
• Leonie will be back next week with a ‘Great Wide Open’ for us.
• Enjoy

we had a huge distraction this week, but now we dive directly into into theming our WP themes and into the final OSD project.

On the theme front:

• Finish your main page (header.php / index.php / footer.php / sidebars.php)
• when (/if) you get to it, go to post.php – it should be pretty easy to extend what you did in index.php to it.

On the OSD front (my proposal for moving forward):

• Leonie: Please document your process of trying to install Indexhibit, including (mainly) the difficulties and frustrations. The format could be:
  • What are you trying to do?
  • What are you accomplishing through the official tutorial?
  • What do you do when you’re stuck?
  • How confident are you through the process?
  • What helps/extends confidence? What does the opposite?

  It will be a great way for us to learn about where we should focus our energies.

• Karen, Khurry, Ed & Alexandra: I propose:
  • Research existing documentation of Indexhibit and based on it.
  • Try to install it on your servers.
  • Write a post proposing contributions you/we make to the project as designers (you can propose several and expand on at least one of them).

Leonie – Next week, Great/Wide/Open:

• Got an idea? Yes? No? Talk to me…

Enjoy. (yes, we can)

http://www.indexhibit.org/

My Indexhibit Links on Delicious

http://delicious.com/ednacional/indexhibit

See you soon!