Forums » Ideas

Tutorial: images as navi-titles

flow
AUSTRIA
2008-05-13 23:20:07
Permalink Post
 

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

flow
AUSTRIA
2008-05-13 23:27:37
Permalink Post
 

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";

Vaska A
I WROTE THIS
2008-05-14 09:01:52
Permalink Post
 

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

atx
SPAIN
2008-05-15 18:46:15
Permalink Post
 

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!

Vaska A
I WROTE THIS
2008-05-16 00:19:45
Permalink Post
 

Show us the link.

atx
SPAIN
2008-05-16 06:20:13
Permalink Post
 

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!

flow
AUSTRIA
2008-05-16 15:22:13
Permalink Post
 

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

flow
AUSTRIA
2008-05-16 15:23:23
Permalink Post
 

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

atx
SPAIN
2008-05-16 18:44:35
Permalink Post
 

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!

flow
AUSTRIA
2008-05-16 21:31:24
Permalink Post
 

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

atx
SPAIN
2008-05-17 18:01:55
Permalink Post
 

Finally got it to work, thanks a million!

gozk
UNITED KINGDOM
2008-06-24 16:26:09
Permalink Post
 

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

redhood
UNITED STATES
2008-07-30 23:42:38
Permalink Post
 

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?

Doctor_Osimo
GERMANY
2008-08-19 19:20:26
Permalink Post
 

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

Doctor_Osimo
GERMANY
2008-08-19 19:22:27
Permalink Post
 

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

Bugsby
SWEDEN
2009-09-01 16:43:03
Permalink Post
 

Thanks Doctor_Osimo, it works like a charm!

Jana
SPAIN
2009-11-02 17:08:41
Permalink Post
 

Hello!

I've followed the instructions (from Flow) and it doesn't work. Look here

I've repalced the index.php in the /plugin folder

I've created the section title images with their own correct names and placed them into the /img folder

  1. I've changed my css style:
  2. #menu {
  3. background-image:url(http://janamartinez.com.mialias.net/files/Fondo-barra-menu2.png);
  4. background-position: center;
  5. height:100%;
  6. overflow: hidden;
  7. position:fixed;
  8. top:0px;
  9. bottom:0px;
  10. left: 0px;
  11. width:305px;
  12. }
  13. #menu ul li.section-title-janamartinez {
  14.             display:block;
  15.             width:212px;
  16.             height: 32px;        
  17.             background-image:url("http://janamartinez.com.mialias.net/web/ndxz-studio/site/img/janamartinez.png");
  18.             background-repeat:no-repeat;
  19.  }

#menu ul li.section-title-dissenygrafic {
            display:block;
            width:212px;
            height: 31px;        
            background-image:url("http://janamartinez.com.mialias.net/web/ndxz-studio/site/img/dissenygrafic.png");
            background-repeat:no-repeat;
}

#menu ul li.section-title-janamartinez span, #menu ul li.section-title-dissenygrafic span, {
left:-2000px;
position:absolute;
}
#menu ul {
line-height:15px;
list-style: none;
margin:0 0 0 80px;
width:213px;
}

I don't know what's wrong, can anyone help me?

Thanks a lot!

Jana

lorihoffman
UNITED STATES
2009-11-09 03:00:58
Permalink Post
 

I created my menu using images as section titles according to Doctor_Osimo's tutorial above. Everything actually worked fine except I'm getting the following php code at the top left area of my site: foreach($order as $key => $out) { $s .= "
\n"; if ($out[0]['disp'] == 1) $s .= "

It's in the top left corner behind my top image and I can see the end of it sticking out from behind, going into my content section. You can see what I'm talking about here: http://www.lorihoffman.net/test/ .

Is there some sort of error in the php file that's making this line of php show up? Pls help!

Thanks!
Lori

arsondpi A
GREECE
2009-11-09 10:25:20
Permalink Post
 

Hello there -

Are you linking back to Indexhibit?
Please read the forum rules and please don't double post.

avisar
ISRAEL
2009-11-26 17:24:08
Permalink Post
 

hello,
i tried following the above tutorial, but it doesn't seem to work for some reason, i feel ive tried pretty much every thing with this one.
im trying to change my section titles (illustration, photography etc') with png files of hand written typography. when i add the above lines to style.css and index.php it cancels the expanding menu feature i had on the titles (which id like to keep), and the image doesnt show.
i would truly appreciate any kind of help with this if anyone knows what im doing wrong, thanks in advance!
avisar

my site is at:
http://www.avisar.ws/

avisar
ISRAEL
2009-11-26 17:42:45
Permalink Post
 

it also makes all the images cover up my menu, including the indexhibit credit, which is supposed to show up when pressing 'about this site'

arsondpi A
GREECE
2009-11-26 22:01:57
Permalink Post
 

Start by editing the right index.php: ndxz-studio/site/plugin/index.php
Not your themes index.php.

Read the thread carefully from the start...

avisar
ISRAEL
2009-11-30 18:27:24
Permalink Post
 

ah, finally got it, thanks so much!

arsondpi A
GREECE
2009-11-30 21:42:44
Permalink Post
 

avisar I like your illustration section.

naems
UNITED STATES
2009-12-28 02:56:50
Permalink Post
 

so I followed the instructions from Doctor_Osimo and it was successful in hiding the section names, however the images didn't show up. I'm not sure if there is something I'm missing.
Was there something to add to the css file besides #
# #menu h2 {display: none;} ?

naems
UNITED STATES
2009-12-28 03:00:57
Permalink Post
 

ah nevermind, i got it... I didn't realize you have to take out the # from in front of stuff. I took it out and it works now.

minimarc
SPAIN
2010-01-11 09:31:24
Permalink Post
 

Hi all.
I am having some trouble with this.
Once I have edited both the index.php and the style.css (in their respective folders) and uploaded the images, my website appears blank.

In the index.php I changed twice the script as Osimo suggests, yet in my case, I had to edit lines 184 & 135.

Initially I only changed line 184, but no luck.

Could anyone give me any hint on what to check next?

Many many many thanks.

web here

minimarc
SPAIN
2010-01-11 10:45:37
Permalink Post
 

sorted, sorry!

Ezequiel
ARGENTINA
2010-01-16 01:01:16
Permalink Post
 

Hi. I followed the instructions from Doctor_Osimo (nice!!)

But, i would like to put the image in stead of the exhibition-title, or make the navi-title linkable. (excuse my english). The second thing is what i did but it directs to the index. I thought that ndxz_rewriter($key['url']) would do the job...
this is what i got in plugin/index.php starting at line 180:

  1.     foreach($order as $key => $out)
  2.     {
  3.         $s .= "<ul>n";
  4.         
  5.     if ($out[0]['disp'] == 1) $s .= "<li class='section-title'><h2>" . $key . "</h2 >
  6.     <a href='" . BASEURL . ndxz_rewriter($key['url']) . "' onclick="do_click();">
  7.     <img src='http://www.bmfotografia.com/ndxz-studio/site/img/h2_$key.png' alt='description | $key'/>
  8.     </a></li>n";
  9.         
  10.         foreach($out as $page)
  11.         {
  12.             $active = ($rs['id'] == $page['id']) ? " class='active'" : '';
  13.                 
  14.             $s .= "<li$active><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick="do_click();">" . $page['title'] . "</a></li>n";
  15.         }
  16.         
  17.         $s .= "</ul>nn";
  18.     }

Thanks!!

Ezequiel
ARGENTINA
2010-01-16 01:06:21
Permalink Post
 

Sorry, this the Link

Ezequiel
ARGENTINA
2010-01-16 02:39:00
Permalink Post
 

i manage to put an image in stead of the exhibition-title (no section-title).
Follow the Doctor_Osimo instructions and re-write plugins/index.php at line 193 this way:

  1.             $s .= "<li$active><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick="do_click();"><img src='http://www.bmfotografia.com/ndxz-studio/site/img/h2_".$page['title'].".png' alt='description | ".$page['title']."'/></a></li>n";
  2.         }

Name the imgs acording to the exhibition name:
h2_exhibition-name.png

Bye, greetings.

fransvax
BELGIUM
2010-01-28 14:38:03
Permalink Post
 

hello!
I tried the osimo's way, and it work fine!
But their is a weird little "n" showing under every section names... impossible tu figure out whqt's wrong in the style.css... can someone help, please!

Thank you

free-advice.be

jip
FRANCE
2010-03-09 10:46:56
Permalink Post
 

Hi,
I've follow the instructions from Doctor_Osimo, and it's work, thanx very much.
I have a question: I would like to put a rollover effect on my navy-titles (change the image of the section-titles when I put the cursor over the image).
Do you know how can i make it?
Thanx very much and 'scuse my english!
Jip.

jessedittmar
UNITED STATES
2010-03-10 01:57:18
Permalink Post
 

Hey, I'm by no means a coder, so this is all hit or miss for me. I tried Doctor_Osimo way... the only thing I changed was to delete the "sign" of this code because it was not the path on my site:
< img src='http://www.your-domain/sign/ndxz-studio/site/your-theme/h2_$key.png' alt='description | $key' />

But for some reason, All i'm seeing on my site is the code:

www.jessedittmar.com

any thoughts?! Help would be amazing

orionrush
UNITED KINGDOM
2010-05-20 19:43:45
Permalink Post
 

Just throwing this in here for continuity - would this be considered a bit of visual indexing magic?
Without a demo Im unclear how this plays out.

Visual Indexing
depreciated, http://www.indexhibit.org/forum/thread/5671/

If u want thumbnail gallery homepage
http://www.indexhibit.org/forum/thread/8316/

Images as section titles: Visual Indexing
http://www.indexhibit.org/forum/thread/1017/

ele
ITALY
2010-05-21 13:53:48
Permalink Post
 

Hello,
Even I'm seeing a bunch of "n" before the title images.
Any ideas?
ele.

ele
ITALY
2010-05-21 13:53:52
Permalink Post
 

Hello,
Even I'm seeing a bunch of "n" before the title images.
Any ideas?
ele.

Showing 1 - 37 of 37 posts in Forum > Ideas > Tutorial: images as navi-titles
 

You need to be logged in to post.