TinyMCE editor recognizes my CSS but final output does not!

Permalink 1 user found helpful
I can select the style in the TinyMCE editor and I have changed and added various styles in the typography.css to verify that TinyMCE is previewing correctly (it changes font-size). I have change h2 multiple times and have also created two additional styles just for testing purposes called "poo" and "test." I have changed the properties various times and verified that the TinyMCE recognizes the change on typography.css.

However, when I publish the page, it either defaults to the same old h2 class or simply does not recognize my "poo" and "test" classes. Anything styled with "poo" or "test" displays as a regular <p> style.

I changed
content_css : "<?php echo $theme->getThemeEditorCSS(); ?>",

to
content_css : "<?php echo $theme->getThemeEditorCSS() . "?" . time(); ?>",

as advised to clear typography.css cache per this tutorial onhttp://www.smartwebprojects.net/concrete5-blog/131/typography-css-i...

I can not figure out what could be the problem. There is no conflicting style anywhere in C5 default called "poo" or "test," of that, I'm pretty sure without even checking! ;-)

Any idea what is wrong?

 
jgarcia replied on at Permalink Reply
jgarcia
Are you loading the css in your actual theme? You have to actually include the file in the HTML by doing something like:
<link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath(); ?>/style.css" />


If you can provide a link that would be even more helpful.
Tony replied on at Permalink Reply
Tony
make sure your theme's styles aren't overriding your content block's css. using the firefox pluging called firebug is a good way to do this.
zoinks replied on at Permalink Reply
I'll save everyone some reading. Two posts down is all the info.
zoinks replied on at Permalink Reply
blah. I'm editing my CSS as we speak...
zoinks replied on at Permalink Reply
Well, it's pulling the h2 style from somewhere. Where? I have no idea. But, I didn't style it. Probably the Yogurt default, I'm guessing.

http://php.22graphics.com

if anyone feels like looking. I'm screwing around with the paragraph on the bottom right. It's a Content block. So far, none of my styles are being picked up from typography.css or my linked stylesheet.

Here's my full stylesheet, btw:
/* CSS Document */
#wrapper {
   width: 828px;
   margin: 0px auto;
   }
#menu {
   width:828px;
   height:25px;
   float: left;
   background-color: blue;
   }
#slideshowdiv, #blogpostPage {
   width: 828px;
   height: 300px;
   margin-top:20px;


and here's my typography.css file (I only tried to alter the h2 line by adding font-color:red at the end and I added some styles there at the bottom to see if they'd get picked up.
body {
   /* customize_body */ font: normal normal 13px Arial; /* customize_body */ 
   /* customize_body */ color:#666 /* customize_body */ 
}
img {border: 0px}
a,a:visited,a:active { /* customize_link */ color: #69ab2b /* customize_link */}
a:hover { /* customize_link_hover */ color:#50AAB5 /* customize_link_hover */ } 
h1,h2,h3,h4,h5{ color:#69ab2b; margin:0px 0px 4px 0px; padding:4px 0px; margin-top:8px }
h1{ font-size:21px; line-height:28px }
h2{ font-size:18px; line-height:24px; font-color:red }
h3{ font-size:16px; line-height:21px }
h4{ font-size:14px; line-height:18px }
h5{ font-size:13px; line-height:16px }
p{ padding:0px 0px 0px 0px; 0px 0px 16px 0px}
.test{ font-size:36px; line-height:48px }
jgarcia replied on at Permalink Best Answer Reply
jgarcia
If you want to pull in the styles from typography.css, you have to include it just like you are doing with dropdown.css. You are not referring to typography.css anywhere in your theme.
zoinks replied on at Permalink Reply
Hahaha-holy crap! Of course! Thank you!

I think when TinyMCE recognized it, I just figured that was it and that's how it works. Never even occurred to me. Just naturally assumed there must be some defaulting conflict or something.

Thanks a million! I would have never thought of this, I'm pretty sure.