asked on

Back to basics - hover active visited links in a div

Hello all,

It seems I keep revisiting this issue -- and I could check my notes, but in any case since this is for a specific website I figured I'd ask it again. Maybe this time it will sink in....

I need to modify links in a div to be the correct color, decoration (no underline, etc.)

Here is a link to a redirect to the development site: Link to redirect page

The page is a work in progress. I am matching, as well as I can the current live site (fyi I am updating a joomla 1.5 site to a responsive bootstrap 3.1.5 site)

Here's my specific question for you...

On the right side of the page are some H1 and paragraph links that need to reasonably match the same content on the live site page: Live site to match

I've tried doing some css but it's not working. Here's what I've done, obviously not very well...

h1, div.componentheading {
    color: #3F7DFF;
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 32px;
    font-weight: 100;
    line-height: 30px;
    margin: 0;
    padding: 0;
}

div.componentheading h1 a:link a:visited a:hover a:active {
color: #3F7DFF;
}

Open in new window

There will be one or two other areas on the page where I will need your help. But this is the main thing right now.

Thanks!

Rowby

Dave Baldwin

This file is emtpy, no content, no CSS.
<link rel="stylesheet" href="/templates/hasonrevised/css/fonts/fonts.css" type="text/css" />

SOLUTION

Marcellino Santoso

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Rowby Goren

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rowby Goren

ASKER

Hi and Thanks,

Well I was able to use Cd& single line suggestion to fix the color and get rid of the underline decorations. I may switch back to meb_santoso multi line solution because I will be matching the different color(s) to match the live site's color change during hovering etc.

Live site to match

Link to redirect of development site: dev site link
One final issue. I seem to have lost the link to the web fonts in the font folder. The h1 and H3 fonts appear to be showing as arial on my local browser.

@font-face {
  font-family: 'TallFilmsFineObliqueRegular';
  src: url('fonts/Tall_Films_Fine_Oblique.eot');
  src: local('Tall Films Fine Oblique Regular'), local('TallFilmsFineOblique'), url('fonts/Tall_Films_Fine_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Fine_Oblique.svg#TallFilmsFineOblique') format('svg');
}

@font-face {
  font-family: 'TallFilmsExpandedRegular';
  src: url('fonts/Tall_Films_Expanded.eot');
  src: local('Tall Films Expanded Regular'), local('TallFilmsExpanded'), url('fonts/Tall_Films_Expanded.ttf') format('truetype'), url('fonts/Tall_Films_Expanded.svg#TallFilmsExpanded') format('svg');
}

@font-face {
  font-family: 'TallFilmsExpandedObliqueRegular';
  src: url('fonts/Tall_Films_Expanded_Oblique.eot');
  src: local('TallFilmsExpandedObliqueRegular,arialRegular'), local('TallFilmsExpandedOblique'), url('fonts/Tall_Films_Expanded_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Expanded_Oblique.svg#TallFilmsExpandedOblique') format('svg');
}

h1, div.componentheading {
    color: #3F7DFF;
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 32px;
    font-weight: 80;
    line-height: 30px;
    margin: 0;
    padding: 0;
}

h3 {
    color: #000000;
    font-family: Colaborate-ThinRegular,arial;
    font-size: 20px;
    font-weight: 80;
    letter-spacing: -0.5px;
    margin: 0;
    padding: 0;
}



body {
color: #363636;
    font-family: Segoe UI,sans-serif;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
  
}

h1, div.componentheading {
    color: #3F7DFF;
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 32px;
    font-weight: 100;
    line-height: 30px;
    margin: 0;
    padding: 0;
}

div.componentheading, h1, a:link, a:visited, a:hover, a:active {
color: #3F7DFF;
text-decoration:none;

}

Open in new window

Any suggestions to fix that, and then I will hopefully close this question and do some point splitting...

Rowby

SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rowby Goren

ASKER

Hi Dave,

It's in the custom.css file,in this folder: /templates/hasonrevised/css

Open in new window

@font-face {
font-family: 'TallFilmsFineObliqueRegular';
src: url('fonts/Tall_Films_Fine_Oblique.eot');
src: local('Tall Films Fine Oblique Regular'), local('TallFilmsFineOblique'), url('fonts/Tall_Films_Fine_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Fine_Oblique.svg#TallFilmsFineOblique') format('svg');
}

@font-face {
font-family: 'TallFilmsExpandedRegular';
src: url('fonts/Tall_Films_Expanded.eot');
src: local('Tall Films Expanded Regular'), local('TallFilmsExpanded'), url('fonts/Tall_Films_Expanded.ttf') format('truetype'), url('fonts/Tall_Films_Expanded.svg#TallFilmsExpanded') format('svg');
}

@font-face {
font-family: 'TallFilmsExpandedObliqueRegular';
src: url('fonts/Tall_Films_Expanded_Oblique.eot');
src: local('TallFilmsExpandedObliqueRegular,arialRegular'), local('TallFilmsExpandedOblique'), url('fonts/Tall_Films_Expanded_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Expanded_Oblique.svg#TallFilmsExpandedOblique') format('svg');
}

h1, div.componentheading {
color: #3F7DFF;
font-family: TallFilmsExpandedObliqueRegular,arial;
font-size: 32px;
font-weight: 80;
line-height: 30px;
margin: 0;
padding: 0;
}

h3 {
color: #000000;
font-family: Colaborate-ThinRegular,arial;
font-size: 20px;
font-weight: 80;
letter-spacing: -0.5px;
margin: 0;
padding: 0;
}

body {
color: #363636;
font-family: Segoe UI,sans-serif;
font-size: 12px;
line-height: 20px;
text-align: left;

}

h1, div.componentheading {
color: #3F7DFF;
font-family: TallFilmsExpandedObliqueRegular,arial;
font-size: 32px;
font-weight: 100;
line-height: 30px;
margin: 0;
padding: 0;
}

div.componentheading, h1, a:link, a:visited, a:hover, a:active {
color: #3F7DFF;
text-decoration:none;

}
div.moduletable_bigMenu li a {
color: #0096FF;
text-decoration: none;
}
div.moduletable_bigMenu a {
color: #0096FF;
display: block;
margin-top: 3px;
text-decoration: none;
}
div.moduletable_bigMenu li {
font-family: TallFilmsExpandedObliqueRegular,arial;
font-size: 28px;
list-style-type: none;
}

Dave Baldwin

I'm pretty sure this part...

src: local('TallFilmsExpandedObliqueRegular,arialRegular')

is wrong since it has 'arial' in the middle of it.

And you have "h1, div.componentheading {" in there twice which is undesireable.

Rowby Goren

ASKER

Hi Dave,

I made these changes. Still doesn't appear (at least on my computer) to pull in those web fonts....

@font-face {
  font-family: 'TallFilmsFineObliqueRegular';
  src: url('fonts/Tall_Films_Fine_Oblique.eot');
  src: local('Tall Films Fine Oblique Regular'), local('TallFilmsFineOblique'), url('fonts/Tall_Films_Fine_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Fine_Oblique.svg#TallFilmsFineOblique') format('svg');
}

@font-face {
  font-family: 'TallFilmsExpandedRegular';
  src: url('fonts/Tall_Films_Expanded.eot');
  src: local('Tall Films Expanded Regular'), local('TallFilmsExpanded'), url('fonts/Tall_Films_Expanded.ttf') format('truetype'), url('fonts/Tall_Films_Expanded.svg#TallFilmsExpanded') format('svg');
}

@font-face {
  font-family: 'TallFilmsExpandedObliqueRegular';
  src: url('fonts/Tall_Films_Expanded_Oblique.eot');
  src: local('TallFilmsExpandedObliqueRegular'), local('TallFilmsExpandedOblique'), url('fonts/Tall_Films_Expanded_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Expanded_Oblique.svg#TallFilmsExpandedOblique') format('svg');
}



h3 {
    color: #000000;
    font-family: Colaborate-ThinRegular,arial;
    font-size: 20px;
    font-weight: 80;
    letter-spacing: -0.5px;
    margin: 0;
    padding: 0;
}



body {
color: #363636;
    font-family: Segoe UI,sans-serif;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
  
}

h1, div.componentheading {
    color: #3F7DFF;
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 32px;
    font-weight: 100;
    line-height: 30px;
    margin: 0;
    padding: 0;
}

div.componentheading, h1, a:link, a:visited, a:hover, a:active {
color: #3F7DFF;
text-decoration:none;

}
div.moduletable_bigMenu li a {
    color: #0096FF;
    text-decoration: none;
}
div.moduletable_bigMenu a {
    color: #0096FF;
    display: block;
    margin-top: 3px;
    text-decoration: none;
}
div.moduletable_bigMenu li {
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 28px;
    list-style-type: none;
}

Open in new window

Perhaps the link to the fonts folder needs to be more specific????

Dave Baldwin

Do you have a 'fonts' directory in the 'dev' folders? I see '404 file not found' for two of your font files and for 'bootstrap.css'.

Rowby Goren

ASKER

Hi Dave,

I will check it all first thing in a.m. I'm getting sleepy here! :)

Thanks Dave and everyone for their help so far!

Dopey, I mean, Rowby

Rowby Goren

ASKER

Hi Dave,

I corrected the missing bootstrap.css file

I checked the source of the page for fonts folder(s) and I think they are okay now.

But could you double check and if a 404 error please provide the link so I can make sure I caught it.

Thanks

Rowby

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Rowby Goren

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rowby Goren

ASKER

Hi Dave

I uploaded the 3 css files and there should be no more 404 errors for the 3 stylesheets.

So now I am thinking that even though the stylesheets are there, they are not "pointing" correctly to the uploaded fonts.

Based on the stylesheets, can you tell where, physically those webfonts should be located? Then hopefully an upload of the fonts into the correct folder will fix the "Arial" showing instead of the webfonts....

Thanks!

Rowby

Rowby Goren

ASKER

Success!

I uploaded the fonts to the correct fonts folder and now they are showing.

I will be closing this question within an hour or so.

There are some font alignment issues, but I should be able to at least handle THAT myself.

Thanks, all!

Rowby

Rowby Goren

ASKER

Thanks all!

Rowby