WYSIWYG installation help

Hangin' Around Joined: Nov 29, 2005 Posts: 47

Hi guys,
I'm currently using the latest Raven Distro & hats off to Raven for a fine piece of work.

The one problem I'm having is the installation of the WYSIWYG editor.
I'm a HTML n00b & this will be a god send for me as I only know very basic html code.

In the installation Readme steps 1-3 are already done but the daunting part for me seems to be using either part 4 or 5.

Step 4 seems the easiest as it seems to be only an extra line of code but which modules/files do I need to alter?Id it just the index file for each module I choose?

I mainly just post Message/News items on the front page as announcements & using HTML there would be ideal. Also, I'm the only Admin of the site & wouldn't want anyone else (e.g public) using it so it's only for my use.

What areas/modules can be altered to include the WYSIWYG editor?

Thanks for any help Wink

Posted: Sun Jul 23, 2006 8:09 am

I think the wysiwyg editor already has a modified index.php for the news modules!

Posted: Sun Jul 23, 2006 8:26 am

Thanks, I'll take a look.

It's the other modules & how they are added in which is of concern. Scripting,programming etc just isn't my forte Very Happy

Posted: Sun Jul 23, 2006 10:20 am

Sorted....to a point...lol.

I get the editor & it edits the message/news in the editor fine BUT....

When the message is previewed or submitted for displaying in Home the sizing doesn't work, only the colouration.

Here's how it looks in the Editor:

Here's the what it looks on Home page:

I presume it's a theme issue & the theme is MS-Trenches. But why it's not working is beyond me. Any help really appreciated. Very Happy

Posted: Sun Jul 23, 2006 11:21 am

It looks like the STYLE is being over written by the them, kguske is the best one to ask about wysiwyg issues but I think there is another post related to this somewhere.

registered · Site Admin Joined: Jun 04, 2004 Posts: 6437

That is correct, the theme is overriding the CSS. You can get around that by specifying a class and / or by adding a class to your style.css.

Posted: Sun Jul 23, 2006 3:52 pm

Thanks for the info.

Excuse me for not really knowing how to specify or add a class to the style.css so if one of you helpful guys can help me out I'd really appreciate it.

I don't mind dabbling but php isn't a speciality of mine.

Thanks again for the help, both of you. Smile

Posted: Sun Jul 23, 2006 3:57 pm

Great, because there is no php involved - only CSS. Check for a style.css file in your theme directory and note what classes are defined. You can specify those when you create HTML, or you can create new ones. Of course, it helps to understand CSS, but there are some simple tutorials for that.

Posted: Sun Jul 23, 2006 4:00 pm

http://www.w3schools.com/

Just a bit of light reading with some EXCELLENT tutorials.

Posted: Sun Jul 23, 2006 4:05 pm

Thanks, I'll take a look at the website, looks great & possibly what I need to enlighten myself. Laughing

Put of interest, this is the style.css for the MS-Trenches theme:

Code:

FONT   {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}


TD      {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}


BODY   {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}


P      {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}


DIV      {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}








hr{border: 0px solid #4A473F;border-top-width:1px;height:0px}





.title        {BACKGROUND: none; COLOR: #A7A58F; FONT-SIZE: 14px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.content     {BACKGROUND: none; COLOR: #D0CEB8; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica}


.block-title     {BACKGROUND: none; COLOR: #A7A58F; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica}


.storytitle      {BACKGROUND: none; COLOR: #A7A58F; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.storycat    {BACKGROUND: none; COLOR: #A7A58F; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}


.boxtitle     {BACKGROUND: none; COLOR: #A7A58F; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.boxcontent      {BACKGROUND: none; COLOR: #D0CEB8; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica}


.option     {BACKGROUND: none; COLOR: #D0CEB8; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.tiny       {BACKGROUND: none; COLOR: #D0CEB8; FONT-SIZE: 10px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.small       {BACKGROUND: none; COLOR: #D0CEB8; FONT-SIZE: 9px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.storycontent     {BACKGROUND: none; COLOR: #D0CEB8; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica}





/*


  The original MSTrenches Theme for phpBB version 2+


  Created by Matt Sims


  http://phpbb.evilmerc.com


  Ported for PHP-Nuke by mikem


  http://www.nukemods.com


*/








 /* General page style. The scroll bar colours only visible in IE5.5+ */


body {


   background-color: #77746C;


   SCROLLBAR-FACE-COLOR: #615F55; 


   SCROLLBAR-HIGHLIGHT-COLOR: #ABA99D; 


   SCROLLBAR-SHADOW-COLOR: #ABA99D; 


   SCROLLBAR-3DLIGHT-COLOR: #312F29; 


   SCROLLBAR-ARROW-COLOR: #B4B29A; 


   SCROLLBAR-TRACK-COLOR: #6D6A64; 


   SCROLLBAR-DARKSHADOW-COLOR: #312F29


}





/* General font families for common tags */


font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }


a:link,a:active,a:visited { color : #A7A58F; }


a:hover      { text-decoration: underline; color : #D0CEB8; }


hr   { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}








/* This is the border line & background colour round the entire page */


.bodyline   { background-color: #77746C; border: 0px #98AAB1 solid; background-image: url(images/brown_bg.jpg);}





/* This is the outline round the main forum tables */


.forumline   { background-color: #4A473F; border: 1px #4A473F solid; }








/* Main table cell colours and backgrounds */


td.row1   { background-color: #6D6A64; }


td.row2   { background-color: #6D6A64; }


td.row3   { background-color: #6D6A64; }








/*


  This is for the table cell above the Topics, Post & Last posts on the index.php page


  By default this is the fading out gradiated silver background.


  However, you could replace this with a bitmap specific for each forum


*/


td.rowpic {


      background-color: #4A473F;


      background-image: url(images/cellpic2.gif);


}





/* Header cells - the blue and silver gradient backgrounds */


th   {


   color: #D0CEB8; font-size: 11px; font-weight : bold;


   background-color: #4A473F; height: 25px;


   background-image: url(images/cellpic3.gif);


}





td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {


         background-image: url(images/cellpic1.gif);


         background-color:#4A473F; border: #4A473F; border-style: solid; height: 28px;


}








/*


  Setting additional nice inner borders for the main table cells.


  The names indicate which sides the border will be on.


  Don't worry if you don't understand this, just ignore it :-)


*/


td.cat,td.catHead,td.catBottom {


   height: 29px;


   border-width: 0px 0px 0px 0px;


}


th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {


   font-weight: bold; border: #4A473F; border-style: solid; height: 28px; }


td.row3Right,td.spaceRow {


   background-color: #6D6A64; border: #4A473F; border-style: solid; }





th.thHead,td.catHead { font-size: 12px; border-width: 0px 0px 0px 0px; }


th.thSides,td.catSides,td.spaceRow    { border-width: 0px 0px 0px 0px; }


th.thRight,td.catRight,td.row3Right    { border-width: 0px 0px 0px 0px; }


th.thLeft,td.catLeft     { border-width: 0px 0px 0px 0px; }


th.thBottom,td.catBottom  { border-width: 0px 0px 0px 0px; }


th.thTop    { border-width: 0px 0px 0px 0px; }


th.thCornerL { border-width: 0px 0px 0px 0px; }


th.thCornerR { border-width: 0px 0px 0px 0px; }








/* The largest text used in the index page title and toptic title etc. */


.maintitle,h1,h2   {


         font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;


         text-decoration: none; line-height : 120%; color : #000000;


}








/* General text */


.gen { font-size : 12px; }


.genmed { font-size : 11px; }


.gensmall { font-size : 10px; }


.gen,.genmed,.gensmall { color : #D0CEB8; }


a.gen,a.genmed,a.gensmall { color: #A7A58F; text-decoration: none; }


a.gen:hover,a.genmed:hover,a.gensmall:hover   { color: #D0CEB8; text-decoration: underline; }








/* The register, login, search etc links at the top of the page */


.mainmenu      { font-size : 11px; color : #D0CEB8 }


a.mainmenu      { text-decoration: none; color : #A7A58F;  }


a.mainmenu:hover{ text-decoration: underline; color : #D0CEB8; }








/* Forum category titles */


.cattitle      { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #A7A58F}


a.cattitle      { text-decoration: none; color : #A7A58F; }


a.cattitle:hover{ text-decoration: underline; }








/* Forum title: Text and link to the forums used in: index.php */


.forumlink      { font-weight: bold; font-size: 12px; color : #A7A58F; }


a.forumlink    { text-decoration: none; color : #A7A58F; }


a.forumlink:hover{ text-decoration: underline; color : #D0CEB8; }








/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */


.nav         { font-weight: bold; font-size: 11px; color : #D0CEB8;}


a.nav         { text-decoration: none; color : #A7A58F; }


a.nav:hover      { text-decoration: underline; }








/* titles for the topics: could specify viewed link colour too */


.topictitle         { font-weight: bold; font-size: 11px; color : #D0CEB8; }


a.topictitle:link   { text-decoration: none; color : #A7A58F; }


a.topictitle:visited { text-decoration: none; color : #A7A58F; }


a.topictitle:hover   { text-decoration: underline; color : #D0CEB8; }








/* Name of poster in viewmsg.php and viewtopic.php and other places */


.name         { font-size : 11px; color : #D0CEB8;}





/* Location, number of posts, post date etc */


.postdetails      { font-size : 10px; color : #D0CEB8; }








/* The content of the posts (body of text) */


.postbody { font-size : 12px;}


a.postlink:link   { text-decoration: none; color : #A7A58F }


a.postlink:visited { text-decoration: none; color : #A7A58F; }


a.postlink:hover { text-decoration: underline; color : #D0CEB8}








/* Quote & Code blocks */


.code {


   font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #000000;


   background-color: #625F59; border: #4A473F; border-style: solid;


   border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px


}





.quote {


   font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #D0CEB8 line-height: 125%;


   background-color: #625F59; border: #4A473F; border-style: solid;


   border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px


}








/* Copyright and bottom info */


.copyright      { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #D0CEB8; letter-spacing: -1px;}


a.copyright      { color: #A7A58F; text-decoration: none;}


a.copyright:hover { color: #D0CEB8; text-decoration: underline;}








/* Matt Sims Copyright */


.mattsims      { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #D0CEB8; letter-spacing: -1px;}


a.mattsims      { color: #A7A58F; text-decoration: none;}


a.mattsims:hover { color: #D0CEB8; text-decoration: underline;}








/* Form elements */


input,textarea, select {


   color : #D0CEB8;;


   font: normal 11px Verdana, Arial, Helvetica, sans-serif;


   border-color : #000000;


   background-color : #77746C;


}





/* The text input fields background colour */


input.post, textarea.post, select {


   background-color : #77746C;


   background-image: url(images/posting_bg.jpg);


   background-repeat: repeat-x;


   background-attachment: fixed;





}





input { text-indent : 2px; }





/* The buttons used for bbCode styling in message post */


input.button {


   background-color : #77746C;


   color : #D0CEB8;


   font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color : #D0CEB8;


   background-image: url(images/button_bg.gif);


}





/* The main submit button option */


input.mainoption {


   background-color : #77746C;


   font-weight : bold; color : #D0CEB8;


   background-image: url(images/button_bg.gif);


}





/* None-bold submit button */


input.liteoption {


   background-color : #77746C;


   font-weight : normal;  color : #D0CEB8;


   background-image: url(images/button_bg.gif);


}





/* This is the line in the posting page which shows the rollover


  help line. This is actually a text box, but if set to be the same


  colour as the background no one will know ;)


*/


.helpline { background-color: #77746C; border-style: none; }








/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */


@import url("formIE.css");

Without knowing I'd guess-timate that the classes are the sizes of fonts, fonts, etc or am I completely off track?

I'm sure someone will point out to RTFM in a minute...lol.

Thanks again. Very Happy

Posted: Sun Jul 23, 2006 4:10 pm

Gazanimal, yes, but it can do even more than that.

darklord, you read my mind!

Posted: Thu Jul 27, 2006 1:41 pm

Ok, I've had a look & can't seem to get my head around specifying a class etc.

Anyone care to show me or tell me in laymans terms how to do it as I like the WYSIWYG editor but can't get it to bypass the theme as such.

Thanks again.

Posted: Thu Jul 27, 2006 1:43 pm

Unfortunately, it isn't a simple subject. In addition to darklord's reference, you might also wish to look at Nuke theme sites for discussions on that subject. Try http://jaded-designs.com.

Posted: Thu Jul 27, 2006 1:47 pm

Thanks, will see what I can find

Posted: Thu Jul 27, 2006 2:02 pm

ohh boy, I wrote all this out and it says page cant be displayed Laughing

Here it goes again.

.content {BACKGROUND: none; COLOR: #D0CEB8; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica}

content is a class without a parameter(no html specs needed to make it work)

if we took that and made your text look the way we would like, try this
.largetext {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 20px; FONT-FAMILY: Verdana, Helvetica}

Then alter the html to read
<font class=largetext>text</font>
Because we didnt declare a parameter, You can use this in anything that can have a class defined with it, such as table.

class dismissed(pun intended) killing me

Posted: Thu Jul 27, 2006 2:03 pm

I made up the largetext so dont think I got that from somewhere, Its whatever you set it to.

Theme Guru Joined: Nov 01, 2003 Posts: 1006

I have fixed this for him.

Posted: Thu Jul 27, 2006 4:51 pm

Total star!

Thanks Jaded I owe you one. Very Happy

Posted: Thu Jul 27, 2006 6:02 pm

Thanks, jaded! I knew you could help...

Posted: Fri Jul 28, 2006 2:50 am

Why is it some parts work fine in Firefox, yet other parts don`t?

Adding some content pages & in Firefox the colours aren`t working but in Internet Explorer they show up fine.

Firefox displays the colours fine on the home page but not in the Content pages....bloody browsers...lol.

Posted: Fri Jul 28, 2006 2:58 am

IE is a bit more easy on display and code, FF demands that it all be perfect.

Jaded is the person who has helped you thus far with this and you should ask her to take a look once more.

Posted: Fri Jul 28, 2006 3:02 am

Thanks, I emailed her to let her now the problem after she'd solved the editor, just didn't want to push my luck asking for anymore help. Confused