How to Modify Indexhibit w/CSS

 Sample of the pdf document :  

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.....

  Click here for  Download PDF / FREE