How to change your links

Vaska A / 2007-07-24 22:25:05   

The way to change the color, background color for links, hover links, etc., is with CSS. This is the standard CSS that come with Indexhibit (it uses your browser default for coloring - which is typically blue):

a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }

You can find your CSS rules in the /ndxz-studio/site/$template/style.css file. In the Settings section of Indexhibit you choose your template set. It is advised that if you are altering your styles that you use the "Sample" template set or create your own set.

Without an exhaustive explanation (you can search on Google for css and links if you need that)...you can change the color of text, background color and basic link attributes. This example changes the links to red, has a yellow background when the mouse is over the link and turns the link to a grey if it has been previous visited:

a:link { text-decoration: none; color: #f00; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: none; color: #f00; background: #fff20d; }

If you use any background colors in your links it is advised that you add these rules so that your images should not have the odd background colors as well:

#img-container span.backgrounded a,
#img-container a.thickbox,
#img-container a.thumb-img,
#img-container #d-col1 a { background: transparent; }

This html is a list of basic hex values for colors.

Thomo / 2007-07-25 11:18:11   

Erm... wow. I just tried this. I created a new set and called it 'test'. I copied everything from the Sample set, and changed the CSS from the first one above to the second one above and it all goes very wrong? I get my background image repeated in the menu area, and the font defaults to times...? Any ideas?

Thomo / 2007-07-25 11:20:27   

Its ok. Sorted it now. I had called the CSS file "Style2.css" as I didnt think it would like duplicates.

Hope this helps someone else.

mortenengel / 2008-12-21 15:40:11   

How do i change the font, weight, link and colour of the Exhibition Name?
Is this done via html?
Or is it easier to do it as a section and then hide the exhibition name?

Examples:
http://masoodkamandy.com/
http://www.andreasmartini.com/

And How do I get rid of the: 'Built with Indexhibit' in the menu?
(sorry but I will give credit in the info page :)

Thanks and merry xmas

Vaska A / 2008-12-21 15:44:04   

No problem moving the link...thanks for linking back to us (as always).

It's done with html/css...it depends upon what you are doing. But, I would recommend wrapping your exhibition name in h1 tags and then style that up to suit your needs...like this...

  1. <h1><%obj_name%></h1>

And then add this to your style.css file...edit it up...

  1. h1 {
  2. color: #f00;
  3. margin-bottom: 12px;
  4. font-size: 14px;
  5. }

Etc...etc...etc...that should get you rolling...

mortenengel / 2008-12-21 17:02:51   

ok. thanks,
But how do I get rid of the Indexhibit link?

mortenengel / 2008-12-21 18:23:45   

I am still having trouble:

A: changing the Exhibition name to being a link (as i.e. indexhibit.org)
B: removing the indexhibit link in the menu.

Thanks.

p.s. hope you are enjoying healthy doses of eggnog ;)

shayshaf / 2009-02-14 16:42:51   

Hi there..
For some reason I have no "$template" folder under ndxz-studio..
The ones i do have are:
assat, config, db extend, helper, lang, lib module, site.
Why is that? And where can i change the looks?

shayshaf / 2009-02-14 16:46:44   

Sorry. wrong folder :)
under site i have:
css, eatock, img, js, plugin, sample..
still, no "$template"
Tnx!

Vaska A / 2009-02-14 17:23:53   

$template is just a placeholer for 'eatock' or 'sample' or whatever. If you go into your Exhibits > Settings it will tell you which template set you are using (if you are in Advanced Mode).

shayshaf / 2009-02-16 00:15:02   

Thanks... it worked.
And thank you for this great thing you do..

Limbert / 2009-02-16 22:01:22   

hello everyone.
Vaska and team thank you for these building blocks!
very excellent, looking forward to new version and blogging!

I'm sure you guys have covered this at some point on the forum...
...on my site
Limbert Fabian

somehow all of my text defaults to bold...
I have looked and looked and looked over my style sheet and cant find a problem... and when I switch over to any of the other templates (eatock, sample) they also are bold...

I've checked this

body {
    font-size: 10px; color: #999999;
    font-family: Verdana, sans-serif;
    background: #fff;
}

any ideas why this may be happening?
should I be looking somewhere else besides style.css?
thank you.

Vaska A / 2009-02-16 22:03:12   

In your Pre-Nav this is what you have...

  1. <p><a href=/index.php?/projects><img src='http://limbertfabian.com/files/lflogo05long03a.png' width='178' height='41' /></a>
  2. <B>
  3. New updates: SHOWS </p>

See the problem? And modern browsers use 'strong' instead of 'b'.

Limbert / 2009-02-16 22:46:51   

doh!
that seems so easy hiding in plane site before my eyes!

thanks

Zach / 2009-02-19 05:54:09   

I would like to move my indexhibit link to my info and contact page of my website. I remember I saw it in the sample folder in the index.php file. I cut it to paste it somewhere and it's gone now and I can't figure out how to relocate it and move it out of my menu, into a info section of my website. Any ideas?

arsondpi / 2009-02-19 07:32:59   

Oh no - you killed it! It's dead and it's all your fault!

:-D
Search Built with in the search box on the left of this forum or search built with site:http://indexhibit.org/forum in a google search box. It's all there...

jublin / 2009-04-06 19:56:05   

hey guys, I'm having some trouble with the CSS working properly in Internet Explorer. I'm updating the ie.css file with something like this...

a:link { text-decoration: none; color:#FF0099;}
a:visited { text-decoration: none; color:#FF0099;}
a:hover { text-decoration: none; color:#FF0099; }
a:active { text-decoration: none; color:#FFFFFF;}

but all of the links seem to default to that ugly blue with an underline. It works properly in Firefox, but IE is messing me up. Any thoughts?

My webpage

Vaska A / 2009-04-06 20:00:06   

You only need to change the style.css file for the links...

camarim / 2009-04-18 18:46:46   

Hello!

I've been playing with the style.css for our site to get the same effect of "the blue hover on the menu links" for the links of the content (contactos) as well... Webpage
At the moment the grey words are links, they work fine, but they just don't accept the blue hover...

What am I missing now?
;-)

thaaaaank you! (and have a nice weekend)

camarim / 2009-04-18 20:50:55   

got it!!!!!!!!!!!!!!!!!!!!!:

I have added

#content a:hover { color: #fff; background: #00BFFF; }

the same way I did for the menu hovers

#menu a:hover { color: #fff; background: #00BFFF; }

.... soooooo logic!

snoopdroop / 2009-04-20 08:37:38   

Hi Vaska, I understand basic customization of text decoration, but I am attempting to change my links similar to this website – http://www.iamwoodhead.com/

When a project is clicked (i.e. My Disco on his website), that section remains with a line-through, but going to another project, that line-through disappears and a new line-through is shown on the new project. How is that done?

Vaska A / 2009-04-20 08:48:32   
  1. #menu ul li.active a { text-decoration: strikethrough; }

Something like that...

snoopdroop / 2009-04-20 21:29:30   

Thanks Vaska! I had to change 'strikethrough' to 'line-through' to get it to work:

  1. #menu ul li.active a { text-decoration: line-through; }

I'm viewing my website through Firefox.

alicem / 2009-05-05 16:21:56   

Hello,

I tried to change my link colors in the ccs file and followed what you said to do but no changes are appearing on my webpage.
Example: http://www.alicemyers.exofire.net/

Can you help me please?

lemathieu A / 2009-05-05 17:50:04   

your site is using http://www.alicemyers.exofire.net/ndxz-studio/site/sample/style.css
Sure you work on the good file?

alicem / 2009-05-06 10:30:58   

yes I found that file in my cyberduck window and made the changes but they didn't come up on my site. Should I be finding that file somewhere else (ie. not in cyberduck)

lemathieu A / 2009-05-06 12:01:39   

You do not browse internet with Internet Explorer, didn't you?
How are you working? Download the file you want on your computer, make the changes, and reupload it with Cyberduck.
Did you made this?

alicem / 2009-05-06 14:39:24   

Yes I did all that. I'm using Firefox.

Eloisa A / 2009-05-06 18:10:37   

How did you make your changes? Directly with cyberduck? Are you sure that the modified file is the one in your webserver?

I recommend you download the file to your computer, change it then upload it again.

gavinbraman / 2009-05-06 21:12:36   

Hi

i can't figure out how to make the menu links have an "active" attribute.
my site is gavinbraman.com
any help would be awesome.

This is in my style.css
a:active { text-decoration: none; color: #666; }

what else do i need to add?

kio / 2009-05-16 07:50:32   

hi,
i try to change font,size, and colors
but in site nothing changed
this is web site : http://www.holdmetiger.com/
and this is css : http://www.holdmetiger.com/ndxz-studio/site/sample/style.css
i try to reinstall indexhibit, but i get the same

whats wrong ?

been doing this with other site , and it worked

thank you

lemathieu A / 2009-05-16 08:13:46   

your site is link to the Eatock template.
Go in settings > turn advanced mode and choose sample as your template…

lemathieu A / 2009-05-16 08:14:51   

your site is linked to the Eatock template.
Go in settings > turn advanced mode and choose sample as your template…

Picahouette / 2009-05-24 19:58:20   

Hi there!!
I am trying to customize my page (ie: font size, colours...) and have been playing around with changes previewed in firebug, which look great but do not know how to make them permanent.
I realise I have to change the settings in the style.css file, but how do I actually change these, or create a new set to work from?
I believe I then have to place this one back into my cyberduck ndxz-studio/site/sample/style.css folder for it to work?
Thanks!!!

lemathieu A / 2009-05-24 20:19:20   

make a copy a the "sample" folder, call it what you want, style it, upload it via cyberduck to the "ndxz-studio > site folder, turn ON the advanced mode in "settings" and choose the "what-you-call-it" theme.
Works better if you give it a name like "indexhibit-is-the-best-tool-of-the-world" name…

;)

Vaska A / 2009-05-24 20:40:12   

Just wait...

Picahouette / 2009-05-25 09:49:52   

hi again...
sorry for being a dummy, but I get the part where I have to copy the folder, modify it and upload it again, however my problem is I do not know how to actually modify or style it?
When I open up the ie.css or the style.css file on firefox, I have no way of changing the data?

Sorry!!! and thanks again

Vaska A / 2009-05-25 09:56:13   

Use a text-only editor to do that part...

lemathieu A / 2009-05-25 10:18:14   

or a code editor…

Picahouette / 2009-05-25 10:23:29   

duhhh...
great...then I guess I can use firebug to preview the changes I am making on the site before editing the actual text!!!
Thanks a million!!

Vaska A / 2009-05-25 10:33:50   

Code editor?

lemathieu A / 2009-05-25 11:59:25   
something like smultron, coda or whatever…
Did you see all this people using TextEdit to modify their css, and trying to do the same for the index.php?
The famous
I just see this : "• Built with Indexhibit

;)

zbrookes / 2009-08-20 16:52:18   

Hi there!
I've been trying to customize the links in my navigation for some time (off and on) and finally found EXACTLY what I want to do (minus the rainbow of colors) and this website has it all: http://thomaspaul.com/fabrics.php

I think he's even using Indexhibit...

Can you tell me how to create colored rollover link bars like he has?

Thank you!

Vaska A / 2009-08-20 19:43:04   

That's a custom site.

I can't really tell you how to do this...it's quite complicated. The place to begin though is to learn how to style links with css.

jasonwilkins / 2009-08-20 23:01:43   

Hello, I am brand new to html/css and am using a background color to style my links. Im not sure if Vaska gave the code below so that linked images dont have background colors as well, but thats what I thought was meant. For example, I dont want my prenav image to have a background link color. If that's what it is for, where do I add the code in css

#img-container span.backgrounded a,
#img-container a.thickbox,
#img-container a.thumb-img,
#img-container #d-col1 a { background: transparent; }

cheers

www.hellojasonwilkins.comWebpage

laplataforma / 2009-09-15 23:47:26   

hi everyone!

i change the properties of my link list, and everything work in firefox. but when i use google chrome the font color is still the default violet. Do somebody know how to make it work in google chrome? even in internet explorer works!
my websiteWebpage

pauloram / 2009-09-22 22:54:35   

Hi fellow indexhibiters

I have changed my style.css (in a text editor) from the sample template as described by vaska above to change the rollover colours in the menu (as code below), refreshed my ftp, it should work, but nothing has changed in my website
pauloram.nl
Anyone know why?

a:link { text-decoration: none; color: #f00; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: none; color: #f00; background: #fff20d; }

arsondpi / 2009-09-23 00:36:05   

hold down the shift key + click refresh... maybe it works now?

pauloram / 2009-09-23 11:20:34   

well i just logged on this morning and it worked
but thx for replying, i will keep that in mind for the next time

elfneedsfoodbadly / 2009-10-29 19:37:30   

@Vaska or jasonwilkins:

If you use any background colors in your links it is advised that you add these rules so that your images should not have the odd background colors as well:
  1. #img-container span.backgrounded a,
  2. #img-container a.thickbox, 
  3. #img-container a.thumb-img, 
  4. #img-container #d-col1 a { background: transparent; }</blockquote>

i've been playing with link colours and cut-and-pasted your suggested 4 lines of code into my style.css. i'm learning as i go with the help of (a) your excellent site and (b) www.w3schools.com so i'm far from expert. i put the lines immediately below

  1. #img-container¬†¬†¬†¬†{ margin: 0; padding: 0; }
  2. #img-container p¬†¬†¬†¬†{ width: 400px; margin: 0; padding: 0 0 12px 0; }

and just before

  1. #once { clear: left; }

as far as i can tell, it seems to have no effect - i use both .gif and .png images images with transparent areas (to give me flexibility in changing background colours) and i've tested with and without the additional lines and on images in the pre-nav area or embedded in body text with html. is position in the .css file important? am i doing something else wrong?

This thread has been closed, thank you.