close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

CKEditor not displaying correct font size

Thread began 10/07/2014 12:30 pm by Christopher West | Last modified 10/08/2014 11:38 am by Jason Byrnes | 2705 views | 7 replies |

Christopher WestCommunity Expert

CKEditor not displaying correct font size

Hello there, I am attaching a screenshot that should convey my issue.

I have setup CKEDITOR using the WebAssist HTML Editor. And my website template style sheet is displaying the correct fonts, colours and spacing inside the CKEDITOR interface...however the actual font size for H1,H2,H3... tags are not being correctly displayed in CKEDITOR interface (however when its saved to database the correct sizes for H1, H2, H3 etc are displayed on the front end of website..Obviously I could simply just select the font size in CKEDITOR for those H1, 2, H3 tags but I want to streamline it for my client so they dont need to select the actual font size.

In case required I am pasting the CKEDITOR instance code that I am using:

php:
<?php

// The initial value to be displayed in the editor.
$CKEditor_initialValue "";
$CKEditor = new CKEditor();
$CKEditor->basePath "../../webassist/ckeditor/";
$CKEditor_config = array();
$CKEditor_config["wa_preset_name"] = "File Manager Enabled (custom)";
$CKEditor_config["wa_preset_file"] = "(custom)";
$CKEditor_config["width"] = "100%";
$CKEditor_config["height"] = "500px";
$CKEditor_config["docType"] = "<" ."!" ."DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">";
$CKEditor_config["dialog_startupFocusTab"] = false;
$CKEditor_config["fullPage"] = false;
$CKEditor_config["tabSpaces"] = 4;
$CKEditor_config["filebrowserBrowseUrl"] = "webassist/kfm/index.php?uicolor=".urlencode(isset($CKEditor_config["uiColor"])?str_replace("#","#",$CKEditor_config["uiColor"]):"#eee")."&theme=webassist_v2&showsidebar=false&startup_folder=blog";
$CKEditor_config["toolbar"] = array(
array( 
'Source'),
array( 
'Cut','Copy','Paste','SpellChecker','Undo','Redo','SelectAll','RemoveFormat'),
array( 
'NumberedList','BulletedList','Outdent','Indent','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
array( 
'Link','Unlink'),
array( 
'Bold','Italic','Underline','SpecialChar'),
array( 
'Styles','Format','FontSize'),
array( 
'Image'));
$CKEditor_config["contentsLangDirection"] = "ltr";
$CKEditor_config["entities"] = false;
$CKEditor_config["pasteFromWordRemoveFontStyles"] = false;
$CKEditor_config["pasteFromWordRemoveStyles"] = false;
$CKEditor_config["contentsCss"] = array("css/framework.min.css");
$CKEditor_config["bodyClass"] = "content-main";
$CKEditor->editor("blogcontent"$CKEditor_initialValue$CKEditor_config);
?>




Any ideas how I can get the H1, H2, H3 tags in the CKEDITOR to correctly display its font size that I have setup in my main website style sheet?

current in my CSS file I have the following code to set up these tags:

Im just confused why CKEDITOR DOES display correctly the font type, colour and spacing for these tags but not size?

h1 {
font-family: 'andada_scregular';
font-size: 30px;
margin-bottom: 30px;
font-weight: 400;
line-height: normal;
color: #ff318e;
text-align: left;
letter-spacing: 2px;
border-bottom: 1px solid #DDDDDD;
margin-top: 10px;
}
h2 {
font-family: 'andada_scregular';
font-size: 22px;
font-weight: 400;
line-height: normal;
color: #ff318e;
text-align: left;
letter-spacing: 2px;
}
h3 {
font-family: 'andadaregular';
font-size: 26px;
font-weight: 400;
line-height: normal;
color: #515151;
text-align: left;
letter-spacing: 1px;
}
Sign in to reply to this post

Jason ByrnesWebAssist

I'll need to troubleshoot directly, see the private message section.

Sign in to reply to this post

Christopher WestCommunity Expert

actually it looks like the way I have my CSS for H tags (I guess I need to improve on my CSS coding technique)

Not originally i was using #content-main (id) for the area on my website however I had to create .content-main (class) so that my CSS styles work in CKEDITOR

originally in my CSS file I was styling H1 tag on its own (rather than .content-main h1 and #content-main h1) Hence why I need to improve the way I build up my style sheet :)



Note: I always assumed if there was only going to be ONE occurence of a style it SHOULD be an ID style (rather than a Class) but CKEDITOR requires a class definition for the body class in HTML Editor.


it worked when I changed my CSS to:

.content-main h1, #content-main h1, h1 {
font-family: 'andada_scregular';
font-size: 30px;
margin-bottom: 30px;
font-weight: 400;
line-height: normal;
color: #ff318e;
text-align: left;
letter-spacing: 2px;
border-bottom: 1px solid #DDDDDD;
margin-top: 10px;
}
.content-main h2, #content-main h2, h2 {
font-family: 'andada_scregular';
font-size: 22px;
font-weight: 400;
line-height: normal;
color: #ff318e;
text-align: left;
letter-spacing: 2px;
}
.content-main h3 , #content-main h3, h3 {
font-family: 'andadaregular';
font-size: 26px;
font-weight: 400;
line-height: normal;
color: #515151;
text-align: left;
letter-spacing: 1px;
}
.content-main h4, #content-main h4, h4 {
font-family: 'andadabold';
font-size: 19px;
line-height: normal;
color: #515151;
text-align: left;
}
Sign in to reply to this post

Jason ByrnesWebAssist

Ok, glad to hear it is working.

Sign in to reply to this post

Christopher WestCommunity Expert

its interesting actually Jason as I found to display the look of the H1 tag in the "dropdown" menu in the CKEDITOR interface I have to make sure that in my CSS file that I have declared H1 on its own and then since I am using the class .content-main as the BODY in CKEDITOR I then need to make sure that in my CSS file I have made the declaration of .content-main h1 (and thirdly because in my frontend of the website that users see, since I am using a ID of #content-main I need to declare #content-main h1. But this surely is messy coding since I had to declare 3 times the H1 tag in my CSS file. Obviously I could remove the ID #content-main in my front end and then replace it with the class .content-main but then that would mean I would have to change ALOT of CSS code as well as code in my HTML.

My final question though, I am right in using ID styles in my HTML only if there is ONE occurance of that style? Do you think its a limitation of HTML Editor that I can only declare a CLASS for the BODY option in the WA Server behaviour?

Very last question, how can I remove H1 tag from the drop down menu in CKEDITOR (as I dont really want the user to select H1 from the dropdown as its being used in a different part of the backend form.)

Chris

Sign in to reply to this post

Jason ByrnesWebAssist

Yes, ID's are used for styles that occur only once, classes are used for more generic styles.

No, it's not a limitation, that only class can be used for the body, that is a common best practice.

There is not a supported way to remove the H1 tags from the drop down menu.

Sign in to reply to this post

Christopher WestCommunity Expert

Hey Jason, in case anyone else wants to know: I have figured out how to customise the CKEDITOR select list to display what ever tags I want.

So for example if I DONT want the enduser to use H1 tag I can simply add this line of code to the CKEDITOR instance in the php page im working on:

php:
$CKEditor_config["format_tags"] = "p;h2;h3;h4;h5;h6";



So the above is great if I have many instances of CKEDITOR in my backend admin that may do different things...if I want something more widespeak I would simple add the below code to the config.js file for CKEDITOR which is found in its own directory under WebAssist

config.format_tags = 'p;h2;h3;h4;h5;h6';



Chris

Sign in to reply to this post

Jason ByrnesWebAssist

Thanks for sharing that.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...