Font size when editing

Posted by Community Admin on 03-Aug-2018 08:40

Font size when editing

Sitefinity - General Discussions

All Replies

Posted by Community Admin on 13-Aug-2012 00:00

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

Posted by Community Admin on 13-Aug-2012 00:00

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.

Posted by Community Admin on 13-Aug-2012 00:00

See if this helps.

www.sitefinity.com/.../my_3_favorite_customizations_to_sitefinity_rsquo_s_rich_text_editor.aspx

Posted by Community Admin on 14-Aug-2012 00:00

It is not the text editor, I have attached some screen shots so you can see.

Posted by Community Admin on 14-Aug-2012 00:00

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.

Posted by Community Admin on 15-Aug-2012 00:00

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

Posted by Community Admin on 15-Aug-2012 00:00

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

This thread is closed