I have an issue applying heading styles within the Umbraco editor. I have managed to figure out how to set Heading styling that can be applied through the Editor, and I have tried to test out the new heading styles, it all looks fine within the content editor in Umbraco, the headings display correctly.
For example I have set a H3 as Georgia 20px, and it displays exactly as that within Umbraco. However when I save the document and view the page the styling is not applied for some reason.
Would be great if you have any ideas why this is not working? I tried editing the reset.css and removing the H3 from the reset field, it dispalyed as a H3 but not in the correct font.
You can see the link below to the site, within the body copy of the page, the text Features, Optional Extras, Dimensions etc should all have the H3 style.
Okay, so on that page you link to, you have three style sheets. The first is a reset, which is designed to 'counter' the default styling which browsers apply to raw HTML elements, so effectively it sets everything to a baseline standard layout. You should really leave the reset.css file alone and not perform any edits to it. Instead, your edits should go in subsequent style sheets which will override the reset styles for elements (such as your h3 headings) which you want to be overridden. So long as your custom style sheet is referenced after the reset style sheet (which it is) then your page should pick up the latest referenced styles.
Using Chrome's developer tools or the Firebug Firefox extension you can quickly see by right-clicking on your h3 elements that they are in fact set correctly as h3 tags in the code, but there are no styles targeting these elements in your style sheets, so they're just being displayed as plain old 'reset' HTML content. If you put something like this at the bottom of your 'default.css' file:
h3 { font-size: 20px; color: #f00; }
and save it, you should see that all of your h3 tags in the page turn large and red. Probably not desirable, but obviously customise to your requirements ;)
So the issue is basically more to do with inheritance (or 'cascading') of CSS than anything Umbraco specific I think, but hopefully this points you in the right direction anyhow.
Hey guys thanks a million for the replys, that worked a treat, I had tried to create seperate style sheet elements to display them within the tinyMCE editor but really they should have been in my primary style sheet, all good now I think .
Thanks a lot for the help, seems like a great community here! :)
Yes, it's asuper coolforum, many usersare ready tohelp you to findsolutionsto problems thatyou runintowhenyouareworking with the Umbraco CMS.
Ifyou want to doothersa favor, you have theopportunity tomakthe answer whichsolvedyour problem.
This allowsothers with the sameproblem, to seewhat responsethat solvedyourproblem.Ifyou do not knowhow tomakthe question asresolved,then there isdefinitely peoplehere on theforumwhocanexplain how todo it.
Heading stylings not displaying
Hi all
I have an issue applying heading styles within the Umbraco editor. I have managed to figure out how to set Heading styling that can be applied through the Editor, and I have tried to test out the new heading styles, it all looks fine within the content editor in Umbraco, the headings display correctly.
For example I have set a H3 as Georgia 20px, and it displays exactly as that within Umbraco.
However when I save the document and view the page the styling is not applied for some reason.
Would be great if you have any ideas why this is not working?
I tried editing the reset.css and removing the H3 from the reset field, it dispalyed as a H3 but not in the correct font.
You can see the link below to the site, within the body copy of the page, the text Features, Optional Extras, Dimensions etc should all have the H3 style.
http://bit.ly/yGR08B
Thanks for your help.
James.
Hi James,
Welcome to our.umbraco!
Okay, so on that page you link to, you have three style sheets. The first is a reset, which is designed to 'counter' the default styling which browsers apply to raw HTML elements, so effectively it sets everything to a baseline standard layout. You should really leave the reset.css file alone and not perform any edits to it. Instead, your edits should go in subsequent style sheets which will override the reset styles for elements (such as your h3 headings) which you want to be overridden. So long as your custom style sheet is referenced after the reset style sheet (which it is) then your page should pick up the latest referenced styles.
Using Chrome's developer tools or the Firebug Firefox extension you can quickly see by right-clicking on your h3 elements that they are in fact set correctly as h3 tags in the code, but there are no styles targeting these elements in your style sheets, so they're just being displayed as plain old 'reset' HTML content. If you put something like this at the bottom of your 'default.css' file:
h3 {font-size: 20px;
color: #f00;
}
and save it, you should see that all of your h3 tags in the page turn large and red. Probably not desirable, but obviously customise to your requirements ;)
So the issue is basically more to do with inheritance (or 'cascading') of CSS than anything Umbraco specific I think, but hopefully this points you in the right direction anyhow.
Hi James,
I just took a look at your style sheet. And I can see in firebug for firefox that you don´t hit a seletor for your h3 headlines in class cookerdescription.
So I would say is missing is a selector that hits your h3 elements under cookerdescription the div tag with the class. My suggestion would be
. cookerdescription h3 {
}
Or a general h3 selector. I hope this can help you closer to a solution.
/Dennis
Hey guys thanks a million for the replys, that worked a treat,
I had tried to create seperate style sheet elements to display them within the tinyMCE editor but really they should have been in my primary style sheet, all good now I think .
Thanks a lot for the help, seems like a great community here! :)
James.
Hi James,
Good to hear you found a solution :)
Yes, it's a super cool forum, many users are ready to help you to find solutions to problems that you run into when you are working with the Umbraco CMS.
This allows others with the same problem, to see what response that solved your problem. If you do not know how to mak the question as resolved, then there is definitely people here on the forum who can explain how to do it.
/Dennis
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.