close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Help adding own stylesheet

Thread began 4/17/2011 6:52 pm by mds119803 | Last modified 5/05/2011 11:30 am by Jason Byrnes | 1135 views | 4 replies |

mds119803

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

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

alistair316863

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

Sign in to reply to this post

info271221

Custom Styles in PowerCMS

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;
}

Sign in to reply to this post

Jason ByrnesWebAssist

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

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...