Forums

Heading not showing in site as coded in typography file

Permalink
Hey everyone. This has been bugging for over an hour now... I have a typography file with rules for headings and paragraphs like this...

/*BODY DEFAULTS*/
body {
   color:#616161;
   font-family:Arial, Helvetica, sans-serif;
   line-height:1.5;
   font-size:13px;
}
/*HEADER DEFAULTS*/
h1 {font-size:30px;margin-bottom:24px;color:#616161;font-family:Arial,Helvetica,Sans-Serif;line-height:1em;word-spacing:-1px;font-weight:bold; letter-spacing:-1px}
h2 {font-size:24px;margin-bottom:18px;color:#616161;font-family:Arial,Helvetica,Sans-Serif;line-height:1em;word-spacing:-1px;font-weight:bold; letter-spacing:-1px}
h3 {font-size:18px;margin-bottom:14px;color:#616161;font-family:Arial,Helvetica,Sans-Serif;line-height:1em;word-spacing:-1px;font-weight:bold; letter-spacing:-1px}
h4 {font-size:14px;margin-bottom:12px;color:#616161;font-family:Arial,Helvetica,Sans-Serif;line-height:1em;word-spacing:-1px;font-weight:bold; letter-spacing:-1px}
h5 {font-size:12px;margin-bottom:11px;color:#616161;font-family:Arial,Helvetica,Sans-Serif;line-height:1em;word-spacing:-1px;font-weight:bold; letter-spacing:-1px}
h6 {font-size:12px;margin-bottom:11px;color:#616161;font-family:Arial,Helvetica,Sans-Serif;line-height:1em;word-spacing:-1px;font-weight:bold; letter-spacing:-1px}


However, when I add a content block, as per the attached image, you can see that the fonts, sizes and paragrpahs in the TinyMCE look fairly true to the code, but after the block is added to the page, the font sizes and appearance is all wrong (you can see in the background - H1 size is really small etc)

Any suggestions or thoughts?

Cheers, Pat

1 Attachment

PatrickCassidy
 
adajad replied on at Permalink Reply
adajad
Do you have styles for h1-h6 set in main.css as well? If you do, then make sure your typgraphy.css is linked after your main.css (or even better remove the styling from main.css since you don't need to define them twice).

Edit:
I would also add the styles as below to save some bytes
h1, h2, h3, h4, h5, h6 {color:#616161;font-family:Arial,Helvetica,Sans-Serif;line-height:1em;word-spacing:-1px;font-weight:bold; letter-spacing:-1px}
h1 {font-size:30px;margin-bottom:24px;}
h2 {font-size:24px;margin-bottom:18px;}
h3 {font-size:18px;margin-bottom:14px;}
h4 {font-size:14px;margin-bottom:12px;}
h5, h6 {font-size:12px;margin-bottom:11px;}


Edit 2:
It might also be a badly coded block/package setting the styles. Have you tried adding content on a otherwise blank page (having no other blocks in either page default or stacks).

Edit 3:
Do you have a reset.css (or equivalent) linked after typography.css?
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Hey adajad!

Long time no talk!

Yeah, I have double checked... no font styles at all in the main.css, everything is in the typography.css.

I originally had my code formatted like your edit, I changed it to see if it would change anything on the C5 platform... didn't work.

I've got my linked sheets like this:

<head>
<?php Loader::element('header_required'); ?>
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('main.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('typography.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('960.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('reset.css'); ?>" />
</head>


As I said, it is weird because it is showing up find in the TinyMCE... just going totally different in the actual site. Any other ideas?
adajad replied on at Permalink Best Answer Reply
adajad
:o)

Change the order to

<head>
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('reset.css'); ?>" />
<?php Loader::element('header_required'); ?>
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('960.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('main.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('typography.css'); ?>" />
</head>
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Haha! It worked... Please explain??
adajad replied on at Permalink Reply
adajad
Since you linked to your reset.css AFTER your own styles, you effectively made all your own styles obsolete by resetting them again. When opening up a content block in edit mode c5 looks for typography.css and loads those styles for the editor (=disregards the other css files since they are not important for the editor).
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Oh ok, thanks!

By the way... should the link to the reset.css fall outside the php header code like you put it? or should be under the opening php code?
adajad replied on at Permalink Reply
adajad
As I put it, since header_required also include css links, and you don't want them to loose any styling by calling reset.css afterwards.