GetSimple Support Forum - Tables with background-color

Hi,
At first, i want to say that i love getsimple! But I have a problem with table background colors.
I have activated the advanced toolbar, but if i make a table and choose a background color nothing happens because the plugin automatically implements a <span> and give it the background-color.
Is there any possibility to get a simple background-color changing menue for tables?

Welcome!

You did not give us an URL to check, but some hints:

as you can see at http://www.urbanistan.de/getsimple/tabellen-test/, I did define background and the span in the table td has background-color which is visible at the website

Code:
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">

    <tbody>

        <tr>

            <td>

                <span style="background-color: rgb(255, 0, 0);">aaaa</span></td>

            <td>

                bbb</td>

        </tr>

        <tr>

            <td>

                ccc</td>

            <td>

                ddd</td>

        </tr>

        <tr>

            <td>

                eee</td>

            <td>

                fff</td>

        </tr>

    </tbody>

</table>

This questions affects

- CKEditor
- your CSS styles

in principle it has nothing to do with GetSimple itself.

If you give us the URL of your site, I will ckeck why the background-color is not active at your site.

Hi,
Danke fÃƒÂ¼r deinen Post. Es geht nicht speziell um eine Seite, deswegen auch kein Link.
PersÃƒÂ¶nlich hab ich ÃƒÂ¼berhaupt keine Probleme mit CSS, es geht darum das mein Freund, fÃƒÂ¼r den ich die Seite machen recht einfach die Hintergrundfarben der einzelnen KÃƒÂ¤stchen ÃƒÂ¤ndern kann. Das ganze wird dann so eine Art Buchungssystem, ein recht simples zugegeben aber fÃƒÂ¼r den Zweck ausreichend.
Es geht also darum eine ganze <td> mit background-color zu versehen und das direkt aus dem CMS.

Hi bugmenot,

let's speak english here, please!

If you want to ease the use for a friend, you could check whether you can add templates to the editor, with "prefabricated" tables

I am not sure how to change the behaviour of CKEditor to color the <td> instead of adding a span, when I have time I might try to find out

tschÃƒÂ¼ÃƒÂŸ,

Connie

bugmenot Wrote:Hi,
Danke fÃƒÂ¼r deinen Post. Es geht nicht speziell um eine Seite, deswegen auch kein Link.
PersÃƒÂ¶nlich hab ich ÃƒÂ¼berhaupt keine Probleme mit CSS, es geht darum das mein Freund, fÃƒÂ¼r den ich die Seite machen recht einfach die Hintergrundfarben der einzelnen KÃƒÂ¤stchen ÃƒÂ¤ndern kann.

If you just have a fixed number of colors you want to set, you can (probably) use the styles combobox of CKEditor. In gsconfig.php make sure to include the Styles control and link to a styles definition:

Code:
define('GSEDITOROPTIONS', 

  " toolbar: [ ... ['Styles', ...], ... ],

    stylesCombo_stylesSet: 'my_styles:/theme/my_theme/styles.js',

    ...

");

Then create the styles definition styles.js:

Code:
CKEDITOR.addStylesSet( 'my_styles',

[

    // Block Styles

    { name : 'red', element : 'td', attributes : { 'background-color':'red' } },

    { name : 'green', element : 'td', attributes : { 'background-color':'green' } },

    ...

]);

Not tested with <td> but I use it with <p> with no problem.

@mvlcek

Sounds good, but im not into PHP. IÃ‚Â´ve tried to get the code in the gsconfig.php but i get an error every time.
Could anybody please give me the whole code for the advanced toolbar and the my_styles thing?
Thank you in advance!

bugmenot Wrote:@mvlcek

Sounds good, but im not into PHP. IÃ‚Â´ve tried to get the code in the gsconfig.php but i get an error every time.
Could anybody please give me the whole code for the advanced toolbar and the my_styles thing?
Thank you in advance!

If you have patience until weekend, I can go into it!

Ok?

I realised a provisorial solution which might be overwritten with every upgrade, but at least it shows that it works.

I will go deeper into it how to integrate it without risk of upgrade-damages ;=(

See here: I think that is what you want:

Live-Demo:
http://www.urbanistan.de/getsimpletest/tabellentest/

Front-End:
[Image: hintergrund2.jpg]

Backend:

what I did and what you should do:

1) enable the advanced toolbar in the gsconfig.php, so you will have the styles-combobox:

Code:
# WYSIWYG toolbars (advanced, basic or [custom config]) 

define('GSEDITORTOOL', 'advanced');

2) download the file default.js which is attached here

3) open your site with FTP, go to /admin/template/js/ckeditor/plugins/styles/styles
make backup of the file default.js and upload the one which I attached here

4) open a new page in the editor,
create a table, using the table icon
add text into tablecell, click on STYLE (or STIL) and choose the one format "Tabellenzelle rot" oder "Tabellenzelle grÃƒÂ¼n"

So, to explain what I did:

by default all styles which are offered in the STYLES-combobox are defined in the file default.js in
admin/template/js/ckeditor/plugins/styles/styles
this is a compressed javascript-file

I downloaded an uncompressed one from
http://svn.ckeditor.com/CKEditor/trunk/_...default.js

and edited that.

I added

Code:
{ name : 'Tabellenzelle rot'              , element : 'td', styles : { 'background-color':'red' } },

{ name : 'Tabellenzelle grÃƒÂ¼n'            , element : 'td', styles : { 'background-color':'green' } },

and it works.

@mvlcek,

the correct notation is not "attribute" but "styles"

Now I will try to find out how to do this in a custom file, but as you see it is possible to do (and I know now how to get rid of some of the rubbish from the default combo-box)

Cheers, Connie

Connie Wrote:@mvlcek,
the correct notation is not "attribute" but "styles"

Thanks. Interestingly it works with "attributes", too.

Connie Wrote:Now I will try to find out how to do this in a custom file, but as you see it is possible to do (and I know now how to get rid of some of the rubbish from the default combo-box)

For the custom file, see my previous post.
(I found it by googling, as the documentation is definitely lacking in this aspect).

mvlcek Wrote:Thanks. Interestingly it works with "attributes", too.

Martin, that is wrong.
With "attributes" it will create

<td background-color:"red"> for example and that is not a style!

But now I got the final solution:

1) take the attachment, which I added to my previous post
2) name it whatever and upload it to a secure place, for example into the data- or the theme-folder

3) now add this to your gsconfig.php:

a)

Code:
define('GSEDITORTOOL', 'advanced');

Code:
define('GSEDITOROPTIONS',"stylesSet: 'default:http://www.testdomain.de/maybesubdirectoryt/theme/yourname.js'

");

As I have a lot of experimental and necessary options, my editoroptions look like this:

Code:
define('GSEDITOROPTIONS',"skin : 'v2', 

enterMode: CKEDITOR.ENTER_P,

shiftEnterMode : CKEDITOR.ENTER_BR,

fontSize_defaultLabel : '11px',

font_defaultLabel : 'Verdana',

font_names : 'Arial;Times New Roman;Verdana',

toolbarCanCollapse : true,

colorButton_enableMore : true,

entities : false,

contentsLangDirection : 'ltr',

dialog_buttonsOrder : 'ltr',

emailProtection : 'encode',

stylesSet: 'default:http://www.urbanistan.de/getsimpletest/theme/webdeern.js'

");

with my file "webdeern.js" in the theme-folder

a relative path might work as well, but I was too lazy for that!

Cheers!

Connie Wrote:
mvlcek Wrote:Thanks. Interestingly it works with "attributes", too.

Martin, that is wrong.
With "attributes" it will create

<td background-color:"red"> for example and that is not a style!

You are right, I'm always using "class", which IS an attribute ;-)

@Connie
Thank you so much! I hope you didnt spend hours to get a solution just for me.
Realy good support.

Well I spent some time,

but as I am currently working on the manual for CKEditor in GS, it was quite in time!

It is documented in the WIKI now and it is documented in our soon-to-start-german-getsimple-website ;=)

tschÃƒÂ¼ÃƒÂŸ,

Connie