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.

here is step one (no keyboard shortcuts or spelling errors etc)

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

i also posted it on blip.tv

blip tv step 1

http://ednacional.com/osd2/

There are a few technical things left to work on, but other than that i think its ready to be filled with my work. Im pretty excited about it! Thanks for everyone’s help throughout the process.

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/

so in conjunction with khurry’s fantastic pdf i have have created a video to accompany the pdf to help navigate users through step 1.

please take a look

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

step_1_v2

step_1_v2mov

also step 3step_3_v2mov

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Hi all,

Here is my indexhibit tutorial. (take 24 ) I focused on the very basics. The quality is not as good as I had hoped. Any suggesitons how to make it better.

I think I also want to take another one on ” how to help yourself” (firebug, using google as a help tool, finding tutorials online. )

happy class

I apologize. I have been MIA moving with limited internet access. But I am back!! (from across the ocean)

I decided to do a quick indexhibit 101.
Reviewing:
adv mode
setting up the menu
changing the order of the menu
organizing it chronologically
setting the thumbnails or other choices
preview.

If the video is long enough maybe I want to review firebug. This has been an invaluable tool and I think users like me, would appreciate a 101 of this tool from me.

I had been planning to just post it on youtube. Is that what everyone else is doing?

As for my site. I still have to make the adjustments we spoke about in class.
I am not sure if I will be able to finish it by this afternoon, but I guess it always is a work in progress.

Leonie

I hope you had as much fun reading that title as I did writing it.

Anywho, we are currently working on some technical issues tied to the production of this upcoming blockbuster, but in the meantime below are the tutorial instructions that inspired the film-adaptation. Some quick background on the concept of the tutorial: we’re approaching this from the standpoint of the average type of person who would use Indexhibit. The target audience therefore is individuals who have been able to install and setup an Indexhibit site but would like some direction on how to modify their site’s appearance without having to work with too much code. Here is the pdf version of instructions.

kB

4 am, and I am proud to announce that my plugin has just been submitted to the Indexhibit forum. You can see my thread here.

Here is the link to my zipped plugin file, which contains the css, Mushon’s index.php files, and a **read-me** file (at 4am, this seems like a stroke of genius).

Also, you can see my blog Metaphora here. It is still a work-in-progress, as is everything in life I suppose. There is one thing I’d like to problem solve in class if we have time. Otherwise, I’ll be beginning to add content over break, and make coding tweaks when the spirit moves me.

Signing out for the night, see you guys tomorrow (well…today)
OSD love,
Alexandra

so i have been working with the free trial of snapz pro- there seems to be something wrong with my quicktime and i keep downloading the newer version to no avail. anyway, step 1, is below in a very rough form. i am going to try to sleep for a few hours then fight quicktime.

peace. step1