CODEWITHSUNDEEP
jquerycssckeditor
sooper
sooper

Reputation: 6039

Change the font of CKEditor headers and have this reflected in the drop-down menu

Is there a way I can change the default header fonts (i.e. h1,h2) in the editor dialogue for CKEditor so that they appear both inside the text area and the Paragraph Format drop-down menu. I've been going through the css files and put the following code in /skins/moono/editor.css:

.cke_reset_all h1, .cke_reset_all h2 {
    font-size: 25px;
    font-family: Rockwell, Georgia, Helvetica, Tahoma, Arial, 'Times New Roman', serif; 
}

but it doesn't take any effect. I'm wondering if it's something I have to do on the Javascript side. Any ideas?

Upvotes: 0

Views: 1153

Answers (2)

ap.singh
ap.singh

Reputation: 1160

You can use !important property in CSS to enforce its usage by Browser like below

.cke_reset_all h1, .cke_reset_all h2 {

 font-size: 25px !important;

 font-family: Rockwell, Georgia, Helvetica, Tahoma, Arial, 'Times New Roman', serif !important; 

}

by writing it as !important . It will overwrite all its previous css.

Upvotes: 2

Reinmar
Reinmar

Reputation: 22023

Place these rules in contents.css file in main CKEditor directory:

h1, h2 {
    font-size: 25px;
    font-family: Rockwell, Georgia, Helvetica, Tahoma, Arial, 'Times New Roman', serif; 
}

This will be enough to style headers in format drop down and editor's contents.

Upvotes: 2

Related Questions