Indexhibit Support

Hi everyone,

I'm pretty new to Indexhibit, and have been researching on ways to customize it. I'm definitely far from an expert in web development, but have stumbled across a really cool font replacement javascript called Cufon.

Unfortunately I am completely lost on how to integrate this into my Indexhibit. It basically replaces your h1 tags with the font you have set up for the script to use. However, I am not sure how to assign header tags to the menu system that indexhibit uses.

Has anyone had any success with this? Thanks!

I can't even find a demo page of Cufon...

Here is a link to a tutorial. I'm having trouble finding the right place to drop in the code.

ok...i'm going to make a plugin right now until somebody shows up with some food for dinner.

;)

Woops...I was nearly done when I forgot that the current version of Indexhibit can't do what I want...so...

In your template simply add the cufon javascript lines...and then add the css rules to go after whatever you want to style.

I like this...think I'm going to start using it too...

Put the js files in the /ndxz-studio/site/js/ folder...then put this into your template...

1. <script type="text/javascript" src="<<%baseurl%><%basename%>/site/jscufon-yui.js"></script>
2. <script type="text/javascript" src="<%baseurl%><%basename%>/site/jsJokerman_400.font.js"></script>

Be sure to replace the second one with whatever fontset you are using - guess you get these from the cufon site?

And then add this one to the template as well...making rules for things you want to style...

1. <script type="text/javascript">
2.     Cufon.replace('h1');
3. </script>

Because I'm not famililar with this I don't know if you want to style p (paragraphs) or not...might be a bit much.

Here comes a dumb question, (just start with indexhibit a couple of days ago), where do I find this template? What is this file name and location?

this looks cool!! but the text can't be selected...

the folder you are editing, is your template. as seen on the indexhibit settings, you should be using the sample template or one at your own edition responsibility. so the folder of you template is located at "ndxz-studio/site/".
as you can see, the sample folder you selected, contains the CSS files and the index.php vaska refered. it is inside of this file that things should be working. it'll look familiar to you, as it looks like the html file shown at that tutorial of c√∫fon.

Thank you for that, it works. One more question, how do I apply this new typeface to something where I use ? I really don't know anything about CSS, or web dev for that matter.
This is what I have for now. Notice "Featured Projects" is now in custom font.
Thanks for reading.

Well, now is a good time to learn some stuff...just pop this in with the rule above and see what happens. There is a tutorial at the top of the forum about html/css that has some links in it that could be some good reference as well:

1. Cufon.replace('li a'); // this should style the Index
2. Cufon.replace('p'); // this should style the text - but not sure if this is a good idea

Oh, figured it out. Thanks for reading regardless.
Trials and errors are fun

Damn, I'm liking Cufon alot!

I'm just bumping this because it's so good. I'm revamping a site currently that will be exactly 400,000,000 times better than before.

Super good.

So sometimes it's a good thing if I'm late with food ;)

Hi,
Vaska, I tried to did what you explained above but it doesn't work on my website. I imagine I forgot something...
Here is my website.
I have changed the typo, but it was the same with the default one.
Thank you for your help.

what's wrong in this line:

1. <script type="text/javascript" src="<http://sylvainthomin.com/ndxz-studio/site/jscufon-yui.js"></script>

???
...and there's no h7 tag in html.

...and you must have mispelled the location of these scripts (they're not in the site folder as the line above says it is - they're in the js folder...)

Hi Sylvainman, looking at your page I see that the crabs plugin have some issues when there's no text on the exhibition, it put some blank space on the right.
I recommend you to try the horizontal plugin, it solves some of those issues I think.
Nice pictures!

1. arsondpi -> you're right, I forgot /js/ in the line. Thank you.
2. But, yes I have h7 tag
3. It's here :
4. <p><h7><span style='background: #ff0;' >SYLVAIN THOMIN
5. PORTFOLIO</span></h7></p>
6. And the scripts location is good. 
7. But it doesn't work...

paucc -> I had some pages with crabs and others with horizontal. I've changed everything for horizontal. thx.

oups sorry for text

1. arsondpi -> you're right, I forgot /js/ in the line. Thank you.
2. But, yes I have h7 tag
3. It's here :
4. <p><h7><span style='background: #ff0;' >SYLVAIN THOMIN PORTFOLIO</span></h7></p>
5. And the scripts location is good. 
6. But it doesn't work...

paucc -> I had some pages with crabs and others with horizontal. I've changed everything for horizontal. thx.

ok... I don't know how to use "html code"

also

...script type="text/javascript" src="<http...

what's the < doing in the url?
H7 tag does not exist. H tags span between 1-6 (h1-h6)

+

you are asking for li a to be styled which is gonna be tricky...

Either insert the cufon code section just before the </body> tag or do this:

1. <script type="text/javascript">
2. $(document).ready(function() {
3.     Cufon.replace('h6');
4.     Cufon.replace('li a');
5.     Cufon.replace('p');
6. });
7. </script>

try these out in various browsers as I don't know if things break in ie....

Cufon is really nice by the way... it's a shame that text is not selectable... On hover states are supported though.

edit:
The solution above works fine but... I was wrong in a couple of things:
calling jquery etc before cufon is good enough for cufon to handle li a etc. The problem is that it won't work without a $(document).ready or by puting it before the ending body tag. Any ideas as to why the original code cannot be used?

arosndpi -> I have corrected mistakes and put the code at the end of the body and it works.
Thanks a lot.

i've tried inserting the code into my template but it doesn't seem to change anything.. could someone help me out here please? I inserted it before the last in the index.php file

1. <script type="text/javascript" src="http://www.maxpinckers.be/ndxz-studio/site/js/jscufon-yui.js"></script>
2. <script type="text/javascript" src="http://www.maxpinckers.be/ndxz-studio/site/js/jsImpact_label_400-Impact_Label_400.font.js"></script>
3. <script type="text/javascript">
4. Cufon.replace('p');
5. </script>

Those two javascript files aren't there...

ow yes i see i made a mistake in the file name ... sorry for wasting your time.
One more question, is it possible to use different fonts with this script ?

Yes...follow the Cufon link above to the official Cufon site - there is a tool that will allow you to go typeface crazy.

Cufon is super cool...I wish Indexhibit was as cool as that. I can dream.

;)

what do i insert after 'cufon.replace' to change the section titles ?

1. Cufon.replace('li.section-title');

thanks for the help Vaska!!
(indexhibit is definitely as cool as cufon ;))

I guess I've been doing this for too long now.

;)

sorry to bother you with this again but I just cant get it to work! Everytime I try to add a second font it just uses that one for everything and the previous one doesn't show.
What I want is Impact_Label_400 as my overall font and Impact_black_400 as one that i can use for banners, lets say for h2..
This is the script i've got right now

1. <script type="text/javascript" src="http://www.maxpinckers.be/ndxz-studio/site/js/cufon-yui.js"></script>
2. <script type="text/javascript" src="http://www.maxpinckers.be/ndxz-studio/site/js/Impact_Label_400.font.js"></script>
3. <script type="text/javascript" src="http://www.maxpinckers.be/ndxz-studio/site/js/Impact_black_400.font.js"></script>
4. <script type="text/javascript">
5. Cufon.replace('h1', Impact_Label_400.font.js);
6. Cufon.replace('h2', Impact_black_400.font.js);
7. </script> 

$(document).ready(function() {
Cufon.replace('h1');
Cufon.replace('h4');
Cufon.replace('li a');
Cufon.replace('li.section-title');
});

They have information at their site about how to use more than one font.

Hey Vaska, Everything is going great with Cufon! Except for one thing, it has 
a slight delay before the font is loaded...

I've already tried adding

1. <script type="text/javascript"> Cufon.now();</script>

before the closing body tag and before the google analytics script, but it still aynt workin!!

I don't really know...

Cufon has a place where you can ask questions as well.

hi

I wonder if you can help me, I've been trying to get cufon to work in my indexhibit exhibitions with no luck - I've been through these posts and tried the lot (I think) but still nothing. Chrome seems to be stripping the h1 text but not replacing it with anything, and in firefox I just get the default h1 styling.

I'm trying to customise the way the actual exhibits display to fit my design and until I found this I was having to embed an image to get a header and blurb line into it (obviously not the best).

I've checked and rechecked the paths and they seem ok, I've tried replacing different tags (I want the h1 in the actual exhibit to change and wondered if that might be causing problems but have changed it to the li a tag and still nothing), tried the $document.ready thing etc etc)

here's the page http://simackenzie.com/portfolio/index.php?/projects/cufon-test/

any ideas? this is driving me bonkers! ;P

as I can see in your menu on the other pages, cufon works on it, no ?

oops sorry - should say I've changed the tag back to the h1. The menu's just rendered in text at the moment...

never mind, pal sorted it out for me :)

How about sharing the solution with people for the future?

ah sorry! my problem was that I tried the document ready thing, but had that code in twice, once I combined that line of script that was already there with the one above (rather than including both), it worked. My own dumb fault, really.

btw- to get more than one font displaying you just have to specificy them in you cufon.replace script.

this is what worked for me in the end

1. script type='text/javascript'>
2. $(document).ready(function()
3. {
4.     Cufon.replace('h1', { fontFamily: 'minion' });
5. ¬†¬†¬†¬†Cufon.replace('ul.breadcrumbs li a', { hover: true, fontFamily: 'minion' } );
6. ¬†¬†¬†¬†Cufon.replace('ul.breadcrumbs li a.off', { hover: true, fontFamily: 'minion' });
7. ¬†¬†¬†¬†Cufon.replace('span.blurb', { fontFamily: 'minion-text' });
8. ¬†¬†¬†¬†Cufon.replace('p.sub-header', { fontFamily: 'minion-text' });
9. ¬†¬†¬†¬†Cufon.replace('p.big-front', { fontFamily: 'minion-text' });
10. ¬†¬†¬†¬†Cufon.replace('p.big-front a', { hover: true, fontFamily: 'minion-text' });
11. });
12. </script>

please excuse the fact that if you look at my site in too much detail it turns out to be an awful hack! ;P

(^ code to activate hover states in there too)

sorry! this is the code (the one above is from another page and therefore loses the indexhibit specific bits)

1. <script type='text/javascript'>
2. path = '<%baseurl%>/files/gimgs/';

$(document).ready(function()
{
setTimeout('move_up()', 1);
Cufon.replace('h1', { fontFamily: 'minion' });
    Cufon.replace('ul.breadcrumbs li a', { hover: true, fontFamily: 'minion' } );
    Cufon.replace('ul.breadcrumbs li a.off', { hover: true, fontFamily: 'minion' });
    Cufon.replace('span.blurb', { fontFamily: 'minion-text' });
    Cufon.replace('p.sub-header', { fontFamily: 'minion-text' });
});

what a n00b :(

Hey vaska,

I'm still having problems with the delay on my Cufon font that has to load every time when a page is viewed..
I've tried everything I possibly can to fix this but it just won't do it!

I've inserted the Cufon.now() script and tried to put it in different places in the index but still nothing works...
Please help me solve this problem so that I can finally finish my site.

Thanks for all your help!

this is my site:
http://www.maxpinckers.be/

Hello, I just wanted to add kernest into the mix as another option to display webfonts. It´s pretty tidy, check it out.

pinckers try having these lines in your header (and not twice and at the end of the document):

1. <script type="text/javascript" src="http://www.maxpinckers.be/ndxz-studio/site/js/cufon-yui.js"></script>
2. <script type="text/javascript" src="http://www.maxpinckers.be/ndxz-studio/site/js/Impact_black_400.font.js"></script>
3. <script type="text/javascript" src="http://www.maxpinckers.be/ndxz-studio/site/js/Impact_white_400.font.js"></script>

and these lines just before the </body> tag (right after your google anal. stuff)

1. <script type="text/javascript">
2. $(document).ready(function() {
3.      Cufon.replace('h3', { fontFamily: 'Impact_black' });
4.      Cufon.replace('h4', { fontFamily: 'Impact_white' });
5.      Cufon.replace('p', { fontFamily: 'Impact_white' });
6.      Cufon.replace('li a', { fontFamily: 'Impact_white' });
7.      Cufon.replace('li.section-title', { fontFamily: 'Impact_black' });
8. });
9. </script>

ps. "...google anal stuff..." Contains sexual imagery?... hmmm.... :-D

Thanks a lot arsondpi!!

It seems to be working much better now.
On some pages it still lags but I think that's because there are some mistakes in the html. Do you think this is a possibility or could it be something else?
I will find these sooner or later ;)

Hmmm... sexual imagery, maybe a little :p