Changing font colour & format

Jo / 2008-06-03 17:06:19   

My webhost has now managed to set up a new database, so am finally up and running on indexhibit. Hooray!

However, I am struggling a little bit to customisie the font to my personal preferences. I've managed to change the size and font family, and the links to what I want, but am not sure how to change the colour of the main text in the menu and main window. In the 'style.css' file I can't find the 'font-color' line to customise, so have tried typing it in myself, but it remains black rather than turning blue, and so has no effect.

I'd also like to make some of the text bold and a larger font in the menu. How do I do this?

My grasp of html and coding is very basic, but am keen to play around and learn a few things, so any help, tips and advice will be appreciated.

Thanks!

Jo

Eloisa A / 2008-06-03 21:19:15   

Customising it is on you. For what it's worth, i think there's a bunch of topics in the forum with specific answers.

Show us when you're done!

AntoineLafontaine / 2008-06-04 01:05:43   

Learning a little bit abut what is CSS might help you in the long run. Look for tutorials that will give you a basic understanding of how CSS works... then find a reference of all the CSS properties you can play with. I personally use www.w3schools.com 's CSS2 reference often when I have a blank...

When you get the hang of it, CSS is fairly logical and easy to use (when you do not get too deeply involved with croos-browser problems, but that's another story)

Hope this help and good luck!

Jo / 2008-06-04 09:23:48   

I've looked at a few website tutorials and am happy to give CSS a go. What was confusing me was which file I could find the menu text in, so that I can edit the font properties. I was also unsure where to find the code to alter the colour of all the text to make it grey as opposed to black.

If someone could point me in the right direction for these, I should hopefully be able to take it from there!

AntoineLafontaine / 2008-06-04 10:19:34   

The "code" is mostly all in style.css of your template folder. (you should have made a copy of the sample folder, renamed it to your liking... put indexhibit in advanced mode and select your template in order to use your own style.css... more info in other posts in the forum if needed)

Sometimes, you might have to edit some css injected by a plugin you are using, but this is less frequent. In that case, look at the plugin's php file in the plugin folder.

Another useful thing is to understand CSS selectors. Look at a post I did this morning for a bit more detailed info:

http://www.indexhibit.org/forum/thread/1114/

After reading the previous post, you should be able to use a very general selector like "body" or "html" and apply the CSS color property to all your text and change it from black to grey.

I know this is all quick and dry, so please, if after trying out your luck you have more specific questions you want to ask, go ahead.

Hope this helps!

Jo / 2008-06-04 12:11:52   

Thanks. I've been playing around a bit and am getting things closer to how I want them to look.

However, I still seem to be struggling with adding my own lines of code. I really want to use this feature for my email, but am not getting any effect on the webpage when I added the code in.
a[href^="mailto"]:hover:after { content: " > " attr(title); }

I've been putting the code in this section at the bottom:


#menu { width: 215px; overflow: auto; top: 10; bottom: 0; left:10; position: fixed; height: 100%; background-color: #fff; a[href^="mailto"]:hover:after { content: " > " attr(title); }

}

and adding contact me (minus the " " ) in the 'Post Nav' box in 'Settings', hoping the e-mail address will appear once you hover over the 'contact me' link.

Failing that, I have tried using this instead:


a.mail:hover {color:#CBBB9F}

and again seem to be having no success as I'm adding it myself, as opposed to altering text and numbers already in the code.

I'm probably missing something really obvious, but as ever, any help would really be appreciated, as I am a bit of a noob :)

AntoineLafontaine / 2008-06-05 03:36:46   

Ok,

First thing, the snippet you've used is a complete CSS selector with properties... You've put it inside the #menu selector... That would make it completely useless... Try using it only by itself. Or modify it by adding the #menu selector before it.

The a.mail:hover CSS snippet is valid CSS, but it targets a link with a class "mail" defined... the html would look something like this:
< a href="somelink" class="mail">
...
< /a>

I would think you probably didn't put a class in your email link's html...

Another point is that the selector you're trying to use will probably not be supported in all browsers (especialy not in IE)... I would tend to go with javascript (using jQuery which is included in indexhibit) to achieve this, but this might be too much work for what you want to achieve.

One last advice. Using plain email links makes your address completely open to webbots and spiders often used by spammers to make email lists... This is your own decision, but the amount of junk mail linked to the address you publish will probably become 10 folds... if not more. If you still want to have a clickable email link, there are many tricky javascript techniques to get this to work (without having your address exposed to spammer bots), but is it really worth the trouble? I tend to think it's not...

Alright, sorry for all those warnings and I hope this helps!

pernillaph / 2010-05-22 14:23:51   

danidallia123 / 2010-05-25 09:46:57   

To change the font colour:

Add the style property to the tag:

p style=""

Place the color style property in the attribute value:

p style="color:"

Then add your color to the style:

p style="color:red;"

Type your text inside the paragraph.
Close the paragraph tag:

Edited by Vaska - watch the spam there...

herve / 2010-06-09 23:16:21   

Hello there!

I am unable to change the font on my site with this:

font-size: 13px;
    font-family: Geneva, "MS Sans Serif", sans-serif
    background: #fff;
what am I doing wrong?

p.s The size works fine, but not the font.

Help please!!!!!!!

ntlk / 2010-06-09 23:24:35   

Semicolon is missing at the end of that line:
font-family: Geneva, "MS Sans Serif", sans-serif

herve / 2010-06-10 19:57:45   

Thanks much!

This thread has been closed, thank you.