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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Eric BourlandConnect With a Mentor Commented:
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
 
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
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
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
 
hieloConnect With a Mentor Commented:
>>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
All Courses

From novice to tech pro — start learning today.