How can I make the blue font lighter in this module

Hi,
On this site here http://amandawatson.com.au/ronin

there is a module with light blue font in the main showcase.

I need to lighten it as it appears too bold.  I have specified font:lighter but it is still too bold.

Can someone help me do this?
LVL 11
Amanda WatsonWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Eric BourlandCommented:
I notice that you are using many style sheets for http://amandawatson.com.au/ronin:

  <link rel="stylesheet" href="/ronin/templates/rt_moxy_j15/css/template.css" type="text/css" />
  <link rel="stylesheet" href="/ronin/templates/rt_moxy_j15/css/header-style1.css" type="text/css" />
  <link rel="stylesheet" href="/ronin/templates/rt_moxy_j15/css/body-light.css" type="text/css" />
  <link rel="stylesheet" href="/ronin/templates/rt_moxy_j15/css/typography.css" type="text/css" />

  <link rel="stylesheet" href="/ronin/templates/system/css/system.css" type="text/css" />
  <link rel="stylesheet" href="/ronin/templates/system/css/general.css" type="text/css" />
  <link rel="stylesheet" href="/ronin/templates/rt_moxy_j15/css/menu-fusion.css" type="text/css" />
  <link rel="stylesheet" href="http://amandawatson.com.au/ronin/modules/mod_aku_newslide/css/style.css" type="text/css" />


Can you point me to the style sheet that controls the blue text you speak of? I can assist.

You might want to combine the style sheets that format the text, images, and other parts of your web pages .... unless you have them separated for a reason.

You might also give descriptive names to the style sheets -- typography.css is a good example, but does that typography.css style sheet cover all type faces and fonts throughout the web site?

If you can point me to the correct style sheet I am glad to have a look.

Eric Bourland
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Amanda WatsonWeb DeveloperAuthor Commented:
Yep, the style sheet is attached here.

Its using the mod_skunewslide module

You can see it in action if you use firebug
.newslide{position:relative}
.newslide a{outline:0}
.newslide h3{color:#3792d8; font-family: handsean, Helvetica,Arial,sans-serif;
font-style:italic; font-weight:lighter; font-size: 220%;}
.newslide .prev,
.newslide .next{top:45%;width:40px;height:50px;display:block;z-index:10000;position:absolute;cursor:pointer; display: none;}
.newslide .prev{margin-left:0px;background:url(../images/prev.png) no-repeat 0 50%; display:none;}
.newslide .prev:hover{background:url(../images/prev2.png) no-repeat 0 50% display:none;}
.newslide .next{margin-left:-40px;background:url(../images/next.png) no-repeat 0 50%; display:none;}
.newslide .next:hover{background:url(../images/next2.png) no-repeat 0 50%;display:none;}
.newslide .navi{top:10px;left:10px;z-index:10000;position:absolute}
.newslide .navi a{float:left;width:16px;height:10px;overflow:hidden;text-indent:-10000px;text-decoration:none;background:url(../images/navi.png) no-repeat}
.newslide .navi a:hover,
.newslide .navi a.activeSlide{background-position:-16px 0}
.newslide .intro{background:url(../images/intro.png);width:100%;padding-bottom:-10px;position:absolute}
.newslide .intro p {padding:10px; color:#FFF; font-family:Arial,sans-serif;}
.newslide .intro h3{padding:10px; margin-bottom: -30px;}
.ie .newslide .intro,
.gecko .newslide .intro{bottom:0px}
#newslide1 { width: 900px; height:303px;}

Open in new window

0
hieloCommented:
>>  I have specified font:lighter
use font-weight:lighter

IF that is tool too dark, try a numeric value:
font-weight:100

Refer to:
http://www.w3schools.com/Css/pr_font_weight.asp
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Amanda WatsonWeb DeveloperAuthor Commented:
I have tried this
.newslide h3{color:#3792d8; font-family: handsean, Helvetica,Arial,sans-serif;
font-style:italic; font-weight:100; font-size: 220%;}

and this
.newslide h3{color:#3792d8; font-family: handsean, Helvetica,Arial,sans-serif;
font-style:italic; font-weight:lighter; font-size: 220%;}

ITS STILL TOO THICK
0
Eric BourlandCommented:
I have had mixed results using the numeric value for font-weight.

Also I wonder if there are other selectors, maybe in other style sheets, that modify your H3 tag?

It might be a good idea to review all of your style sheets, and place all font and text selectors in one well-marked area of one style sheet.

This is just my two cents! =)

Maybe try:

.newslide h3 {
color:#53abee;
font-family: handsean, Helvetica,Arial,sans-serif;
font-style:italic;
font-weight:normal !important;
font-size: 220%;
}

Let us know how that works?

Eric Bourland
0
Amanda WatsonWeb DeveloperAuthor Commented:
Hi Erik...I did that change in style.css for the newslide module...still absolutely no change at all  

Perhaps it is the h3 tag in other css that needs to be changed, but of course I don't want to change it for other headings.. i only want THIS heading to change
0
hieloCommented:
try adding:
<style type="text/css">
h3{font-weight:normal !important;}
</style>

IMMEDIATELY BEFORE the </head>. IF the problem is that the h3 is overridden in some other stylesheet, the above suggestions should override all others.
0
Amanda WatsonWeb DeveloperAuthor Commented:
Hi Heilo, that didn't change anything
0
hieloCommented:
The reason for the boldness if because the font-size is too big. Try the example below. Notice that they are all set to normal font-weight. You will need to use a lighter shade of the color.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<style type="text/css">
.normal{font-weight:normal;font-size:100%;}
.big{font-weight:normal !important;font-size:220%;}
.other{font-weight:normal !important;font-size:220%;color:#444;}

</style>

</head>
<body>
<h3 class="normal">Hello</h3>
<h3 class="big">Hello</h3>
<h3 class="other">Hello</h3>
</body>
</html>

Open in new window

0
Eric BourlandCommented:
I was wondering about the font size too.
0
Amanda WatsonWeb DeveloperAuthor Commented:
Im lost

I need to change the colour or the font size?
0
Eric BourlandCommented:
I would reduce the font size, as hielo mentioned. Try

.newslide h3 {
color:#53abee;
font-family: handsean, Helvetica,Arial,sans-serif;
font-style:italic;
font-weight:normal !important;
font-size: 100%;
}

Also, I am not sure what font "handsean" is. That's not a common font and many people will not see it, if you reference it in your style sheet.
0
hieloCommented:
>>Im lost
My point is that if your font size is too big, then the font-weight:normal or font-weight:lighter are "useless". It will display bold.

So, your options are to
a. use smaller font-size until the font-weight:normal takes effect
OR
b. use a different shade of color so that it doesn't look so bold.
0
Amanda WatsonWeb DeveloperAuthor Commented:
I have tried different font sizes, and I cannot use a different font colour.

Should I use px or em for font size rather than %
0
Amanda WatsonWeb DeveloperAuthor Commented:
Never got it fixed
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.