Text-editor problem on dark templates...

[Valcav]

Not really a question about the template, I just have a little problem that is similar to one at that template...

On my test forum I use also dark backgrounds,
since the update to v4.1.5, is my text-editor (you know, where you write this, or where you write your reply) Mixed up...

When you click OUT of the text-editor, the background is white & the text is black...
When you click IN the text-editor, the background turns dark-Grey here (black on my site) & the text is still in black, with the result that it is difficult to see what you have written already... (on here, I can just read it, but on my site... I have to click regular next to the box to see what I've written)

If anyone knows how to fix this or knows a work-around for this...

It would be very grateful

Friendly greetings,
Valcav

 

[Fillip H.]

In my browser (Firefox) the background does not turn dark-grey.

What browser are you using?

 

[Valcav]

Firefox 6.0 ...

This is how it looks on my test-site....
Here I haven't clicked in the editor yet:

Here I have clicked in the editor + written something:


And here is from here:
Here I haven't clicked in the editor yet:

Here I have clicked in the editor + written something:

 

[Fillip H.]

Oh you use the dark skin on this site...

Well I'm not a skin coder so I really have no idea xD

 

[Trekkan]

Getting those colors right is a serious bitch... it was bad enough before the CKE editor. Anyway, if you look on vb.com there's some threads with information on how to fix this. If I remember right, it's a .css file within the CKEeditor folder, but the details I can't remember.

 

[Ozzy47]

Yeah it is hard codded in the css for the ckeditor, best thing to do is look on vb.com like Trekkan said, I have not played around with it yet so I am not sure how to do it.

 

[Valcav]

Yeah,

Already posted a similar post on vBulletin.com...
I've already been able to change the background color for when I haven't clicked in the editor yet... (what actually isn't the real problem... )

 

[Ozzy47]

Ok cool, I hope it all works out and someone there helps ya figure out how to do it.

 

[Taurus]

Do this:

Add to the bottom of your additional.css template:

span.cke_skin_kama {
border: 1px solid #000 !important;
}

body, body.content {
background-color: #000 !important;
color: #fff !important;
}

.cke_skin_kama .cke_wrapper {
background: url(images/BP-Black/gradients/editor.png) top left repeat-x !important;
background-color: #202020 !important;
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_toolgroup {
background-color: #202020 !important;
background-image: none !important;
color: [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=ccc]#ccc[/URL]
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_button a:hover, .cke_skin_kama .cke_button a:focus, .cke_skin_kama .cke_button a:active {
background-color: #000 !important;
}

.cke_skin_kama div.cke_bottom_restore_autosave .cke_toolgroup a {
color: #ccc !important;
}

.cke_skin_kama .cke_rcombo a, .cke_skin_kama .cke_rcombo a:active, .cke_skin_kama .cke_rcombo a:hover {
background-image: none !important;
background-color: #202020 !important;
border: 1px solid #000 !important;
color: #ccc !important;
}

.cke_skin_kama .cke_rcombo .cke_openbutton .cke_icon {
background-color: #000 !important;
}

#visitormessageseditor .blockrow {
border-top: 0 !important;
}

.cke_panel_listItem a:hover, .cke_panel_listItem a:focus, .cke_panel_listItem a:active {
background-color: #202020 !important;
border: 1px solid #000 !important;
}

.cke_panel_listItem a {
border: 1px solid #000 !important;
}

.cke_skin_kama *, .cke_skin_kama a:hover, .cke_skin_kama a:link, .cke_skin_kama a:visited, .cke_skin_kama a:active {
color: #fff !important;
}

.cke_skin_kama .cke_rcombopanel {
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_button a.cke_on {
background-color: #6c6e70 !important;
}

This code below will fix the white backgrounds for the editor popups. Add to bottom of additional.css

.cke_skin_kama .cke_dialog_body {
background-color: #202020 !important;
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_dialog_title {
border-bottom: 1px solid #000 !important;
}

.cke_skin_kama .cke_dialog_contents {
background-color: #1a1a1a !important;
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_dialog_footer {
background-color: #202020 !important;
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_dialog .cke_dark_background {
background-color: transparent !important;
}

.cke_skin_kama a.cke_smile img {
border: none !important;
}

#uploadprogress_container {
background-color: #202020 !important;
}

.uploadprogress_footer {
border: 1px solid #000 !important;
background-color: #222629 !important;
}

#uploadprogress_container {
border: 1px solid #000 !important;
}

.cke_skin_kama a.cke_dialog_tab {
background-color: #202020 !important;
background-image: none !important;
}

.cke_skin_kama a.cke_dialog_tab:hover {
background-color: #000 !important;
background-image: none !important;
}

.cke_skin_kama input.cke_dialog_ui_input_text, .cke_skin_kama input.cke_dialog_ui_input_password {
background-color: #222629 !important;
}

.cke_skin_kama .cke_dialog_ui_input_select {
background-color: #222629 !important;
}

.cke_panel_listItem a {
color: #000 !important;
}

ul.cke_panel_list {
color: #000 !important;
}

Continued in next post.....

 

[Taurus]

Replace editor.css with this:

.texteditor.content .cke_skin_kama textarea.cke_source,
.texteditor textarea {
        font: {vb:stylevar content_msg_font};
}

.formcontrols .blockrow.texteditor textarea {
background-color: [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=000]#000[/URL]
}

.formcontrols .blockrow.texteditor textarea:focus {
        background-color: [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=000]#000[/URL]
}

.texteditor.forum .cke_skin_kama textarea.cke_source,
.texteditor.forum textarea {
        font: {vb:stylevar forum_msg_font};
}

.editor_smiliebox {
        float:{vb:stylevar right};
        width:{vb:math {vb:raw vboptions.smcolumns} * ({vb:stylevar editor_smiliebox_smiliesize} + 5)};
        height:200px;
        _background-color:{vb:stylevar textedit_background.backgroundColor};
        _border:solid 1px {vb:stylevar mid_border.borderColor};
        padding:0 3px 3px 3px;
}

.editor_smiliebox .blocksubhead {
        padding:0;
        font-size:{vb:stylevar small_fontSize};
        font-weight:normal;
        text-align:center;
        background:{vb:stylevar content3_background.backgroundColor};
        border:solid 1px {vb:stylevar mid_border.borderColor};
        border-width:1px 0;
}

.editor_smiliebox ul.smiliebox {
        height:190px;
        overflow:hidden;
}

.editor_smiliebox ul.smiliebox li {
        float:{vb:stylevar left};
        height:{vb:stylevar editor_smiliebox_smiliesize};
        width:{vb:stylevar editor_smiliebox_smiliesize};
        margin:2px;
        overflow:hidden;
        position:relative;
        text-align:center;
}

.editor_smiliebox ul.smiliebox li div.table {
        display:table;
        height:100%;
        margin:auto;
        /* IE8 needs the following, see [url]https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=425785#tabs[/url] */
        table-layout:fixed;
        width:{vb:stylevar editor_smiliebox_smiliesize};
}

.editor_smiliebox ul.smiliebox li div.tablecell {
        display:table-cell;
        vertical-align:middle;
}

.editor_smiliebox ul.smiliebox li img {
        height:auto;
        max-width:{vb:stylevar editor_smiliebox_smiliesize};
        width:auto !important;
        cursor: pointer;
}

.editor_smiliebox div.moresmilies {
        text-align:center;
        font-size:{vb:stylevar small_fontSize};
}

.editor_textbox_container {
        width:100%;
        float:{vb:stylevar left};
        margin:0;
}

.editor_textbox_container.smilie {
        margin-{vb:stylevar right}:-{vb:math {vb:raw vboptions.smcolumns} * ({vb:stylevar editor_smiliebox_smiliesize} + 5) + 90};
}

.editor_textbox_smilie {
        margin-{vb:stylevar right}:{vb:math {vb:raw vboptions.smcolumns} * ({vb:stylevar editor_smiliebox_smiliesize} + 5) + 10};
}

/* dropdown button */
.cke_skin_kama_container {
        visibility:visible; 
        background: [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=000]#000[/URL] // no stylevar
}

.cke_skin_kama_container body {
        min-width: 0;
}

.attachment a {
        padding: 1px 0;
        border: 1px solid [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=000]#000[/URL]
        display: block;
}

.attachment a:hover {
        padding: 1px 0;
        border-color: [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=000]#000[/URL]
        background-color: [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=202020]#202020[/URL]
}


.editorpopupbody {
        padding: 5px;
        min-width: 200px;
        max-height:250px;
        overflow-y:auto;
        overflow-x:hidden;
}


.editorpopupbody li.attachment {
        white-space:nowrap;
}

.cke_skin_kama .cke_panel.cke_attach {
        width:250px;
        height:auto;
}

/* attachment click */
.previewthumbactive {
        position: absolute;
        background: url('{vb:stylevar imgdir_misc}/pencil.png') no-repeat top left;
        cursor: pointer;
        border:1px solid red;
        margin:0;
        z-index: 10;
}

img.previewthumb.active {
        cursor: pointer;
        border:1px solid red;
        margin:0;
}

div.attach_insert_all {
        cursor: pointer;
        background-color:{vb:stylevar textedit_background.backgroundColor};
        padding: 2px;
}

/* ie8 width fix */
.cke_browser_ie8 .cke_editor {
        display: block !important;
}

/* disabled background override */
.cke_button .cke_disabled:hover {
        background-color: transparent !important;
}

/* icons */
.cke_skin_kama span:not(.cke_browser_ie) .cke_button .cke_icon {
        background: url('{vb:stylevar imgdir_editor}/sprite.png') no-repeat top left;
}

.cke_skin_kama .cke_browser_ie .cke_button .cke_icon {
        position: relative;
        overflow: hidden;
        width: 16px;
        height: 16px
}

.cke_skin_kama .cke_browser_ie .cke_button .cke_icon_image {
        position: absolute;
        width: 2448px;
        height: 60px;
        background: url('{vb:stylevar imgdir_editor}/sprite.png') no-repeat top left;
}

.cke_skin_kama .cke_browser_ie .cke_button .cke_icon_image.custom {
        background: none;
}

.cke_skin_kama .cke_browser_ie .cke_button a.cke_disabled .cke_icon {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
}

.cke_skin_kama .cke_browser_ie .cke_rtl .cke_button a.cke_disabled .cke_icon {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
}

.cke_skin_kama .cke_browser_ie .cke_button a.cke_on .cke_icon_image {
        top: 0px;
}

.cke_skin_kama .cke_browser_ie .cke_button a.cke_off .cke_icon_image {
        top: -20px;
}

.cke_skin_kama .cke_browser_ie .cke_button a.cke_disabled .cke_icon_image {
        top: -40px;
        filter: ;
}

/* VBIV-11809 */
.cke_skin_kama .cke_browser_ie .cke_button .cke_button_textcolor .cke_buttonarrow {
        filter: ;
}

.cke_skin_kama .cke_browser_ie .cke_rtl .cke_button a.cke_disabled .cke_icon_image {
        top: -40px;
        filter: ;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_openAttachmentWindow .cke_icon {
        background-position: 0 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_openAttachmentWindow .cke_icon_image {
        left: 0px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_enhancedsource .cke_icon
{
        background-position: -1597px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_enhancedsource .cke_icon_image
{
        left: -1597px;
}
.cke_skin_kama .cke_button_enhancedsource .cke_label
{
        /* This displays the "source" text next to the source button!*/
        /*display: inline !important;*/
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_pastefromword .cke_icon
{
        background-position: -2430px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_pastefromword .cke_icon_image
{
        left: -2430px;
}
.cke_skin_kama span:not(.cke_browser_ie) .cke_button_removeFormat .cke_icon
{
        background-position: -1447px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_removeFormat .cke_icon_image
{
        left: -1447px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_bold .cke_icon
{
        background-position: -50px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_bold .cke_icon_image
{
        left: -50px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_italic .cke_icon
{
        background-position: -897px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_italic .cke_icon_image
{
        left: -897px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_underline .cke_icon
{
        background-position: -2247px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_underline .cke_icon_image
{
        left: -2247px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_subscript .cke_icon
{
        background-position: -2147px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_subscript .cke_icon_image
{
        left: -2147px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_superscript .cke_icon
{
        background-position: -2197px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_superscript .cke_icon_image
{
        left: -2197px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_table .cke_icon
{
        background-position: -2047px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_table .cke_icon_image
{
        left: -2047px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_tableProperties .cke_icon
{
        background-position: -1797px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_tableProperties .cke_icon_image
{
        left: -1797px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_tableDelete .cke_icon
{
        background-position: -1847px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_tableDelete .cke_icon_image
{
        left: -1847px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_vbRowInsertBefore .cke_icon
{
        background-position: -1997px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_vbRowInsertBefore .cke_icon_image
{
        left: -1997px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_vbRowInsertAfter .cke_icon
{
        background-position: -1947px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_vbRowInsertAfter .cke_icon_image
{
        left: -1947px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_vbRowDelete .cke_icon
{
        background-position: -1897px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_vbRowDelete .cke_icon_image
{
        left: -1897px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_vbColumnInsertBefore .cke_icon
{
        background-position: -1747px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_vbColumnInsertBefore .cke_icon_image
{
        left: -1747px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_vbColumnInsertAfter .cke_icon
{
        background-position: -1697px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_vbColumnInsertAfter .cke_icon_image
{
        left: -1697px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_vbColumnDelete .cke_icon
{
        background-position: -1647px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_vbColumnDelete .cke_icon_image
{
        left: -1647px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_horizontalrule .cke_icon
{
        background-position: -2097px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_horizontalrule .cke_icon_image
{
        left: -2097px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_smiley .cke_icon
{
        background-position: -1497px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_smiley .cke_icon_image
{
        left: -1497px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_iespell .cke_icon
{
        background-position: -1547px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_iespell .cke_icon_image
{
        left: -1547px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_link .cke_icon
{
        background-position: -300px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_link .cke_icon_image
{
        left: -300px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_Email .cke_icon
{
        background-position: -401px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_Email .cke_icon_image
{
        left: -401px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_unlink .cke_icon
{
        background-position: -2346px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_unlink .cke_icon_image
{
        left: -2346px;
}
.cke_skin_kama span:not(.cke_browser_ie) .cke_button_image .cke_icon, .cke_skin_kama span:not(.cke_browser_ie) .cke_button_vbimage .cke_icon
{
        background-position: -747px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_image .cke_icon_image, .cke_skin_kama .cke_browser_ie .cke_button_vbimage .cke_icon_image
{
        left: -747px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_videotag .cke_icon
{
        background-position: -2397px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_videotag .cke_icon_image
{
        left: -2397px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_Quote .cke_icon
{
        background-position: -1347px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_Quote .cke_icon_image
{
        left: -1347px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_Code .cke_icon
{
        background-position: -151px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_Code .cke_icon_image
{
        left: -151px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_Html .cke_icon
{
        background-position: -451px 0; 
}
.cke_skin_kama .cke_browser_ie .cke_button_Html .cke_icon_image
{
        left: -451px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_Php .cke_icon
{
        background-position: -1297px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_Php .cke_icon_image
{
        left: -1297px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_PageBreak .cke_icon
{
        background-position: -1147px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_PageBreak .cke_icon_image
{
        left: -1147px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_PreviewBreak .cke_icon
{
        background-position: -100px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_PreviewBreak .cke_icon_image
{
        left: -100px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_textcolor .cke_icon
{
        background-position: -201px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_textcolor .cke_icon_image
{
        left: -201px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_undo .cke_icon
{
        background-position: -2297px 0; 
}
.cke_skin_kama .cke_browser_ie .cke_button_undo .cke_icon_image
{
        left: -2297px;
}

.cke_skin_kama .cke_rtl span:not(.cke_browser_ie) .cke_button_undo .cke_icon
{
        background-position: -1397px 0;
}
.cke_skin_kama .cke_rtl .cke_browser_ie .cke_button_undo .cke_icon_image
{
        left: -1397px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_redo .cke_icon
{
        background-position: -1397px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_redo .cke_icon_image
{
        left: -1397px;
}

.cke_skin_kama .cke_rtl span:not(.cke_browser_ie) .cke_button_redo .cke_icon
{
        background-position: -2297px 0; 
}
.cke_skin_kama .cke_rtl .cke_browser_ie .cke_button_redo .cke_icon_image
{
        left: -2297px;
}

.cke_skin_kama .cke_rtl .cke_rcombo {
        float:right;
}

.cke_skin_kama .cke_browser_ie6 .cke_rtl .cke_rcombo,
.cke_skin_kama .cke_browser_ie7 .cke_rtl .cke_rcombo  {
        float:none;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_numberedlist .cke_icon
{
        background-position: -797px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_numberedlist .cke_icon_image
{
        left: -797px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_bulletedlist .cke_icon
{
        background-position: -847px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_bulletedlist .cke_icon_image
{
        left: -847px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_outdent .cke_icon
{
        background-position: -1097px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_outdent .cke_icon_image
{
        left: -1097px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_indent .cke_icon
{
        background-position: -697px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_indent .cke_icon_image
{
        left: -697px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_justifyleft .cke_icon
{
        background-position: -997px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_justifyleft .cke_icon_image
{
        left: -997px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_justifycenter .cke_icon
{
        background-position: -947px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_justifycenter .cke_icon_image
{
        left: -947px;
}

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_justifyright .cke_icon
{
        background-position: -1047px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_justifyright .cke_icon_image
{
        left: -1047px;
}

/* rtl icons */

.cke_skin_kama .cke_rtl span:not(.cke_browser_ie) .cke_button_undo .cke_icon
{
        background-position: -1397px 0;
}
.cke_skin_kama .cke_browser_ie .cke_rtl .cke_button_undo .cke_icon_image
{
        left: -1397px;
}

.cke_skin_kama .cke_rtl span:not(.cke_browser_ie) .cke_button_redo .cke_icon
{
        background-position: -2297px 0; 
}
.cke_skin_kama .cke_browser_ie .cke_rtl .cke_button_redo .cke_icon_image
{
        left: -2297px;
}

.cke_skin_kama .cke_rtl span:not(.cke_browser_ie) .cke_button_outdent .cke_icon
{
                background-position: -697px 0;
}
.cke_skin_kama .cke_browser_ie .cke_rtl .cke_button_outdent .cke_icon_image
{
                left: -697px;
}

.cke_skin_kama .cke_rtl span:not(.cke_browser_ie) .cke_button_indent .cke_icon
{
                background-position: -1097px 0;
}
.cke_skin_kama .cke_browser_ie .cke_rtl .cke_button_indent .cke_icon_image
{
                left: -1097px;
}

.cke_skin_kama .cke_rtl span:not(.cke_browser_ie) .cke_button_columnInsertBefore .cke_icon
{
        background-position: -1697px 0;
}
.cke_skin_kama .cke_browser_ie .cke_rtl .cke_button_columnInsertBefore .cke_icon_image
{
        left: -1697px;
}

.cke_skin_kama .cke_rtl span:not(.cke_browser_ie) .cke_button_columnInsertAfter .cke_icon
{
        background-position: -1747px 0;
}
.cke_skin_kama .cke_browser_ie .cke_rtl .cke_button_columnInsertAfter .cke_icon_image
{
        left: -1747px;
}

.cke_skin_kama .cke_dialog .cke_dialog_ui_labeled_label {
        float:none;
}

.cke_skin_kama .cke_dialog input[type="file"] {
        border:1px inset;
}

.cke_skin_kama div.cke_bottom_restore_autosave {
        position:relative;
}

.cke_skin_kama div.cke_bottom_restore_autosave .cke_toolgroup {
        height:18px;
        position:absolute;
        top:4px;
        padding:0 3px 0 0;
}

.cke_skin_kama div.cke_bottom_restore_autosave a.restoretext {
        cursor:pointer;
        height:12px;
        background-image:none
}

.cke_skin_kama div.as_ind_container {
        position:relative;
}

.cke_skin_kama div.as_ind_container div {
        background-color:{vb:stylevar editor_autosave_notice_background.backgroundColor};
        right:0;
        position:absolute;
        padding:2px;
        top:-12px;
        font-weight:bold;
}

.cke_skin_kama .cke_toolbox {
        margin-bottom: 5px;
}

/* VBIV-11874 Override CSS so that textarea popup resizes with the dialog */
.cke_skin_kama .cke_dialog .cke_dialog_ui_textarea.cke_pastetext {
        width:auto;
        height:auto;
}

.cke_dialog_tab:focus {
        outline:none;
}

Continued in next post.....

 

[Taurus]

Replace editor_contents.css with this:

body,
body.content {
        color: [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=fff]#fff[/URL]
        /* Remove the background color to make it transparent */
        background-color: [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=000]#000[/URL]
        margin:0px;
        padding:8px;
}

body.forum {
        font: {vb:stylevar forum_msg_font};
}

html {
        /* #3658: [IE6] Editor document has horizontal scrollbar on long lines
        To prevent this misbehavior, we show the scrollbar always */
        _overflow-y: scroll
}

img:-moz-broken {
        -moz-force-broken-image-icon : 1;
        width : 24px;
        height : 24px;
}

img, input, textarea {
        cursor: default;
}

img.previewthumb {
        max-width:150px;
        max-height:150px;
        height:auto !important;
        width:auto !important;
        width:150px;
        height:150px;
        margin:1px;
}

img.previewthumb.active {
        cursor: pointer;
        border:1px solid red;
        margin:0;
}

img.size_thumbnail {
        max-height:{vb:stylevar image_thumbnail_max};
        max-width:{vb:stylevar image_thumbnail_max};
}

img.size_medium {
        max-height:{vb:stylevar image_small_max};
        max-width:{vb:stylevar image_small_max};
}

img.size_large {
        max-height:{vb:stylevar image_large_max};
        max-width:{vb:stylevar image_large_max};
}

img.size_fullsize {
        max-width:100%;
        max-height:100%;
        overflow:hidden;
}

img.align_left {
        float:left; /* dont use stylevar for this */
        margin: 1em;
        margin-left: 0;
}

img.align_center {
        margin: 0 auto;
        display:block;
}

img.align_right {
        float:right; /* dont use stylevar for this */
        margin: 1em;
        margin-right: 0;
}

/* Table tag */
table {
        width: auto;
}
table.wysiwyg_dashes {
        border-collapse: collapse;
}

td.wysiwyg_dashes_td {
        border: {vb:stylevar editor_wysiwyg_table_borderSize} dotted {vb:stylevar editor_wysiwyg_table_borderColor};
        padding: 3px;
}

/* paragraph tag */
p {
        margin: 0px;
        padding: 0px;
}

/* preview break tag */
hr.previewbreak {
    background-color:red !important;
    border:medium none !important;
    color:red !important;
    height:6px !important;
}

/* pagebreak tag */
h3.wysiwyg_pagebreak {
        border: 1px dashed [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=cccccc]#cccccc[/URL]
        border-top: 3px double black;
        padding: 4px;
}

Please make backups of these files before doing this!

Also add this image to your style's images/editor folder. Overwrite the one in there:

View attachment sprite.zip

If the editor input background is still white after you applied these changes, then please flush your browser's cache. That will fix it.

 

[Valcav]

Taurus ,
thank you very much that solved my editor problem,
but also created now a new one

Now I can't see my background image anymore...
I removed in editor_contents.css : background-color: #000
(like your comment was saying above it: /* Remove the background color to make it transparent */)
also tried with changing it to: background-color: transparent !important;

I'll keep trying, and when I find it, I'll let you know...
Or when you find it, you can let me know

But anyway,
thanks again to help solving that 1 problem.

Friendly greetings,
Valcav

 

[Valcav]

Taurus ,
thank you very much that solved my editor problem,
but also created now a new one

Now I can't see my background image anymore...
I removed in editor_contents.css : background-color: #000
(like your comment was saying above it: /* Remove the background color to make it transparent */)
also tried with changing it to: background-color: transparent !important;

I'll keep trying, and when I find it, I'll let you know...
Or when you find it, you can let me know

But anyway,
thanks again to help solving that 1 problem.

Friendly greetings,
Valcav

I think I just found it...
in your first reply of this topic, the first "code" part
I changed the red part with the green part...

Still need to do some more testing on my test board to see how everything else is...

Again,
many thanks,
Friendly greetings,
Valcav

Do this:

Add to the bottom of your additional.css template:

span.cke_skin_kama {
border: 1px solid #000 !important;
}

body, body.content {
[COLOR="#FF0000"]background-color: #000 !important;[/COLOR] [COLOR="#008000"][B]background-color: transparent !important;[/B][/COLOR]
color: #fff !important;
}

.cke_skin_kama .cke_wrapper {
background: url(images/BP-Black/gradients/editor.png) top left repeat-x !important;
background-color: #202020 !important;
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_toolgroup {
background-color: #202020 !important;
background-image: none !important;
color: [URL=http://www.dragonbyte-tech.com/misc.php?do=dbtech_usertag_hash&hash=ccc]#ccc[/URL]
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_button a:hover, .cke_skin_kama .cke_button a:focus, .cke_skin_kama .cke_button a:active {
background-color: #000 !important;
}

.cke_skin_kama div.cke_bottom_restore_autosave .cke_toolgroup a {
color: #ccc !important;
}

.cke_skin_kama .cke_rcombo a, .cke_skin_kama .cke_rcombo a:active, .cke_skin_kama .cke_rcombo a:hover {
background-image: none !important;
background-color: #202020 !important;
border: 1px solid #000 !important;
color: #ccc !important;
}

.cke_skin_kama .cke_rcombo .cke_openbutton .cke_icon {
background-color: #000 !important;
}

#visitormessageseditor .blockrow {
border-top: 0 !important;
}

.cke_panel_listItem a:hover, .cke_panel_listItem a:focus, .cke_panel_listItem a:active {
background-color: #202020 !important;
border: 1px solid #000 !important;
}

.cke_panel_listItem a {
border: 1px solid #000 !important;
}

.cke_skin_kama *, .cke_skin_kama a:hover, .cke_skin_kama a:link, .cke_skin_kama a:visited, .cke_skin_kama a:active {
color: #fff !important;
}

.cke_skin_kama .cke_rcombopanel {
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_button a.cke_on {
background-color: #6c6e70 !important;
}

 

[Taurus]

I am glad you got it sorted. Post some screenshots if you can.

 

[Valcav]

Taurus , (and everyone else ) this is how it looks now



a picture of quick reply I don't have yet, because on my test-forum that is actually disabled.... And I'm not sure I'll enable that one my official one too...

 

[Ozzy47]

Excellent, glad you got it solved, thanks to Taurus for the help.

 

[Valcav]

Excellent, glad you got it solved, thanks to Taurus for the help.

Yup,
And I'm Taurus very grateful to help me with it...

 

[Taurus]

Glad I could help. Looks great!

 

[Valcav]

Taurus ,
I currently looking around to clean up my style a little bit, and I noticed something,
I am missing a picture... So I went searching which file it was asking for that image, and I came to the additional.css ....
And so I kind of back-tracked it to this topic...
In your first reply with some code (where you placed the code to add in additional.css, I found it...)
In one of the lines you wrote: "background: url(images/BP-Black/gradients/editor.png" But I don't have that image... can you upload that image? so that I can upload to my style folder and change that url properly...)

Many thanks,
Valcav

 

[Ozzy47]

Valcav Try this