Stylesheet Parser

[GuyB]

Hello,

I'm struggling with this problem.

I'm using GetSimpleCMS-stable_cke_4.3.2 build so that I can use the CKEditor StylesheetParser plugin.

I've done what is recommended so:

I just don't get my styles appearing in the drop down list in the editor, so can anyone help me get through this please??

Thanks
Guy

I added this in config.js :

config.extraPlugins = 'stylesheetparser';

config.contentsCss = '/css/guy.css';

config.stylesSet = [];

and the guy.css looks like this (it is from the newminimalism theme with some additions):
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Content
==================================================
#Reset & Basics
#Basic Styles
#Site Styles
#Typography
#Links
#Lists
#Images
#Buttons
#Forms
#Misc */


/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 80%;
font: inherit;
vertical-align: baseline;


}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1;
overflow-ycroll;
}
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }


/* #Basic Styles
================================================== */
body {
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1.4em;
color: #636F65;
font-size: 90%;
background-color: white;
margin: 0 0 1px;
line-height: 1.7;
border-top: 10px solid black;
background-image: url(../images/bg.png);
background-position: left top;
background-repeat: repeat;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}

/* #Site Styles
================================================== */


.asterix {
font-size: 80%;
}
#container {
width: 960px;
margin-right: auto;
margin-left: auto;
margin-top: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1.4em;
color: #636F65;
overflow: hidden;
padding-left: 30px;
padding-right: 30px;
}
#headercontainer {
text-decoration: none;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.7em;
font-weight: normal;
padding-top: 30px;
padding-bottom: 30px;
color: #909E79;
font-size: 120%;
overflow: hidden;
}
#headercontainer ul li {
display: block;
float: left;
width: 400px;
}
#headercontainer a:link {
color: #FFF;
text-decoration: none;
}
#headercontainer a:hover {
color: #FFF;
text-decoration: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#headercontainer a:visited {
color: #FFF;
text-decoration: none;
}
#maincontent {
overflow: hidden;
display: block;
margin-top: 30px;
width: 1000px;
font-size: 70%;
}
#maincontent ul {
float: left;
display: block;
}
#maincontent ul li {
display: block;
float: left;
width: 465px;
overflow: hidden;
margin-right: 30px;
}
a:link {
text-decoration: none;
color: #636F65;
}
a:visited {
color: #636F65;
text-decoration: none;
}
a:hover {
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #909D79;
}
#footer {
text-align: right;
padding-top: 20px;
margin-bottom: 30px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #909D7A;
font-size: 60%;
margin-top: 30px;
padding-bottom: 15px;
}
#headerimages {
}
.ampersand {
font-family: Baskerville, "Goudy Old Style", "Hoefler Text", Palatino, "Palatino Linotype", "Book Antiqua", serif;
font-style: italic;
font-size: 120%;
}
#address {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #909E7A;
border-bottom-color: #909D79;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;

overflow: hidden;
}
.contentcaps {
font-size: 110%;
letter-spacing: 0.2em;
color: #909E7A;
text-transform: uppercase;
}
.content {
height: auto;
overflow: auto;
display: block;
margin-top: 30px;
margin-bottom: 30px;
font-size: 70%;
width: 1000px;
}
.content ul {
float: left;
display: block;
}
.content ul li {
display: block;
float: left;
width: 217px;
overflow: hidden;
margin-right: 30px;
}
.applegreen {
color: #CAD5AA;
}
.greenapplebackgroundwhitetext {
color: #FFF;
background-color: #CAD5AA;
}
p {
padding-top: 10px;
}
.acknowledgements {
margin-top: 30px;
font-size: 70%;
}
.flash {
font-size: 60%;
text-transform: uppercase;
letter-spacing: 0.3em;
text-align: center;
}





/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
color: #181818;
font-family: inherit;
font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }

h1 {
font-size: 42px;
line-height: 1.1;




/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
color: #181818;
font-family: inherit;
font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }

h1 {
font-size: 42px;
line-height: 1.1;
color: #666666;
text-align: left;
margin-bottom: 13px;
padding-bottom: 15px;
}

h1 span {
font-size: 25px;
line-height: 12px;
color: #666666;
margin-left: 10px;
}

h2 {
font-size: 15px;
line-height: 1.8;
color: #666666;
text-align: left;
border-bottom: 1px solid #A3A3A3;
margin-bottom: 7px;
padding-bottom: 12px;
}

h3 {
font-size: 18px;
line-height: 0.9;
color: #575757;
text-align: left;
margin-bottom: 6px;
padding-bottom: 5px;
}

h4 {
font-size: 14px;
line-height: 0.9;
color: #CC3333;
text-align: left;
margin-bottom: 8px;
padding-top: 3px;
}


p { margin: 0 0 20px 0; }
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777; }

em { font-style: italic; }
strong { font-weight: bold; color: #333; }
small { font-size: 80%; }

/* Blockquotes */
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 12px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

hr { border: solid #A3A3A3; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }


/* #Links
================================================== */
a, { color: #CC3333; }
a:hover, a:focus { color: #CC3333; }
p a, p a:visited { line-height: inherit; }


/* #Lists
================================================== */
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { line-height: 21px; }
li p { line-height: 21px; }

/* #Images
================================================== */

img.scale-with-grid {
max-width: 100%;
height: auto; }


/* #Buttons
================================================== */

.button {
width: 66px;
height: 13px;
margin-top: 12px;
padding: 9px;
background-color: black;
display: inline-block;
color: white;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 12px/100% Arial, Helvetica, sans-serif;
margin-bottom:20px;
}

.button :visited { color: #CC3333;}
.button :hover,.button :focus { color: #CC3333; }

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}


/* #Forms
================================================== */

form {
margin-bottom: 20px; }
fieldset {
margin-bottom: 20px; }
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
border: 1px solid #ccc;
padding: 6px 4px;
outline: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 210px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff; }
select {
padding: 0; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border: 1px solid #aaa;
color: #444;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2); }
textarea {
min-height: 60px; }
label,
legend {
display: block;
font-weight: bold;
font-size: 13px; }
select {
width: 220px; }
input[type="checkbox"] {
display: inline; }
label span,
legend span {
font-weight: normal;
font-size: 13px;
color: #444; }

/* #Misc
================================================== */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }

[shawn_a]

It might not be able to find your stylesheet.
have you confirmed your content.css is actually working ?

[GuyB]

Hello Shawn,

How do I check that please?
Thanks
Guy

[shawn_a]

The editor should show your stylesheets effects.

[GuyB]

Hello Shawn,

No I just get a blank drop down list in the 'styles' in the editor - is there anyway to debug the problem or do you have any ideas please?
Thanks
Guy

[shawn_a]

no the wysiwyg content should be styled according to the stylesheet.
add
.h2 { color:#FF00FF; }
and your h2 s should be pink for example.

[GuyB]

Hello Shawn,

That didn't work. I just get the normal styles and paragraph formats and h2 does not come out pink

This is the first part of the config.js - any thoughts?
// GetSimpleCMS config file for CKeditor 3.6.2

// default editor config

CKEDITOR.replace( 'editor1' , {
config.stylesSet = [];
config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/guy.css';
};

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here.
config.resize_dir = 'vertical' // vertical resize
config.toolbarCanCollapse = false; // hide toolbar collapse button
config.dialog_backgroundCoverColor = '#000000'; // veil color for dialog popups
config.magicline_color = '#CF3805';
config.allowedContent = true; // disable acf

config.toolbar_advanced =
[['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', 'Table', 'TextColor', 'BGColor', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source'],
'/',
['Styles','Format','Font','FontSize']];

config.toolbar_basic =
[['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source']];

};

/** ------------------------------------------------------------------------
* GS Default overrides and extras

[GuyB]

Hello Shawn,

I think I've got it to work with your idea of changing the h2 colour, that enabled me to diagnose if the css was being loaded (1 minor fix needed) and then which bits of the css were being picked up and I think I'm all sorted out now.

Many thanks for your prompt help.

Regards
Guy

[shawn_a]

CKEDITOR.replace( 'editor1' , {
config.stylesSet = [];
config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/guy.css';
};

is wrong
your configs should be in side the
CKEDITOR.editorConfig section

also we automatically pick up editor.css in the theme directory,makes it a bit easier to implement contentCss

[GuyB]

Hello Shawn,

Thanks for this help.

Does that mean that if the editor.css has my site guy.css code in it ckeditor will automatically pick it up?That would really help for multi site development.
Thanks

Guy

[shawn_a]

Yes it should be explained in the wiki

[GuyB]

Yes it should be explained in the wiki

Hello Shawn,

Thanks for this. do you have the link to the WIKI - this is all beginning to make sense and taking away the frustrations of getting to use CKeditor.

One thing, when I use my css (guy.css) I don't see these options in style or paragraph format:
.asterix {
font-size: 80%;
}
#container {
width: 960px;
margin-right: auto;
margin-left: auto;
margin-top: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1.4em;
color: #636F65;
overflow: hidden;
padding-left: 30px;
padding-right: 30px;
}
#headercontainer {
text-decoration: none;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.7em;
font-weight: normal;
padding-top: 30px;
padding-bottom: 30px;
color: #909E79;
font-size: 120%;
overflow: hidden;
}

What am I doing wrong or not understanding please?

Regards
Guy

[shawn_a]

from what I can tell this plugin only loads element styles.

Code:

// gsconfig.php
define('GSEDITOROPTIONS',"customConfig : '../../../../theme/cke_custom.js'");

Code:

// cke_custom.js
...
    config.stylesSet = [];
    CKEDITOR.plugins.addExternal( 'stylesheetparser', '../../../../theme/innovation/stylesheetparser/' );        
    config.extraPlugins = 'stylesheetparser';
...

Code:

/* theme/innovation/editor.css */
h3.pink {color:#FF00FF !important;}

[GuyB]

Hello Shawn,

I've tried disregarding the stylesheetparser and just putting all my css into editor.css and I just don't seem to get the headercontainer and container.

Also, do I need this line/s?
// gsconfig.php
define('GSEDITOROPTIONS',"customConfig : '../../../../theme/cke_custom.js'");

Many thanks
Guy

[shawn_a]

That is to use your own custom config.js, since you should not modify core files, they get overwritten on upgrades. you should copy config.js and use your own copy, that is how you do a custom config.js, or at least how i do it.

Those are ID specific styles so they really cannot be used on multiple items so that makes sense why you cant use it.
You have to add an id to an element, and ids must be unique

[GuyB]

OK I understand Shawn but am still confused about how to add an id to an element, I know I'm being thick!!

I have this in the editor.css:
guy {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #909E7A;
border-bottom-color: #909D79;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
overflow: hidden;
}
but Guy does not appear as a style or a para format in the editor - what am I doing wrong?

Thanks

Guy

[shawn_a]

change it to div.guy or span.guy

and read up on css selectors.

[GuyB]

Ok Shawn, I'll do that.
Regards
Guy

[GuyB]

One other question.
How do I get the guy style or para format to appear in the editor?