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

Forums / General Discussions / Font size when editing

Font size when editing

7 posts, 0 answered
  1. Jaymie
    Jaymie avatar
    27 posts
    Registered:
    30 Jan 2009
    13 Aug 2012
    Link to this post
    Hi,
    I am using HTML 5 in my sitefinity site and I am also using the 1140 Grid system.
    At the top of my CSS file I have this:

    body
    {
        background-color: #FFFFFF;
        font-size: 62.5% !important;
        font-family: Lucida Grande, Lucida Sans, Trebuchet MS, Sans-Serif;
        color: #696969;
    }

    The problem is, most of it is overridden when editing a page and the text becomes huge.
    How can I force the editor to use my style sheet? PS, the !important is ignored also....

    regards,
    Jaymie
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    13 Aug 2012
    Link to this post
    By editor you mean the page editor or literally the RadEditor?

    Personally I'd load up firefox\firebug and inspect the text to see what the problem is.  If you have a masterpage and your CSS file attached (or in the global theme directory) it should just come down and be applied.
  3. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    13 Aug 2012
    Link to this post
    See if this helps.

    http://www.sitefinity.com/blogs/gabesumner/posts/11-09-23/my_3_favorite_customizations_to_sitefinity_rsquo_s_rich_text_editor.aspx
  4. Jaymie
    Jaymie avatar
    27 posts
    Registered:
    30 Jan 2009
    14 Aug 2012
    Link to this post
    It is not the text editor, I have attached some screen shots so you can see.
  5. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    14 Aug 2012
    Link to this post
    Personally, I tend to apply a top class right from the body level, and use at least that level of specificity for all of my custom classes, or for any standard element styles I want to override. 

    body.mybaseclass
    {
        background-color: #FFFFFF;
        color: #696969;
        etc:etc;
    }
     
    .mybaseclass .anotherclassofmine
    {
        etc:etc;
    }

    .mybaseclass h1
    {
       etc:etc; 
    }

    However, I also always use my own masterfile as the common base for all page templates, which makes it easier to ensure the class on the body element
    <body class='mybaseclass'>

    I still get the occasional scope clash, but generally my more specific rules trump anything being introduced by the page editor.

    Works for me, but YMMV.
  6. Jaymie
    Jaymie avatar
    27 posts
    Registered:
    30 Jan 2009
    15 Aug 2012
    Link to this post
    OK, I will have a shot at that.
    I expect it to work, but was hoping that I was doing something wrong in the overall CSS.

    Cheers,
    J
  7. Gabe Sumner
    Gabe Sumner avatar
    440 posts
    Registered:
    09 Sep 2007
    15 Aug 2012
    Link to this post
    I keep wanting to organize a webinar that focuses on design in Sitefinity.

    In general, it's important to remember that when you're editing a page in Sitefinity that our UI is forced to live in the same space as your web styling.  Which means your CSS can impact Sitefinity & vice versa.  We've done a lot of work to minimize/localize the impact of our UI, but it's still possible to have overlap.

    My recommendation is to avoid "greedy styling" as much as possible.  This is exactly what MB is saying as well.  Instead of styling "body", style "body.mybaseclass".  Or instead of styling "input", style ".mybaseclass input".  This scopes your styling and minimizes the impact it will have on Sitefinity's UI.

    Also, this isn't a Sitefinity problem, this is a WYSIWYG problem.  The minute you apply "real" styling to the editing experience then you open the potential for these problems...and they are sometimes frustrating to deal with.  However, there are benefits to content authors of having a WYSIWYG experience.

    Gabe Sumner
    Telerik | Sitefinity CMS
7 posts, 0 answered