Can't Edit Text Styles
Permalink
Hi all. When I try to edit text in the Edit Content block I can't select any styles (on my css stylesheet I have .h1, .h2 and .h3 styles specified). In the text preview edit window the text has the correct formatting but when I click update and the live text view is shown only the first line's (h1) style is working, everything else is in the default 12pt Times.
When I view the html I see that only the headline has <p class="h1"> all of the other lines have <p>text here</p> yet it looks okay and properly styled in the editing window. I have to add the html formatting manually which the client can't be expected to do.
Any help on this would be great.
Thanks,
John
When I view the html I see that only the headline has <p class="h1"> all of the other lines have <p>text here</p> yet it looks okay and properly styled in the editing window. I have to add the html formatting manually which the client can't be expected to do.
Any help on this would be great.
Thanks,
John
I'm not sure why the formatting would only apply to the first item, but I would suggest changing your styles so instead of a class called "h1", "h2", etc., you use the actual h1, h2, etc. tags -- which would be chosen by the user from the "formats" menu (I think that's what it's called?) instead of the styles menu. I've found TinyMCE (the component that powers that content editor) to be very finnicky with styles and classes, but seems to be much more consistent when you stick to the h1, h2, etc. tags themselves.
Thanks Jordan. I always format my text this way, am I wrong?
<p class="h1">Headline text</p>
<p class="h2">Subheading text</p>
<p class="h3">Bodycopy in here/p>
The h1-h4 tags are all in a CSS file and it seems to work fine across all browsers but I would be really interested to know if there is a better way.
Thanks again.
John
<p class="h1">Headline text</p>
<p class="h2">Subheading text</p>
<p class="h3">Bodycopy in here/p>
The h1-h4 tags are all in a CSS file and it seems to work fine across all browsers but I would be really interested to know if there is a better way.
Thanks again.
John
Well, it's kinda sorta "wrong". It works in the sense that it looks the way you want (with the exception of this content editor glitch of course), but it's not "semantic" -- that is, the tag isn't saying what the content *is*. It's saying that it's a paragraph, but actually it's a heading. For the most part this is just an abstract distinction, except for one thing: when google or any other search engine indexes your site, it has no way of knowing that what's inside one <p> tag *means* anything different than what's inside another <p> tag. Whereas if you put something inside an <h1> tag (for example), Google then knows it's a heading and puts a lot more weight on it (because it assumes that it's more "important" -- otherwise it wouldn't be in a heading, right?)
So for both the "best practice" reason and the "Google/SEO" reason, I would suggest using <h1>, <h2>, etc. tags instead of <p class="h1">, <p class="h2">, etc.
Plus, it might solve this problem you're having with the content editor :)
So for both the "best practice" reason and the "Google/SEO" reason, I would suggest using <h1>, <h2>, etc. tags instead of <p class="h1">, <p class="h2">, etc.
Plus, it might solve this problem you're having with the content editor :)
Jeez, looks like I've been an absolute mile out here (and for a long time...). Before I posted my last answer I checked alternative ways of writing the html (there appear to be a few different ways). Could you possibly give me a quick example of how you would format a headline, subhead and paragraph (h1-3).
Thanks so much for your help, it looks like you've just made an enormous difference to how I work. I don't know how I could have been getting this so wrong for so long. Crazy.
Thanks so much for your help, it looks like you've just made an enormous difference to how I work. I don't know how I could have been getting this so wrong for so long. Crazy.
Here's how I'd code it:
Then in your CSS styles, you do this:
Google for "semantic html" or "semantic markup" to see a zillion more resources about why/how to do it this way.
<h1>My Headline</h1> <h2>My Subhead</h2> <p>And here is the paragraph text blah blah blah</p> <p>Another paragraph just as an example. Blah blah blah.</p>
Then in your CSS styles, you do this:
h1 { font: whatever; color: whatever; etc. } h2 { font: whatever; etc... } p { etc. etc. }
Google for "semantic html" or "semantic markup" to see a zillion more resources about why/how to do it this way.
Thanks again Jordan. I thought I was already doing this and having never run into any problems obviously assumed that I was correct and never thought about it again. I feel like a massive, massive idiot. I've been doing it this way for years and on countless websites. I feel like being sick...
You're a gentleman and have really helped me out. Cheers.
You're a gentleman and have really helped me out. Cheers.
Meh, don't be too hard on yourself -- gotta learn some time, right?
The nice thing about the web is that it is very flexible when it comes to accommodating different styles of coding, so again what you've been doing isn't technically "wrong", just maybe not the "best practice" of recent vintage.
And last but not least, there's a quote in programming that says something like "if you don't cringe when you look at code you wrote 6 months ago, then you're not doing it right" [because it means you haven't been learning]
Best of luck.
-Jordan
The nice thing about the web is that it is very flexible when it comes to accommodating different styles of coding, so again what you've been doing isn't technically "wrong", just maybe not the "best practice" of recent vintage.
And last but not least, there's a quote in programming that says something like "if you don't cringe when you look at code you wrote 6 months ago, then you're not doing it right" [because it means you haven't been learning]
Best of luck.
-Jordan
