Indexhibit^TM
Index + Exhibit

I want to style different sections with different styles using CSS. I found a Javascript method for accomplishing this but I'd rather not use Javascript for something that could ordinarily be accomplished with very basic CSS. Any way to do this?

There are a few threads around here with some changes you could make the code that creates the Index - if you add an #id to the container ul for each section then you could easily do what you need.

For anyone else who wants to do this:

1) Open up /ndxz-studio/site/plugin/index.php in your text editor of choice;

2) Find the tag that you need to edit. There are only two in the file; one for chronological navigation, and one for section-based navigation. The line will look like this:

1. $s .= "<ul>";

3) Just below that line, you'll see another line that contains a PHP variable called $key

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

4) Indexhibit uses this $key variable to generate the section title in the navigation. You can use the same variable to make your [ul] tag match the section name, making it accessible to CSS. Replace the existing code from step #2 with the following:

1. $s .= "<ul id="" . str_replace(" ", "_", $key) . "">n";

5) This code replacement will insert the $key variable into your tag, while also using the PHP str_replace( ) function to replace any spaces in the section title with underscores. I needed to use this function because the section I wanted to style was was called resident artists, but CSS classes and IDs can't contain spaces. The PHP code code changes it to resident_artists (note the added underscore) so that the has a valid CSS ID. Here's what the HTML output looks like after this change:

1. <ul id="resident_artists">

6) After this, all you have to do is address the newly-labeled section in your CSS file as follows:

1. ul#resident_artists {
2.     background: #eee;
3. }

Many thanks for taking the time to write this tutorial. I'm sure many will find it useful. I'm going to play with it tomorrow.

Hi sempervirent, thanks for this. I have given this a go but am getting the following error:

"Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/kit34324/public_html/originals/ndxz-studio/site/plugin/index.php on line 129"

I have replaced : $s .= "

As the error says, there is a problem parsing your PHP. This probably means that you have a syntax error (i.e. a missing quotation mark, concatenator, semicolon, or some other mark of sloppy programming – no offense). Just look carefully at line 129 and I bet you'll find the mistake.

Thanks sempervierent I am definitely doing something sloppy!

I have started from scratch.

1. I actually cant not find $s .= "<ul>n";

1. but can find $s .= "<ul>n"; 
2. on lines 182 and 133, these are followed by

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

Any idea what I am doing wrong? Im assuming its something very basic.

Cheers!

Opps that code didn't come out how I wanted it.. apologies.
Hopefully it is clear enough.

Bump, still working on this. Any help would be great, thanks!

Sorry for the repost guys, still really struggling. Has anyone managed to do this?
I cant find the line $s .= "

mbird, you are right, the error you're seeing is due to a code formatting mistake in my original post. Sorry about that but it's kind of tedious to have to format code blocks in this way.

You're just looking for a regular <ul> tag, and you're right, it's on lines 133 and 182, depending on which menu style you're using.

If Vaska or another one of the mods could change the formatting of my original instructions, it would probably save many future headaches for Indexhibit users worldwide.

1. Change this (Step 1):
2. $s .= "<ul>n";

1. To this:
2. $s .= "<ul>";

@ sempervirent / done

Thanks again for the help sempervirent,
Im still managing to have a few problems.

I have changed line 182 from

$s .= "";

To this

$s .= "n";

But am still getting the following error:

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/kit34324/public_html/originals/ndxz-studio/site/plugin/index.php on line 182

Is there anything I could be missing? Do I need to do anything to line 184?

Thanks mate.

Sorry not sure what happened there, I have changed 182, from:

1. $s .= "<ul>";

to

1. $s .= "<ul id="" . str_replace(" ", "_", $key) . "">n";

The PHP error is telling you that have an issue with a string... some of the quotation marks need to be escaped (they need a backslash before them to tell PHP that they are literal quotation marks and not the beginning or end of a string).

once again, the formatting above is incorrect, I'll see if this works:

1. $s .= "<ul id="" . str_replace(" ", "_", $key) . "">n";

Thanks you're a legend! The above seems to be the same as what I have posted?
I have no idea about PHP so am very much just shooting in the dark based on your help, no idea where a backslash would go...

Thanks!

No, the code is definitely getting reformatted for some reason. The escaped quotes are getting stripped out, and I didn't notice it before.

Have a look at the following screenshot and you'll see the line as it should appear.

http://i44.tinypic.com/2hwiwbq.gif

arsondpi, thanks for the edit, any way you can edit that post again? Line 132 in this screenshot would replace step #4 in my notes above. Maybe the removal of escaped quotes is a security thing though...

Fantastic this is perfect, thanks for helping me with this.
Works perfectly, I highly recommend people having a go at this.

No problem, sorry the code formatting mistakes wasted some of your effort. This stuff can really drive you crazy sometimes.

Is there a way to do this with the individual exhibitions - ie the il elements them selves, not just the ul?

i've managed to get things right in the index file and looking at the source code of my page shows, that each section has it's own id.
only i dont know, where exactly in my $theme/style.css i have to place the code bit from step #6, so the single sections appearance changes. placing it after all the #menu code doesnt seem to work.
if someone answers it would also be great to explain why it's going where it's going.

the right code for changing the font color would be
color: #000000
right?
thanks

$template/style.css, not $theme/style.css. sorry

one more edit:
font-size: larger
for example is changing just this one ID, but changing the color is not working.

hi, I am new to all this .php .css and so on, but I think I did it as sempervirent explained... it still doesn't work when I enter
ul#Home to the .css file

can anybody help me? I just want to change the font colour on the main page...
thanks in advance!

myWebpage

Concerning this post in this thread:

css selectors are case sensitive and preferably should be in lowercase for various reasons.

Thus this:

$s .= "<ul id="" . str_replace(" ", "_", $key) . "">\n";

should be like:

$s .= "<ul id='" . strtolower(str_replace(" ", "_", $key)) . "'>\n";

Oh, Mr. Fancypants makes a post.

;)

Vaska I'm gonna get you for this one... just wait - just wait... :-P