+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Edit page - WYSIDifferent...

Edit page - WYSIDifferent...

5 posts, 1 answered
  1. ManniAT
    ManniAT avatar
    9 posts
    Registered:
    08 Nov 2003
    24 Aug 2009
    Link to this post
    Hi,

    I gave SiteFinity a first closer look and decided to use the Company template.
    By editing the Homepage I found that I don't see (also not in Preview) the content as it looks later on the page.
    The question is now:
    a.) Has the Template errors?
    b.) Is there a general problem in Sitefinity using the current CSS styles?
    c.) Is it a problem of RadEditor?

    To be more precise.
    The homepage (as generated by the template) uses the Classic Theme.
    The headline ("Welcome to Our Company") is a H2 tag with a strong tag inside.
    The css rule for this says: h2 strong { color: #06c }
    But when I edit the content of the homepage the headline is simply black.
    The "Subheadline" (H3 - Lorem ipsum..) is awls displayed black - the style for h3 has also that blue color.
    And so for the following H4 "Praesent ut libero".

    This goes on (wrong bullets at the UL...) till the finishing hyperlink which is not displayed orange.

    So what's the problem? Or what did I do wrong?
    I guess (hope) Sitefinity is able to handle content in they way of WYSIWYG.

    Regards

    Manfred
  2. Nikolai
    Nikolai avatar
    216 posts
    Registered:
    21 Nov 2016
    25 Aug 2009
    Link to this post
    Hello ManniAT,

    The reason for this change on the HomePage is due to the fact that the styles for the GenericContent are inherited from the <div> in which the control is placed. In order to show styles inside the RadEditor you will have to apply them manually.
    Basically it is a matter of organizing themes and styles so you can have the WYSIWYG behavior.

    Sincerely yours,
    Nikolai
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  3. ManniAT
    ManniAT avatar
    9 posts
    Registered:
    08 Nov 2003
    25 Aug 2009
    Link to this post
    Hi Nikolai,

    I'm not sure if I understand you answer.
    There are styles (you are right) which are inherited from some div's.
    But as I wrote in my above post the Hx tags do neither have inheritance nor do they use ID's or something like this.
    These styles are straight styles like "H3 { color: #xxx }" or (with substyles) "H2 strong {....}".

    So I guess I have to be a bit more precise - what do I have to do that the editor takes care of my styles?
    Where "my styles" are the styles used by the my templates.
    In the current sample this would mean the css file from "themes/classic".

    So my idea (maybe I'm wrong) - I (as "chief site moderator") prepare some pages assign styles (themes, templates) and later on a "page writer" (almost no technical skills) creates / changes content.
    Later my chief says: he, that greenish thing is bad - let's have it more blue.
    So I change the theme - and the things are more blue.
    And when the writer comes in next time he sees the green things replace by blue things.

    Last not least - and here comes the problem - the "page writer" expects that the content is displayed like he types it in. In the case of this sample - he makes some text bold, and this text looks blue.
    BUT - it doesn't - it's black in the editor.

    From my experiences as developer I think to remember that the editor takes the CSS styles of the containing page.
    But I have a possibility to choose a different CSS in the case where the environment hosting the editor is styled different than the environment where the content will run later. And I thought Sitefinity uses this to enable WYSIWYG.

    From my point of view it looks as if the correct styles are applied in preview - but as soon as I'm in the editor the styles are not applied (or in other words - the theme CSS is ignored).

    To bring this to a simple conclusion:
    The editor doesn't show the things as they should look because of the applied theme.
    You say this has something to do with "styles applied to the div's".
    I can't understand this, because the editor even ignores "plain styles" - where the div's are not involved like for H3 or H2 strong.

    Does this either mean:
    a.) Sitefinity editing is not WYSIWYG (not so good for a CMS)
    b.) It is WYSIWYG - as long as I don't use themes (but then themes are more of less not useable)
    c.) I understand something very wrong (I hope so) :)

    Regards

    Manfred
  4. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    26 Aug 2009
    Link to this post
    Hello ManniAT,

    I am very sorry for the misunderstanding. So as far as I understood, you want the same styles to be applied to content when you edit it. To achieve this open ~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css and add the CSS from below at the end of the file.

    /* Company Classic */ 
    body { 
        font-family: Tahoma, sans-serif; 
        font-size: 70%; 
        color: #333; 
        background-color: #fff; 
        text-align: left; 
    * { 
        margin: 0; 
        padding: 0;  
    /* Headings */ 
    h1 { 
        margin: 0; 
        padding: 30px 0 30px 30px; 
        background-color: #036; 
        color: #fff; 
        font-size: 2.2em; 
        font-weight: normal; 
        text-transform: uppercase; 
        font-family: Arial Black, Arial, Helvetica, sans-serif; 
    h2 { 
        margin: 0 0 25px; 
        padding: 0; 
        color: #000; 
        font-size: 2.2em; 
        font-weight: bold; 
        font-family: Arial, Helvetica, sans-serif; 
    h3 { 
        margin: 0 0 15px; 
        padding: 0; 
        color: #06c; 
        font-size: 1.6em; 
        font-weight: bold; 
        font-family: Arial, Helvetica, sans-serif; 
    h4 { 
        margin: 0 0 10px; 
        padding: 0; 
        color: #006; 
        font-size: 1.2em; 
        font-weight: bold; 
    /* Paragraphs */ 
    p { 
        margin: 0 0 25px; 
        padding: 0; 
        font-size: 1.2em; 
    p.more { 
        font-weight: bold; 
    /* Lists */ 
    ul, ol { 
        margin: 0 0 25px 25px; 
        padding: 0; 
        list-style-position: outside; 
        font-size: 1.1em; 
    ul { 
        margin-left: 10px; 
    li { 
        margin: 0 0 10px; 
        padding: 0; 
        list-style-type: disc; 
    ul li {  
        margin: 0 0 10px; 
        padding: 0 0 0 10px; 
        background: transparent url(Images/ul_li.gif) no-repeat 0 .25em; 
        list-style-type: none; 
    ol li { 
        list-style-type: decimal; 
    /* Semantic */ 
    strong { 
        font-weight: bold; 
        font-style: normal; 
    em { 
        font-weight: normal; 
        font-style: italic; 
    h2 strong, h2 b 
        color: #06c; 
    address { 
        font-style: normal; 
        font-size: 1.1em; 
        line-height: 1.4em; 
    /* Links */ 
    a:link, a:visited, a:hover, a:active { 
        color: #f60; 
        text-decoration: none; 
    a:hover { 
        text-decoration: underline; 
    p.more a:link, p.more a:visited, p.more a:hover, p.more a:active { 
        padding: 0 15px 0 0; 
        background: transparent url(Images/a_more.gif) no-repeat 100% 50%; 

    Actually Rad Editor does not automatically detect the styles applied to a page to apply them to the content that is being edited. You need to add the needed CSS rules in the EditorContentArea.css file manually. So if the color of the headings change, you will have to change it in that file as well.

    Please let us know if you need further help.


    Kind regards,
    Katia
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
    Answered
  5. ManniAT
    ManniAT avatar
    9 posts
    Registered:
    08 Nov 2003
    26 Aug 2009
    Link to this post
    Hi Katia,

    although your answer proofs what I was afraid off it clarifies the things.

    Thank you,

    Manfred
Register for webinar
5 posts, 1 answered