Text styles not working
Permalink
Hi,
This is my first Concrete5 site, so I may be missing something but...
I specified text styles in my template's .css file.
These didn't show up in the 'Edit Content' block. So I looked on the forums and it seems I need to use a typography.css file. So I've copied the file from concrete/themes/default/typography.css and I have made an amended version in themes/myTheme/typography.css
This file then shows up in the 'Edit Content' text editor. And I can get my styles to show up either as 'styles' or 'formats' (if I use the h1 tags etc).
Both of these methods work in the editor, and style the text correctly.
However, when I click 'update' and return to the actual page - the text styling is lost.
The h1 tags etc change the size of the text, but only in the default way. For instance I set h1 to make the text blue, it turns blue in the 'Edit Content' dialogue, but it remains black in the 'live' site.
Any idea why this could be happening?
This is my first Concrete5 site, so I may be missing something but...
I specified text styles in my template's .css file.
These didn't show up in the 'Edit Content' block. So I looked on the forums and it seems I need to use a typography.css file. So I've copied the file from concrete/themes/default/typography.css and I have made an amended version in themes/myTheme/typography.css
This file then shows up in the 'Edit Content' text editor. And I can get my styles to show up either as 'styles' or 'formats' (if I use the h1 tags etc).
Both of these methods work in the editor, and style the text correctly.
However, when I click 'update' and return to the actual page - the text styling is lost.
The h1 tags etc change the size of the text, but only in the default way. For instance I set h1 to make the text blue, it turns blue in the 'Edit Content' dialogue, but it remains black in the 'live' site.
Any idea why this could be happening?
Did you update your theme to include a reference to the new CSS file? Even though the system found the file, the file still needs a reference in the theme for the user's browser to pull it down. That'd be my first guess. Do you have a link to the site?
Alas I did not!
I assumed as it was showing them as options in the list to select that it was already linked.
I added the line:
<link href="<?=$this->getThemePath()?>/typography.css" rel="stylesheet" type="text/css" />
and problem solved :-)
Thanks for the super-speedy response!
I assumed as it was showing them as options in the list to select that it was already linked.
I added the line:
<link href="<?=$this->getThemePath()?>/typography.css" rel="stylesheet" type="text/css" />
and problem solved :-)
Thanks for the super-speedy response!
I have the 'formats' now working fine, but the 'styles' still do the same thing - weird.
I can get the styles to show in the menu, but they still don't work on the live site.
I can get the styles to show in the menu, but they still don't work on the live site.
here is my site so far:
http://www.protean-dev.info/conc/...
the text on the home page is controlled by the 'formatting' (using h1, h2 etc)
except the last line, which is attempting to use a 'style' to make it large and blue.
It would be nice to get the styles working, so that I can use them to style links etc...
my css file looks like this:
img {border: 0px}
h1,h2,h3,h4,h5{ margin:0px 0px 4px 0px; padding:4px 0px; margin-top:8px }
h1 {
font-size: 16px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#666;
line-height: 22px;
}
h2 {
font-size: 16px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#002d6b;
line-height: 22px;
}
h3 {
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000;
line-height: 18px;
}
p {
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
color:#666;
line-height: 18px;
padding:0px 0px 0px 0px; margin:0px 0px 12px 0px;
}
h4 {
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-weight:bold;
line-height: 16px;
}
h5 {
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
line-height: 16px;
}
.largeBlue {
font-size: 16px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#002d6b;
line-height: 22px;
}
http://www.protean-dev.info/conc/...
the text on the home page is controlled by the 'formatting' (using h1, h2 etc)
except the last line, which is attempting to use a 'style' to make it large and blue.
It would be nice to get the styles working, so that I can use them to style links etc...
my css file looks like this:
img {border: 0px}
h1,h2,h3,h4,h5{ margin:0px 0px 4px 0px; padding:4px 0px; margin-top:8px }
h1 {
font-size: 16px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#666;
line-height: 22px;
}
h2 {
font-size: 16px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#002d6b;
line-height: 22px;
}
h3 {
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000;
line-height: 18px;
}
p {
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
color:#666;
line-height: 18px;
padding:0px 0px 0px 0px; margin:0px 0px 12px 0px;
}
h4 {
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-weight:bold;
line-height: 16px;
}
h5 {
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
line-height: 16px;
}
.largeBlue {
font-size: 16px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#002d6b;
line-height: 22px;
}
I think this may be useful to you:
http://www.concrete5.org/community/forums/customizing_c5/mce-editor...
http://www.concrete5.org/community/forums/customizing_c5/mce-editor...
Hi,
One reason is typo:
You CSS says .largeBlue, but your source code says .largeblue.
Big 'B' verses little'b'.
Plus you need to strip all repeat calls.
If the font is the same size and is the same colour and line-height is the same, etc. Just group them or inherit.
Hope that helped.
Steev
One reason is typo:
You CSS says .largeBlue, but your source code says .largeblue.
Big 'B' verses little'b'.
Plus you need to strip all repeat calls.
If the font is the same size and is the same colour and line-height is the same, etc. Just group them or inherit.
Hope that helped.
Steev
Thanks everyone.
55webdesign - well spotted!
It appears that C5 changes your style names to make them all lowercase in the source code of the page.
My style name in the CSS file was called .largeBlue
and I applied the style using the content block editor - so no chance of the typo being mine (for once).
Examining the source code reveals it to be looking for the style .largeblue (all lower case)
By changing my style sheets to only use lowercase style names seems to have solved the issue.
Thanks for your help and time everyone :-)
55webdesign - well spotted!
It appears that C5 changes your style names to make them all lowercase in the source code of the page.
My style name in the CSS file was called .largeBlue
and I applied the style using the content block editor - so no chance of the typo being mine (for once).
Examining the source code reveals it to be looking for the style .largeblue (all lower case)
By changing my style sheets to only use lowercase style names seems to have solved the issue.
Thanks for your help and time everyone :-)
