The Joomla! Forum ™

Download

Demo


Board index » Joomla! Older Version Support » Joomla! 1.0 » Extensions - 1.0.x » WYSIWYG Editors - 1.0.x

Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.



Post new topic Reply to topic  Page 1 of 2
  [ 38 posts ]  Go to page 1, 2  Next
  Print view Previous topic | Next topic 
Author Message
Gem
 Post subject: WYSIWG CSS problem
PostPosted: Mon Mar 27, 2006 12:39 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Mar 20, 2006 7:07 pm
Posts: 31
The background (text entry area) of the WYSIWG editor on my joomla install is the same dark grey as the body of my site, has anyone got any suggestions as to how i can make it white/light grey again so that I can actually see whats being typed?

I could start playing about with CSS I suppose, (setting default color values for .input etc) but I am not even sure if the wysiwg editor uses that or creates its own applet style gui.  Infact, I dont even know if I should change the css in my template folder or somewhere else.  Spot the n00b! ;) 

Any suggestions guys?
Top
 Profile  
 
Andrew998
 Post subject: Re: WYSIWG CSS problem
PostPosted: Mon Mar 27, 2006 12:53 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Tue Jan 17, 2006 1:09 pm
Posts: 429
Location: London, UK
Well the clue is in the name WYSIWYG! Yes, the editor is using the CSS for your site. You could change the CSS but that would change the site too. Depending on which editor you ar using you can overide the standard CSS with another one. Another option is to put a contrasting text colour in your CSS.

_________________
Andrew998
http://www.inchhosting.co.uk - Website Design and Hosting
Top
 Profile  
 
Gem
 Post subject: Re: WYSIWG CSS problem
PostPosted: Mon Mar 27, 2006 1:25 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Mar 20, 2006 7:07 pm
Posts: 31
I know, but it is rather strange having to type into an almost black input box I think you will agree.  A good compromise would be a #CCCCCC color so that its possible to see both light & dark text.  At the moment its nearly impossible to use because the text defaults to black when typing. However the default front end text is output within the body as white so when its published it looks fine on the front end.

FYI.. I am using the TinyMCE editor.  I have tried inserting extra CSS into my applied template like below but it has no effect.  I have found 3 css files within the tinymce and changing all of them has no effect either.  Its quite confusing really. 

Code:
input
{
color: #CCCCCC;
background: #CCCCCC;
border: 1px solid #000000;
}
Top
 Profile  
 
Andrew998
 Post subject: Re: WYSIWG CSS problem
PostPosted: Mon Mar 27, 2006 1:35 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Tue Jan 17, 2006 1:09 pm
Posts: 429
Location: London, UK
Can I suggest you try JCE. I find it the best editor and it is nice and eay to apply a seperate CSS template to it.

_________________
Andrew998
http://www.inchhosting.co.uk - Website Design and Hosting
Top
 Profile  
 
jxl
 Post subject: Re: WYSIWG CSS problem
PostPosted: Mon Mar 27, 2006 2:48 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Dec 21, 2005 10:32 pm
Posts: 650
If we could get anyone to check this post for accuracy, it would be great if a moderator would make this a Sticky. This question and related questions are posted in the forum many, many times. 

TINYmce is a very fine editor.  It works very well.  There is a field entry in the Joomla administrator to specify a CSS file.  It's a great way to handle this.

Make a new CSS file called edidtor_content.css.  In this file, put the body background color you want, and any styles you want to be able to assign within content items.  Make sure you only use styles that are available in your actual site template. Place it in your template CSS folder.  This has the advantage of allowing you to use the WYSIWYG interface to assign classes from a TINYmce dropdown, and if you only put the classes you want people to be able to use into the editor_content.css, you don't have a lot of extra classes to wade through. Also, other people with editing permissions won't have inappropriate class choices which can mess up your intended site design.

If the editor_content.css stylesheet does not automatically get used by TINYmce (it's supposed to but doesn't always), do the following:

1) open up your back-end.
2) Go to Mambot/Site Mambots
3) Open  TinyMCE WYSIWYG Editor (click on the name or use the check box and click "Edit")
4) On the right you will see a section called "Parameters".  The tenth parameter down is "Custom CSS Classes"
5) Enter the FULL URL to your editor_content.css file into the "Custom CSS Classes" text box.

In a little while, I will post a sample editor_content.css file


Last edited by jxl on Mon Mar 27, 2006 3:21 pm, edited 1 time in total.

Top
 Profile  
 
jxl
 Post subject: Re: WYSIWG CSS problem
PostPosted: Mon Mar 27, 2006 3:16 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Dec 21, 2005 10:32 pm
Posts: 650
OK,
Here is a sample editor_content.css file.

Code:
/* CSS Document */

/* Editor Assigned Styles */
/*make sure that any styles you put here also exist
in your template_css.css file or they will have no
effect in the front end */

p.rightalign {
  text-align: right;
}

.red {
  color: #c00;
}

.green {
  color: #0c0;
}

.highlight {
   background-color: Yellow;
   color: Blue;
   padding: 0;
}
p.code {
   background-color: #ddd;
   border: 1px solid #bbb;
}

.small {
   color: #999999;
   font-size: 10px;
}

/* Body Tag for Background Color and Font Specs.  */

body {
   font-family: Arial, Helvetica, Sans Serif;
   font-size: 12px;
   color: #333333;
   background: #ffffff;
}

/* Optional Basic Stuff you can use to make everything look like it does on the site itself */
/* you can get this stuff right out of your template_css.css file, or you can just leave it out */

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 16px;
padding-left: 16px;
padding-top: 0px;
background-image: url(../images/arrow.png); /* use the real image path that you have on your site. An absolute path is OK */
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
   text-align: left;
   font-size: 12px;
}

a, a:link, a:visited {
   color: #c64934; text-decoration: none;
   font-weight: bold;
}

a:hover {
   color: #900;   text-decoration: none;
   font-weight: bold;
}
Top
 Profile  
 
Andrew998
 Post subject: Re: WYSIWG CSS problem
PostPosted: Mon Mar 27, 2006 6:19 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Tue Jan 17, 2006 1:09 pm
Posts: 429
Location: London, UK
jxl wrote:
Make sure you only use styles that are available in your actual site template. Place it in your template CSS folder.  This has the advantage of allowing you to use the WYSIWYG interface to assign classes from a TINYmce dropdown, and if you only put the classes you want people to be able to use into the editor_content.css, you don't have a lot of extra classes to wade through.



For people reading this post I would suggest this is a key learning point. It took me a while to work out that you should use a subset of your default styles. Once I knew about this it made life much easier for my users because, as you say, they don't have to wade through the other classes.

_________________
Andrew998
http://www.inchhosting.co.uk - Website Design and Hosting
Top
 Profile  
 
Gem
 Post subject: Re: WYSIWG CSS problem
PostPosted: Tue Mar 28, 2006 12:00 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Mar 20, 2006 7:07 pm
Posts: 31
Thanks guys, I appriciate all the help with this.  I will try this solution out tomorrow and get back with any feedbacl.  For now, its well past bed time here in Ireland :) 

Until then...
Top
 Profile  
 
Gem
 Post subject: Re: WYSIWG CSS problem
PostPosted: Wed Mar 29, 2006 8:26 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Mar 20, 2006 7:07 pm
Posts: 31
JXL,

I just tried what you suggested and it works like an absolute charm :)  Thanks a lot for taking the time to help me with this problem.  Hopefully this thread can help someone else who may have this problem.

Gem
Top
 Profile  
 
jxl
 Post subject: Re: WYSIWG CSS problem
PostPosted: Wed Mar 29, 2006 9:25 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Dec 21, 2005 10:32 pm
Posts: 650
I'm glad you got it working!
Top
 Profile  
 
Haribo85
 Post subject: Re: WYSIWG CSS problem
PostPosted: Thu Mar 30, 2006 9:00 am 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Aug 19, 2005 2:09 pm
Posts: 306
Location: UK
Hi,

Im using JCE and trying to use a custom editor but not having much luck.

I have tried using both the full URL and relative URL and neither have worked, here are my settings, and also the file within the directory.

Does anyone have any ideas?
Thanks


You do not have the required permissions to view the files attached to this post.

_________________
Please visit our site for any Joomla! related hosting/design needs you may have. Also other IT Support including Web 2.0, Technology Reports, Email Hosting, Forum Hosting.

http://www.bitservices.co.uk
Top
 Profile  
 
Andrew998
 Post subject: Re: WYSIWG CSS problem
PostPosted: Thu Mar 30, 2006 9:57 am 
Joomla! Explorer
Joomla! Explorer

Joined: Tue Jan 17, 2006 1:09 pm
Posts: 429
Location: London, UK
I'm not entirely sure I understand your question but if you are trying to assign a different template to JCE then you should put the template in the css directory of the template you are using and just name it without a path.

_________________
Andrew998
http://www.inchhosting.co.uk - Website Design and Hosting
Top
 Profile  
 
Haribo85
 Post subject: Re: WYSIWG CSS problem
PostPosted: Thu Mar 30, 2006 10:03 am 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Aug 19, 2005 2:09 pm
Posts: 306
Location: UK
Yes im trying to assign it, but it is not working. It is not picking up the custom template.

_________________
Please visit our site for any Joomla! related hosting/design needs you may have. Also other IT Support including Web 2.0, Technology Reports, Email Hosting, Forum Hosting.

http://www.bitservices.co.uk
Top
 Profile  
 
Andrew998
 Post subject: Re: WYSIWG CSS problem
PostPosted: Thu Mar 30, 2006 10:09 am 
Joomla! Explorer
Joomla! Explorer

Joined: Tue Jan 17, 2006 1:09 pm
Posts: 429
Location: London, UK
Your screenshot shows template/css and that isn't correct. It needs to be template/template_I'm_using/CSS. Is that the problem?

_________________
Andrew998
http://www.inchhosting.co.uk - Website Design and Hosting
Top
 Profile  
 
Haribo85
 Post subject: Re: WYSIWG CSS problem
PostPosted: Thu Mar 30, 2006 10:32 am 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Aug 19, 2005 2:09 pm
Posts: 306
Location: UK
Hi,

Well I changed the location of the CSS files so my 2 templates share the same one, which is in the templates folder. This works in the frontend and the CSS is applied to the content.

_________________
Please visit our site for any Joomla! related hosting/design needs you may have. Also other IT Support including Web 2.0, Technology Reports, Email Hosting, Forum Hosting.

http://www.bitservices.co.uk
Top
 Profile  
 
jxl
 Post subject: Re: WYSIWG CSS problem
PostPosted: Thu Mar 30, 2006 11:40 am 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Dec 21, 2005 10:32 pm
Posts: 650
It looks like your site is hosted on your local machine, Is that the case?
If so...
The editor_content.css file requires either it be placed in the default location, or that the absolute path be given in the parameters.  My guess, and it is only a guess, is that it is having trouble interpreting the absolute path on your local machine, or that there is a typo or other mistake in your path.  To check this out, you could try posting the css file to the web and eterinng the path to that (like so: http://mytestdomain.com/testfolder/editor_content.css )

Sorry I don't have any better ideas.
Top
 Profile  
 
Haribo85
 Post subject: Re: WYSIWG CSS problem
PostPosted: Thu Mar 30, 2006 12:40 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Aug 19, 2005 2:09 pm
Posts: 306
Location: UK
Yes the site is on a local machine.

I have tried using the absolute path but that still does not work. I have tested the path in IE, put the address in to go to the CSS page and copyied and pasted that, but this address still does not work.

_________________
Please visit our site for any Joomla! related hosting/design needs you may have. Also other IT Support including Web 2.0, Technology Reports, Email Hosting, Forum Hosting.

http://www.bitservices.co.uk
Top
 Profile  
 
happy_noodle_boy
 Post subject: Re: WYSIWG CSS problem
PostPosted: Thu Mar 30, 2006 1:43 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Thu Aug 18, 2005 10:32 am
Posts: 691
Location: United Kingdom
The new version of JCE (1.0.4)  just requires the name of the alternate css file, not the whole path. This file must reside in the same folder as your template css.

_________________
just because you're not paranoid, doesn't mean everybody isn't out to get you.
http://www.maketradefair.org
Top
 Profile  
 
Haribo85
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 8:05 am 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Aug 19, 2005 2:09 pm
Posts: 306
Location: UK
happy_noodle_boy,

I have tried putting the file in the same place as my template.css file, but the editor is not picking it up at all.

Do you have any other ideas? I have checked, and doubled checked that I am using the right file name. I am just using the file name like you said, but I have also tried an absolute path, but still doesnt work.

Thanks

_________________
Please visit our site for any Joomla! related hosting/design needs you may have. Also other IT Support including Web 2.0, Technology Reports, Email Hosting, Forum Hosting.

http://www.bitservices.co.uk
Top
 Profile  
 
happy_noodle_boy
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 8:26 am 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Thu Aug 18, 2005 10:32 am
Posts: 691
Location: United Kingdom
Show me the source of the page with the editor loaded, just the top part like this:

Code:
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>joomlatest - Administration [Joomla]</title>
<link rel="stylesheet" href="templates/joomla_admin/css/template_css.css" type="text/css" />
<link rel="stylesheet" href="templates/joomla_admin/css/theme.css" type="text/css" />
<script language="JavaScript" src="http://localhost/joomla/includes/js/JSCookMenu_mini.js" type="text/javascript"></script>
<script language="JavaScript" src="http://localhost/joomla/administrator/includes/js/ThemeOffice/theme.js" type="text/javascript"></script>
<script language="JavaScript" src="http://localhost/joomla/includes/js/joomla.javascript.js" type="text/javascript"></script>
<!--//TinyMCE/MosCE-->
<script type="text/javascript" src="http://localhost/joomla/mambots/editors/jce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="http://localhost/joomla/mambots/editors/jce/jscripts/tiny_mce/jce_functions.js"></script>

<script type="text/javascript">
        var url = document.location.href;
        var site_url = "http://localhost/joomla";
        url = url.replace(site_url, '', 'g');
        if( url.match( 'administrator', 'g' ) ) site_url = site_url+'/administrator';
        var convert_urls = true;
        tinyMCE.init({
                site : site_url,
                jbase : site_url,
                document_base_url: "http://localhost/joomla/",
                theme : "advanced",
                language : "en",
                lang_list : "en",
                width : "500",
                height : "600",
                mode : "specific_textareas",
                browsers : "msie,safari,gecko,opera",
                event_elements : "td,img,a",
                relative_urls : false,
                remove_script_host : false,
                auto_reset_designmode : true,
                apply_source_formatting : true,
                save_callback : "JCESave",
                entity_encoding : "named",
                content_css : "http://localhost/joomla/templates/madeyourweb/css/editor_content.css",
                theme_advanced_source_editor_height : "550",
              theme_advanced_source_editor_width : "750",
                plugin_preview_width : "750",
                plugin_preview_height : "550",
                //Paste Options
                paste_create_paragraphs : false,
                paste_create_linebreaks : false,
                paste_use_dialog : false,
                paste_auto_cleanup_on_paste : false,
                paste_strip_class_attributes : "all",
                paste_remove_spans : true,
                paste_remove_styles : true,
                //
                convert_fonts_to_spans : true,
                font_size_style_values : "8pt,10pt,12pt,14pt,18pt,24pt,36pt",
                table_inline_editing : false,
                invalid_elements: "applet",
              force_br_newlines : false,
              force_p_newlines : true,
                directionality : "ltr",
                theme_advanced_layout_manager : "SimpleLayout",
                theme_advanced_toolbar_location : "top",
                theme_advanced_statusbar_location : "bottom",
                theme_advanced_disable : "contextmenu",
                theme_advanced_buttons1 : "undo,redo,help,newdocument,bold,italic,underline,bullist,numlist,outdent,indent,strikethrough,code,removeformat,cut,copy,paste,pasteword,pastetext,search,replace",
                theme_advanced_buttons2 : "hr,sub,sup,justifyright,justifycenter,justifyleft,justifyfull,anchor,link,unlink,tablecontrols",
                theme_advanced_buttons3 : "styleselect,fontselect,fontsizeselect,forecolor,backcolor,charmap,visualaid,formatselect,ltr,rtl",
                theme_advanced_buttons4 : "mosimage,mospagebreak,mediamanager,templates,imgmanagerlite,iframe,imgmanager,filemanager,preview,print,emotions,fullscreen",
                plugins : "directionality,emotions,fullscreen,paste,preview,table,print,searchreplace,advlink,imgmanager,filemanager,iframe,imgmanagerlite,templates,mediamanager,joomla",
                extended_valid_elements : ""
        });

_________________
just because you're not paranoid, doesn't mean everybody isn't out to get you.
http://www.maketradefair.org
Top
 Profile  
 
Haribo85
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 9:20 am 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Aug 19, 2005 2:09 pm
Posts: 306
Location: UK
Hi,

Thanks for the reply. I have just looked at the source and I can see the problem.

I have not got the CSS directory within each template, I have one folder with CSS in the root of the templates directory.

From looking at the source code it looks like the absolute address is using the default template and then looking for my CSS folder within there like this:

content_css : "http://172.20.40.40/test/templates/right_column/css/editor_content.css",

Whereas it should read:

content_css : "http://172.20.40.40/test/templates/css/editor_content.css",

I cannot use an absolute value because it still adds http://172.20.40.40/test/templates/right_column/css/ every time.

Can you give me a workaround please?

Thanks

_________________
Please visit our site for any Joomla! related hosting/design needs you may have. Also other IT Support including Web 2.0, Technology Reports, Email Hosting, Forum Hosting.

http://www.bitservices.co.uk
Top
 Profile  
 
Andrew998
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 9:37 am 
Joomla! Explorer
Joomla! Explorer

Joined: Tue Jan 17, 2006 1:09 pm
Posts: 429
Location: London, UK
Put a copy of the css in http://172.20.40.40/test/templates/right_column/css/!

_________________
Andrew998
http://www.inchhosting.co.uk - Website Design and Hosting
Top
 Profile  
 
Haribo85
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 9:40 am 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Aug 19, 2005 2:09 pm
Posts: 306
Location: UK
I would rather it reside with the other css file like it should do.

_________________
Please visit our site for any Joomla! related hosting/design needs you may have. Also other IT Support including Web 2.0, Technology Reports, Email Hosting, Forum Hosting.

http://www.bitservices.co.uk
Top
 Profile  
 
Andrew998
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 9:43 am 
Joomla! Explorer
Joomla! Explorer

Joined: Tue Jan 17, 2006 1:09 pm
Posts: 429
Location: London, UK
You asked for a work round.

Actually the CSS files do usually reside below the template they apply to anyway.

_________________
Andrew998
http://www.inchhosting.co.uk - Website Design and Hosting
Top
 Profile  
 
Haribo85
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 9:53 am 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Aug 19, 2005 2:09 pm
Posts: 306
Location: UK
I know they usually reside below the templates they apply to.

When I said "like they should do", I meant per happy_noodle_boy's instructions within the Mambot. When you hover over the text help option it says "This file MUST be located in the same folder as your template CSS file" which is what I have done.

_________________
Please visit our site for any Joomla! related hosting/design needs you may have. Also other IT Support including Web 2.0, Technology Reports, Email Hosting, Forum Hosting.

http://www.bitservices.co.uk
Top
 Profile  
 
jxl
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 2:40 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Dec 21, 2005 10:32 pm
Posts: 650
They are assuming that the template css file is in the right place.  The right place for that is in the individual template's css folder not the overall template css folder.
Top
 Profile  
 
Haribo85
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 3:27 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Aug 19, 2005 2:09 pm
Posts: 306
Location: UK
Why is the right place in the individual templates folder?

_________________
Please visit our site for any Joomla! related hosting/design needs you may have. Also other IT Support including Web 2.0, Technology Reports, Email Hosting, Forum Hosting.

http://www.bitservices.co.uk
Top
 Profile  
 
Andrew998
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 3:33 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Tue Jan 17, 2006 1:09 pm
Posts: 429
Location: London, UK
Because that is how Joomla works. Why would you not position the stylesheet with the template!

_________________
Andrew998
http://www.inchhosting.co.uk - Website Design and Hosting
Top
 Profile  
 
jxl
 Post subject: Re: WYSIWG CSS problem
PostPosted: Fri Mar 31, 2006 3:56 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Dec 21, 2005 10:32 pm
Posts: 650
The stylesheet is part of the template. If you define classes and areas differently in yout template index, set the sizes up differently, use different images in your template, etc., you need different css styles. You should keep your stylesheet with the index.php and images that it goes with.
Top
 Profile  
 
puthupa
 Post subject: Re: WYSIWG CSS problem
PostPosted: Tue Sep 26, 2006 2:45 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Aug 11, 2006 3:42 pm
Posts: 41
Location: ny, ny
setting 'Template CSS classes' to 'No' works nicely too if all you want to do is see the text you write properly.
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 2
  [ 38 posts ]  Go to page 1, 2  Next


Board index » Joomla! Older Version Support » Joomla! 1.0 » Extensions - 1.0.x » WYSIWYG Editors - 1.0.x

Who is online

Users browsing this forum: No registered users and 0 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group