Help adding own stylesheet

I hate to be the one to bring this up again, but has the way you add your own stylesheet changed since the last update of PowerCMS? I have look back at the posts and the latest one which seems to be the most informative about this subject but I do not have the code in contents_insert.php or content_update.php that you refer to and so cannot edit it to include my styles.

I have the drop down menus for styles and format appearing in the CMS but just cannot work out how to add my own styles to them or delete any existing ones that will just confuse my client such as typewriter.

I did a search for typewriter in my site in the hope of finding the relevant stylesheet but instead found cms/webassist/ckeditor/plugins/styles/styles/default.js holds all of the styles mentioned in the drop down styles menu - is that how you are meant to add/amend styles now?

Could you help please, this site is meant to be going live tomorrow and I have got everything working except this (and another issue I have posted earlier about characters not displaying correctly).

Thanks

editing the webassist/ckeditor/plugins/styles/styles/default.js file is the si,plest way to add your own custom styles to the list.

there are other ways to add them that are more difficult to hand code. I would recommended just adding your custom styles to the webassist/ckeditor/plugins/styles/styles/default.js file.

I find the easiest way to add your style sheet is to edit the custom files in the HTML Editor folder:

Open the HTML Editor folder and open the custom folder then the
contents_insert_ContentValueStyles1.xml and change it to suit i.e.

<?xml version="1.0" encoding="utf-8" ?>
<Styles>
<Style name="MyStyle-One" element="span" >
<Attribute name="class" value="MyStyle-One" />
</Style>

<Style name="MyStyle-Two" element="span" >
<Attribute name="class" value="MyStyle-Two" />
</Style>

<Style name="MyStyle-Three" element="span" >
<Attribute name="class" value="MyStyle-Three" />
</Style>

</Styles>

etc etc untill all the styles you require are entered. Then copy this and past it into the
contents_update_ContentValueStyles1.xml file ok thats the first bit second open the content_insert_ContentValue1.js file and look down at the bottom and change this line to your css file (making sure it is relative)

FCKConfig.EditorAreaCSS = '../../css/mystylesheet.css'; // relative to fckeditor/editor/fckeditor.html

Do the same for the contents_update_ContentValue1.js file

and that's it refresh everything log out back in clear your cache etc it always works for me and even though I have HTML Editor 3 you don't need it to do this hope it helps Alistair

Here is the code from the .js file - /*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or license
*/

CKEDITOR.stylesSet.add('default',[{name:'Blue Title',element:'h3',styles:{color:'Blue'}},{name:'Red Title',element:'h3',styles:{color:'Red'}},{name:'Marker: Yellow',element:'span',styles:{'background-color':'Yellow'}},{name:'Marker: Green',element:'span',styles:{'background-color':'Lime'}},{name:'Big',element:'big'},{name:'Small',element:'small'},{name:'Typewriter',element:'tt'},{name:'Computer Code',element:'code'},{name:'Keyboard Phrase',element:'kbd'},{name:'Sample Text',element:'samp'},{name:'Variable',element:'var'},{name:'Deleted Text',element:'del'},{name:'Inserted Text',element:'ins'},{name:'Cited Work',element:'cite'},{name:'Inline Quotation',element:'q'},{name:'Language: RTL',element:'span',attributes:{dir:'rtl'}},{name:'Language: LTR',element:'span',attributes:{dir:'ltr'}},{name:'Image on Left',element:'img',attributes:{style:'padding: 5px; margin-right: 5px',border:'2',align:'left'}},{name:'Image on Right',element:'img',attributes:{style:'padding: 5px; margin-left: 5px',border:'2',align:'right'}},{name:'Borderless Table',element:'table',styles:{'border-style':'hidden','background-color':'#E6E6FA'}},{name:'Square Bulleted List',element:'ul',styles:{'list-style-type':'square'}}]);

How do I add this? /* CSS Document */
.body {
margin: 0;
padding: 0;
text-align:left;
font-family: Verdana, Geneva, sans-serif;
color: #333;
font-size: 100%;
}
a:link {
text-decoration: none;
color: #630;
}
a:visited {
text-decoration: underline;
color: #815E29;
}
a:hover {
text-decoration: underline;
color: #030;
}
a:active {
text-decoration: underline;
color: #066;
}
.container {
width:100%;
overflow:hidden;
}
p {
margin-top: 0px;
margin-bottom: 5px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 20px;
}


.left { float:left;}
.right {float:right;}
.clear { clear:both;}


.paddingLeft {
padding-left: 25px;
}
#left {
text-align: left;
}
#right {
text-align: right;
}
#center {
text-align: center;
}

Read more: How to Left, Right, Center Align With CSS | eHow.com how_2284643_left-right-center-align-css.html#ixzz1I8JXBfJs

/* ============================= content ====================== */
#contentTextEditorWhiteBG{
background-image: none;
background-color: #FFF;
}
.column-2{ margin-left:2px;}
.line{ padding:23px 0 1px 0;}
.indent1{ padding:0 12px 0 0;}
.indent2{
padding-top: 5;
padding-right: 0;
padding-bottom:5;
padding-left: 15px;
}
.indent3{
padding:0px 0 0 0px;
}
.indent4{ padding:21px 23px 0 0;}
.indent5{
padding:23px 23px 5px 0;
overflow: hidden;
}
/* ============================= fonts ====================== */
.SmallStyledFontDark {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333;
}

.SmallStyledFontLight {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #999;
}
/* ============================= Titles ====================== */
.MedStyledFontDark {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333;
}
.ProductPrefix{
color:#524143;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
}
.titleSub{
font-size: 1em;
font-weight: bolder;
color: #333;
padding: 0px;
font-variant: normal;
font-style: italic;
text-transform: capitalize;
font-family: Verdana, Geneva, sans-serif;
line-height: 1.5em;
}

.AttentionWebmaster {
font-size: 15px;
line-height: 25px;
font-weight: bold;
color: #F00;
}
/* ============================= images ====================== */
.img-box1 img { float:left; margin:0 5px 0 0;}


.img-boxR { width:100%; overflow:hidden;}
.img-boxR img { float:right; margin:0 5px 0 0;}
.imgFLeft{
padding:1px;
float: left;
margin-right: 5px;
}

.imgBev{
border:2px solid #CCC;
padding:1px;
background-color: #999;
}
.imgBevFLeft{
border:2px solid #CCC;
padding:1px;
background-color: #999;
float: left;
margin-right: 5px;
}
.imgBevFRight{
border:2px solid #CCC;
padding:1px;
background-color: #999;
float: right;
margin-left: 5px;
text-align: right;
clear: both;
}
/* ============================= boxes ====================== */
.TitleboxSearch{
color:#524143;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}

#resultsBox {
width: 375px;
padding:15px;
border:2px solid #CCC;
}

/* ============================= Titles ====================== */

.Updated {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 10px;
text-align: right;
clear:both;
}
/* ============================= links ====================== */
.linkarrow{
color:#9f1b19;
padding-left:15px;
background-position:0 5px;
text-decoration:none;
font-weight: normal;
font-size: 11px;
background-image: url(images/marker.gif);
background-repeat: no-repeat;
}
.linkHoverUnderline:hover{text-decoration:underline }
/* ============================= Custom for CroixComposites.com ====================== */
#BrownBar {
font-size: 14px;
line-height: 20px;
font-weight: bold;
color: #FFF;
background-color: #510000;
width: 375px;
height: 30px;
text-indent: 15px;
}
.StCroixBar {
font-size: 14px;
line-height: 20px;
font-weight: bold;
color: #FFF;
background-color: #099;
height: 30px;
}
.CustomDarkBrown {
font-size: 14px;
line-height: 30px;
font-weight: bold;
color: #FFF;
background-color: #302012;
width: 245px;
height: 30px;
text-indent: 15px;
}
#linkCroix {
color:#B8D5D3;
padding-left:75px;
background-position:18px 1px;
font-weight: normal;
font-size: 11px;
background-image: url(images/CVC_CroixIcons.gif);
background-repeat: no-repeat;
line-height: 20px;
background-color: #B8D5D3;
width: 160px;
border: thin groove #408080;
font-family: Verdana, Geneva, sans-serif;
}
a.croix:link {
color:#244848;
text-decoration: none;
}
a.croix:visited {
color:#DF7B1D;
}
a.croix:hover {
color:#009591;
text-decoration: underline;
}
#linkCustom {
color:#885939;
padding-left:75px;
font-weight: normal;
font-size: 11px;
background-image: url(images/HoldingPencil25t.gif);
background-position:12px 2px;
background-repeat: no-repeat;
line-height: 20px;
background-color: #CB8736;
width: 160px;
border: thin groove #B95C00;
font-family: Verdana, Geneva, sans-serif;
}
a.custom:link {
color:#F0E297;
text-decoration: none;
}
a.custom:visited {
color:#DF7B1D;
}
a.custom:hover {
color:#FFC;
text-decoration: underline;
}
#linkWild{
color:#7F5735;
padding-left:75px;
background-position:15px 2px;
font-weight: normal;
font-size: 11px;
background-image: url(images/CVCWildernessIcons.gif);
background-repeat: no-repeat;
line-height: 20px;
background-color: #865535;
width: 160px;
border: thin groove #408080;
font-family: Verdana, Geneva, sans-serif;
}
a.wild:link {
color:#F0E297;
text-decoration: none;
}
a.wild:visited {
color:#DF7B1D;
}
a.wild:hover {
color:#FFC;
text-decoration: underline;
}


a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
.bgBlack {
background-color: #000;
padding: 5px;
}
#paddingLeft {
padding-left: 20px;
}

for each style you wish to add, you need to reformat it to the format expected by the script, for instance:
.line{ padding:23px 0 1px 0;}

would need to be changed to:

{name:'Line',element:'span',attributes:{'class':'line' }},



see this page for more details:
Styles