Tables with background-color

[bugmenot]

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?

[Connie]

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.

[bugmenot]

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.

[Connie]

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

[mvlcek]

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.

[bugmenot]

@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!

[Connie]

@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?

[Connie]

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:


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

[mvlcek]

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

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

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

[Connie]

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');

b)

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!

[mvlcek]

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

[bugmenot]

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

[Connie]

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