Indexhibit^TM
Index + Exhibit

Hey there!
As this system is open-source and I couldn't find a lot of customization-instructions yet I thought I start with something I did: Images as section-titles in the navigation.

First of all: Maybe it's not perfect as I am working more on design than writing scripts, but: it works.

Files modified:
- ndxz-studio/site/plugin/index.php
- ndxz-studio/site/yourthemefoldername/style.css

First I modified the construction of the navigation in the index.php: (I had to add some spaces at li, ul and span-tags to display it here properly)
foreach($order as $key => $out) { $s .= "
< ul class='$key'>
\n";


if ($out[0]['disp'] == 1) $s .= "< li class='section-title-$key'>< span>" .$key. "< /span>\n";


As you will notice I added $key to the li-class and span tags into the li-tag. This helps me to modify the headings in the css file later on.
The span-tags make it possible to keep the navigation-titles as text. That makes all the informations accessible for blind people (for example).

Next step is to add the css-styles:

The variable $key holds the name of the section you defined in your backend. For example your first sections is called "news", your second "design" and your third "about".
Your css-style would then look like this:


#menu ul li.section-title-news { display:block; width:90px; //width of your image height: 20px; //height of your image background-image:url(../img/news.png); background-repeat:no-repeat; }

#menu ul li.section-title-design { display:block; width:90px; //width of your image height: 20px; //height of your image background-image:url(../img/design.png); background-repeat:no-repeat; }

#menu ul li.section-title-about { display:block; width:90px; //width of your image height: 20px; //height of your image background-image:url(../img/about.png); background-repeat:no-repeat; }


and so on.

now to hide your text-titles I used that css-style:
#menu ul li.section-title-news span, #menu ul li.section-title-design span, #menu ul li.section-title-about span { left:-2000px; position:absolute; }
That moves the text of all 3 sections 2000 pixel to the left, outside of your view. (i guess less px would do it too :) that's all! it looks harder than it really is. upload the images to the img-folder (ndxz-studio/site/img/) or change the path in the css-code. you're done.

Hope you understand my english as I'm not native...

cheers, flow

For some reason I can't edit my entry.

The code I edited in the index.php should look like this:


if ($out[0]['disp'] == 1) $s .= "
< li class='section-title-$key'>
< span>
" .$key. "
< /span>
\n";


It's nice if you can show us an example of this as well.

Hi!

For some reason I'm trying to implement your code, and where the image should appear, I get:
< ul class='-'>

< li class='section-title--'>
< span>
-
< /span>


Any clues as to what I might be doing wrong?

Thanks!

Show us the link.

http://www.mrabrams.es

and just in case you want to review the source of the modded files,

http://rs320.rapidshare.com/files/115248930/index_mod.php
http://rapidshare.com/files/115249047/style.css.html

Thanks in advance and congrats on the wonderful work!

hey atx

you have to delete the spaces in the html-tags.
they were just to display it here because without them they wont be shown as code in this forum.

cheers

oh and your a missing the closing tag for the li after the span-closing tag

No luck.

I tried what you said to no avail.

Either I'm doing something really wrong or I should better stick to design rather than coding (probably both).

Anyhow, what happens now is that as soon as I turn on my theme, the page stops working (it doesn't load at all, no title, no content, no images... nothing)

If I turn it off, though, everything works perfectly, so I'm not sure if it has to do with the CSS or the index.php

Any light shed on the subject would be greatly appreciated, although I understand that spending time on newbies perhaps isn't what you enjoy the most, so don't worry if you don't.

Perhaps in the end the best solution is for me to take your php file and put it directly in my folder, or something of the sort.

Thanks for your time!

There you go: zip-Archive with index file :)

Either take a look and see what you maybe did wrong or just rename it to index.
And be sure to have the proper css-styles :)
flo

Finally got it to work, thanks a million!

with this it says:

Files modified:
- ndxz-studio/site/plugin/index.php
- ndxz-studio/site/yourthemefoldername/style.css

Is it correct that there should be a plugin/index.php file?

I replaced the index.php in my site, but it removed the whole site. I had to replace an original index.php to get it back.

It would be great to get this to work

Thanks

Gareth

Sorry to bump this but I was wondering if anyone knew a way to keep the $page with the $key. I know the script is meant to move the section-title off the page for the nav-image but I was using it to move it to the right, possibly enabling two columns. So you could write the columns in the css, something like this:

1. 2nd column:
2. #menu ul li.section-title-"yoursectionname" span { left:120px; position:absolute; }
3. #menu ul li.title-"yourpagename" span { left:120px; position:absolute; }
4. 1st column:
5. #menu ul li.title-"yoursectionname" span { left:60px; position:absolute; }
6. #menu ul li.title-"yourpagename" span { left:60px; position:absolute; }

Would this be an alright way to go about this or am I way off?

Hi guys,

I did the same thing in another way. To me it seems to be more simple and a little bit better for being read by search engines. How about this:

1. <strong>1st edit ndxz-studio/site/plugin/index.php</strong>
2. if ($out[0]['disp'] == 1) $s .= "
3. < li class='section-title'>< h2>" . $key . "< /h2 >
4. < img src='http://www.your-domain/sign/ndxz-studio/site/your-theme/h2_$key.png' alt='description | $key' />
5. < /li >n";

DO NOT FORGET TO REMOVE THE SPACES BETWEEN THE TAGS ABOVE

You’ve got to do this twice. In my case it’s line 184 and 210. It should be the same in yours.

Note: I didn't figure it out how to do this without writing the whole url. I guess someone out there might add the solution ;-)

2nd create your images

1. Now you only have to put the images in your theme folder. Name them according to the section name:
2. h2_section-name.png

Note: I always give the section name and the folder name the same title and write them only in small letters. the only space I use is a minus.
If you like to use a JPEG or a GIF, don't hesitate :-) but remember to edit the css and the /plugin/index.php!

1. <strong>3rd hide the headlines</strong>
2. Add the following to your style.css
3. #menu h2 {display: none;}

This is it! Now you only have to place the correct image into your theme folder when adding a new section.

Cheers

Dr. Osimo

Ah well, you can view it here!
Didn#t fix anything for WIN nor IE -- Just developping… ;-)