Fusion's typography.css overriding local.css in copy of Acquia Prosper

Hi newbstah,

When you say that firebug shows that local.css is being overridden by typography.css, are you looking at the CSS being applied to a specific HTML element? Your issue may be with CSS specificity.

For example, if the following is written in typography.css:

h2.title {
  font-size: 22px;
}

and you have this in your local.css file:

h2 {
  font-size: 14px;
}

Then your local.css file's styles will be overridden by typography.css on h2 tags that have the class "title", because the styles in typography.css are more specific than the styles in your local.css file.

You can learn more about CSS specificity here: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-sh...

If you do not think this is your problem, it would be very helpful to provide a link to your site so we can take a look at exactly what is going on to override your local.css file.

Thanks!
Sheena

newbstah,

from the code you posted, it looks like CSS specificity is the issue here.

if you look at the CSS selector being used in the typography.css rule that is overriding your local.css rule, you will see that it is much more specific than the rule written in your local.css file. I am not sure why it is happening in one theme and not the other, there are many potential variables.

Try this: replace your styles for body in local.css with the following code:

body#pid-node.front.font-family-sans-serif-sm, 
.font-family-sans-serif-sm .form-text{
  font-family:"Agenda","Gill Sans",sans-serif;
}

Also, be sure to try clearing your site's cache.

If that works, then CSS specificity is your problem.

the classes that are being applied to the body tag, which are overriding the non-specific CSS in local.css are applied through theme settings.

My best guess is that you did not have a font family specified in your theme settings originally, thus not setting this class and thus not overriding the non-specific CSS. Then, when you created the new sub-sub-theme, either you edited the theme settings to specify a font family, or a default theme setting of some sort set the option, thus providing the new classes on the body tag and overriding the non-specific CSS in local.css. Also, this could be caused by using the blue theme in the sub-sub-theme and not in the original copy of Prosper.

What version of Fusion core are you using?

I am currently trying to reproduce the issue on my local machine, I will let you know what I find.

newbstah,

After setting up fresh copies of Acquia Prosper and Fusion on my local machine, copying Prosper and creating a sub-theme that uses the blue skin instead of the gray, and creating identical local.css files in Acquia Prosper and my sub-theme of Prosper, my conclusion is that your theme settings must not have been consistent between Acquia Prosper and the sub-theme you created.

The code that you provided as having been in your local.css file worked fine across both themes when I first created local.css in each theme. After changing theme settings to specify a font family (rather than using the option "theme default), the CSS in local.css was overridden by more-specific CSS in Fusion Core's typography.css file.

Be sure that the settings under "typography" on your theme configuration page are the same for Acquia Prosper and the sub-theme. If the settings are the same, then the CSS should be overridden (or not) consistently.

Thanks,
Sheena