Changing the font color in a CSS file

kaplan71 · 04-27-2011, 12:46 PM

Hi there --

I am working with a template.css file, and I want to change the color of the font in part of the header from black to blue.

The code for the header section in question is shown below:

Code:

h2 {
font-size:1.2em;
line-height: 1.3;
font-family: Times New Roman, Arial, Verdana, Helvetica, sans-serif;
letter-spacing: 0px;
font-weight: bold;
text-align: left;
}

#logo h2 {
  line-height: 1.1;
  font-size: 60px;
  font-family: Times New Roman, Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 0px;
  margin: 12px 0 0 0px;
  padding: 0;
}

Is there syntax that can be inserted into the file to accomplish this? Thanks.

sycamorex · 04-27-2011, 12:52 PM

You could add the following:

Code:

color: #0000ff;

I don't know the structure of your markup code so it's hard to guess which part of the header should have blue fonts.
If you add it to h2, all h2 element will be blue. If, on the other hand you add it to #logo h2, only h2 elements in the 'logo' div will be blue.

HTH

kaplan71 · 04-27-2011, 01:47 PM

Hi there --

Thanks for your reply. I applied the syntax in question to the logo h2 group so that it reads as follows:

Code:

#logo h2 {
  line-height: 1.1;
  font-size: 60px;
  font-family: Times New Roman, Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  color: #0000ff;
  letter-spacing: 0px;
  margin: 12px 0 0 0px;
  padding: 0;
}

I want just the logo h2 division to have the blue font so that is why I applied it to that section. Anyway, the addition of the color line did NOT make a difference. I have included a copy of the template.css file for your perusal. Maybe you can see something that I am missing here.

Thanks.

sycamorex · 04-27-2011, 03:20 PM

Can you post (or PM me) the html file? I'd be happy to try to help you.

kaplan71 · 04-27-2011, 03:44 PM

Hi there --

Sure. The attachment to this e-mail is the front page. If you have any questions, please let me know.

Thanks for the help.

sycamorex · 04-27-2011, 04:14 PM

Code:

<div id="logo" class="gainlayout">
<h2>
<a title="CTAG" href="http://domain.com">CTAG</a>
</h2>
<h3>Clinical Trials Advisory Group</h3>
</div>

Ok, a few things:

I assume you are talking about "CTAG". In that case, you'd have to include:

Code:

#logo a:link, a:visited, a:active, a:hover {text-decoration: none; color: #0000ff;}

It's actually referring to a link (<a></a>) not h2 so styling h2 wouldn't make any difference as links seem to be defined in some other stylesheet (general.css?)

That is why, the above css code is probably not going to work because you use other stylesheets that might overwrite this value.

Let's see.

If not, you'd have to post other stylesheets. Your website's base url doesn't seem to be accessible.

kaplan71 · 04-27-2011, 04:43 PM

Hi there --

The base URL for the website is the following:

Code:

http://radtrials.mgh.harvard.edu

I checked the directory where the template.css file is located. This directory is affiliated with the template, a4joomla, used on the website. There was no general.css file at that location, but there are the following:

Quote:

grey.css
ie67.css
ie6.css
index.html
print.css
template.css

I did a search for a general.css file, and there is one located in another directory. I have taken the liberty of including it with this posting.

sycamorex · 04-27-2011, 04:50 PM

The url is inaccessible for me.

Have you tried what I posted above?

It isn't in general.css. Can you check if any of other stylesheets specifies rules for "a:link"?

kaplan71 · 04-27-2011, 05:19 PM

I got it...with your help of course...;-)

First off, try this URL:

Code:

hadron.mgh.harvard.edu

Secondly, I did a search for the a:link text in the css files within the directory. I got a hit on the grey.css file.
After making a backup copy of the file, I did a search for the h2 text. I came across the following:

Code:

#logo h2 a:link, #logo h2 a:visited, #logo h2 a:hover, #logo h2 a:active {
color: #33CCFF;
text-decoration: none;
}

The color text, which is shown in its final form, was set to #000. Once I made the change there, and a similar one to the logo h3 section, the color that I wanted appeared on the page. See if you can get to the URL listed, and let me know what you think.

In any event, this one will definitely get documented without fail.

sycamorex · 04-27-2011, 05:44 PM

Glad you got it working.

Unfortunately, I still can't access your website.

Is it possible that it's only accessible from within the harvard network?

kaplan71 · 04-27-2011, 05:54 PM

Hi there --

That website is accessible from the Web. Just to confirm the URL is the following:

http://hadron.mgh.harvard.edu

I will look further into the matter, but in any event thanks again for the help.

sycamorex · 04-27-2011, 05:55 PM

Nope, I'm afraid I can't access it.

No problem.

kaplan71 · 04-27-2011, 06:02 PM

Are you getting a connection timeout or refused error? If so, you may be on a subnet that is being blocked...don't ask.

If you can tell me what your address is, I can go see.

sycamorex · 04-27-2011, 06:15 PM

Quote:

Originally Posted by kaplan71

Are you getting a connection timeout or refused error? If so, you may be on a subnet that is being blocked...don't ask.

If you can tell me what your address is, I can go see.

It's a connection timeout.

OMG, what have I done?!

I can't access the website from my smartphone either.

Both are on 93.x.x.x

kaplan71 · 04-27-2011, 06:19 PM

Ok...try it now...and how is weather in Amsterdam?