• Replies 4 replies
  • Subscribers 0 subscribers
  • Views 38 views
  • Users 0 members are here
Options
3sides - Social sharing widget
Related

Style sheet for CkEditor on Techtober system

Ha Nguyen Danh
27213

hi everyone,

I'm trying to get splash page content from this API https://collaborate.highq.com/sitepoint/showSwaggerUI.action#/Site%20Resource%20APIs/getSplashPageConfiguration .

There is a text in the splash page decorated with a CSS class : "CkStyleHighlightYellow". I need to show this text in my User Interface site with the same style displayed in the editor.

After that, I investigated on the CkEdior library on Techtober system, I see some styles of the element have been customized in a stylesheet called "common.css".

How can I get the original / correct stylesheet or plugin that Techtober system is using?

I'd be grateful if there's any support.

thanks you so much.

Parents

  • Ha Nguyen Danh, in short you can't.

    common.css is a bundled static file of various source files concatenated at build time. You will have to sift through the styles to incorporate into your application,

    e.g.

    /* Common and CK heading styles */
h1, h2, h3, h4, h5, h6, .ckContentArea h1, .ckContentArea h2, .ckContentArea h3, .ckContentArea h4, .ckContentArea h5, .ckContentArea h6 {margin:25px 0; line-height:normal; }

/* General title color change - from 
     to 
     all color should be customize via customization */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{color:#a6a29d;}

h1, .h1 {font-size:32px; font-weight: 400;}
h2, .h2 {font-size:27px; font-weight: 400;}
h3, .h3 {font-size:23px; font-weight: 400;}
h4, .h4 {font-size:19px; font-weight: 400;}
h5, .h5 {font-size:16px; font-weight: 500;}
h6, .h6 {font-size:14px; font-weight: 500;}

/* CK title color change - from 
     to 
     all color should be customize via customization */
.ckContentArea h1, .cke_panel_listItem h1 {font-weight: 400; color:#a6a29d; font-size:32px;}
.ckContentArea h2, .cke_panel_listItem h2 {font-weight: 400; color:#a6a29d; font-size:27px;}
.ckContentArea h3, .cke_panel_listItem h3 {font-weight: 400; color:#a6a29d; font-size:23px;}
.ckContentArea h4, .cke_panel_listItem h4 {font-weight: 400; color:#000000; font-size:19px;}
.ckContentArea h5, .cke_panel_listItem h5 {font-weight: 500; color:#a6a29d; font-size:16px;}
.ckContentArea h6, .cke_panel_listItem h6 {font-weight: 500; color:#a6a29d; font-size:14px;}
.ckContentArea table {max-width:100%; table-layout:fixed;}

/* CKEditor drop down - formatting styles */
.CkStyleWarningYellow, .CkStyleWarningRed, .CkStyleWarningGreen, .CkStyleWarningBlue, .CkStyleComputerCode, .CkStyleHighlightYellow, .CkStyleHighlightGreen{ border-radius: 3px 3px 3px 3px; padding: 0 5px; line-height: normal; color: inherit;}
.CkStyleWarningYellow 	{background-color: #FCF8C9; border: 1px solid #DED961;}
.CkStyleWarningRed 	{background-color: #FDDFDD; border: 1px solid #FDC7C7;}
.CkStyleWarningGreen 	{background-color: #D1EED0; border: 1px solid #BEE7BF;}
.CkStyleWarningBlue 	{background-color: #DDF4FA; border: 1px solid #C7EDF8;}
.CkStyleComputerCode 	{background-color: #f3f3f3; border: 1px solid #CBC8C1; display: block; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 90%; padding: 5px;}
.CkStyleComputerCode strong{font-weight: bold;}
.CkStyleHighlightYellow	{background-color: yellow;}
.CkStyleHighlightGreen 	{background-color: Green;}
.ckContentArea small	{font-size:10px;}

    At best you will get a close approximation of the format and layout, however, there are many baseline Bootstrap (v3) styles implicitly used in Collaborate.

Reply

  • Ha Nguyen Danh, in short you can't.

    common.css is a bundled static file of various source files concatenated at build time. You will have to sift through the styles to incorporate into your application,

    e.g.

    /* Common and CK heading styles */
h1, h2, h3, h4, h5, h6, .ckContentArea h1, .ckContentArea h2, .ckContentArea h3, .ckContentArea h4, .ckContentArea h5, .ckContentArea h6 {margin:25px 0; line-height:normal; }

/* General title color change - from 
     to 
     all color should be customize via customization */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{color:#a6a29d;}

h1, .h1 {font-size:32px; font-weight: 400;}
h2, .h2 {font-size:27px; font-weight: 400;}
h3, .h3 {font-size:23px; font-weight: 400;}
h4, .h4 {font-size:19px; font-weight: 400;}
h5, .h5 {font-size:16px; font-weight: 500;}
h6, .h6 {font-size:14px; font-weight: 500;}

/* CK title color change - from 
     to 
     all color should be customize via customization */
.ckContentArea h1, .cke_panel_listItem h1 {font-weight: 400; color:#a6a29d; font-size:32px;}
.ckContentArea h2, .cke_panel_listItem h2 {font-weight: 400; color:#a6a29d; font-size:27px;}
.ckContentArea h3, .cke_panel_listItem h3 {font-weight: 400; color:#a6a29d; font-size:23px;}
.ckContentArea h4, .cke_panel_listItem h4 {font-weight: 400; color:#000000; font-size:19px;}
.ckContentArea h5, .cke_panel_listItem h5 {font-weight: 500; color:#a6a29d; font-size:16px;}
.ckContentArea h6, .cke_panel_listItem h6 {font-weight: 500; color:#a6a29d; font-size:14px;}
.ckContentArea table {max-width:100%; table-layout:fixed;}

/* CKEditor drop down - formatting styles */
.CkStyleWarningYellow, .CkStyleWarningRed, .CkStyleWarningGreen, .CkStyleWarningBlue, .CkStyleComputerCode, .CkStyleHighlightYellow, .CkStyleHighlightGreen{ border-radius: 3px 3px 3px 3px; padding: 0 5px; line-height: normal; color: inherit;}
.CkStyleWarningYellow 	{background-color: #FCF8C9; border: 1px solid #DED961;}
.CkStyleWarningRed 	{background-color: #FDDFDD; border: 1px solid #FDC7C7;}
.CkStyleWarningGreen 	{background-color: #D1EED0; border: 1px solid #BEE7BF;}
.CkStyleWarningBlue 	{background-color: #DDF4FA; border: 1px solid #C7EDF8;}
.CkStyleComputerCode 	{background-color: #f3f3f3; border: 1px solid #CBC8C1; display: block; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 90%; padding: 5px;}
.CkStyleComputerCode strong{font-weight: bold;}
.CkStyleHighlightYellow	{background-color: yellow;}
.CkStyleHighlightGreen 	{background-color: Green;}
.ckContentArea small	{font-size:10px;}

    At best you will get a close approximation of the format and layout, however, there are many baseline Bootstrap (v3) styles implicitly used in Collaborate.

Children
No Data