Vbulletin editor color change?!

[Deadmau5]

Hello KWWHunks

I have a Problem with my Vbulletin

Is it possible to change this color?!

Deadmau5 Reviewed by Deadmau5 on 16th Jul 2011. Vbulletin editor color change?! Hello KWWHunks I have a Problem with my Vbulletin Is it possible to change this color?! http://img535.imageshack.us/img535/156/editor4.png Rating: 5

[Daniel]

The background color?

[Deadmau5]

yeah you can see on the Image that you cant see the code Button and the Buttons ""under the Fonts" Buttons.

They are black i must change the Background color for that at the moment its too Dark

[Daniel]

If I have understood you correctly

Add a new class to the css with the background color

.newclass {
background: #000000;
}

then edit line 80 of the postbit template and change 'alt1' to 'alt1 newclass'

[Deadmau5]

Can you pls look at this one i will not change anything and then it screwed up

example2:



This editor box is like the KWWH one Grey

Thats what i want

Edit:



this is the editor.css

.formcontrols .blockrow.texteditor {
    border-top:none;
color:#eeeeee;
background:#25292c;
background-color:#25292c;
}

.editor {
    border-top:solid 1px {vb:stylevar mid_border.borderColor};
color:#eeeeee;
background:#25292c;
background-color:#25292c;
}

.editor.quickreply,
.editor.quickedit {
    border-top:none;
color:#eeeeee;
background:#25292c;
background-color:#25292c;
}

.editor_controls {
    padding:6px 6px 6px 0;
        _display:none; /* disabling clickable controls for IE6, although the form remains fully-functional, including keyboard-controls: select a word, hit control-b to bold a word in the editor. */
    float:{vb:stylevar left};
    width:100%;
}

.editor_controls > ul {
    clear:{vb:stylevar left};
}

.editor_controls > ul.right li > * {
    display:inline;
    float:{vb:stylevar left};
}

.editor_controls > ul.right {
    float:{vb:stylevar right};
}
.editor_control_group_item {     
    margin-{vb:stylevar right}: {vb:math {vb:stylevar padding}/2}; 
}
.editor_controls ul.right {
    _float:{vb:stylevar right};
}

.editor_controls > ul > li {
    background:{vb:stylevar editor_control_background} url({vb:stylevar imgdir_editor}/separator.gif) no-repeat {vb:stylevar left};
    padding-{vb:stylevar left}:6px;
    float:{vb:stylevar left};
    position: relative;
}
.editor_controls li , .editor_controls ul.right li, .editor_controls .popupmenu div.popupctrl {
    _display: inline;
}
.editor_controls > ul > li:first-child {
    background-image:none;
    padding-{vb:stylevar left}:0px;
}

.editor_controls > ul.right > li:first-child {
    background-image:none;
    padding-{vb:stylevar right}:5px;
}

.editor_controls a.popupctrl img,
.popupmenu .popupbody li img {
    vertical-align:middle;
}

.editor_controls a.popupctrl {
    text-decoration:none;
}

.editor_controls .imagebutton {
    padding:1px;
    background-color: {vb:stylevar editor_button_background};
}

.editor_controls .colorbutton {
    float:{vb:stylevar left};
    margin:1px;
    border:0;
}

.editor_controls .colorbutton div {
    border:1px solid #ACA899;
    height:10px;
    width:10px;
    margin:2px;
}

.editor_controls .vbedit_colorbutton {
    padding-bottom:4px;
}

.editor_controls .vbedit_colorbar {
    position:absolute;
    background-color:black;
    top:15px;
    {vb:stylevar left}:6px;
}

.formcontrols .blockrow .editor_textbox textarea:focus, .blockrow textarea {
    background-color:{vb:stylevar textedit_background.backgroundColor};
color:#eeeeee;
}

.editor_container {
    float:{vb:stylevar left};
    margin-{vb:stylevar right}:-90px;
    width:100%
}

.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 https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=425785#tabs */
    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;
}

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

.editor_textbox_container {
    width:100%;
    float:{vb:stylevar left};
    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};
}

.editor_textbox textarea,
.editor_textbox iframe {
    width:500px;
    max-width:99%;
    min-width:99%;
    height:200px;
    float:none;
    background-color:{vb:stylevar textedit_background.backgroundColor};
    font:{vb:stylevar content_msg_font};
}

.editor_textbox textarea,
.editor_textbox iframe, #ie8#fix {
    width:99%;
}

.editor_textbox textarea.forum {
    font: {vb:stylevar forum_msg_font};
}

.editor_textbox iframe {
    margin:0;
    padding:0;
    height:206px;
}

.editor_textbox .hider {
    background-color:{vb:stylevar textedit_background.backgroundColor};
}

.editor_textbox.quickreply textarea {
    height:100px;
}

.editor_textbox.quickreply iframe {
    height:106px;
}

.editor_textbox .description {
    float:none;
    width:auto;
    margin-top:2px;
}

.editorpopupbody {
    max-height:250px;
    *overflow:auto;
    overflow-y:auto;
    overflow-x:hidden;
}

.popupmenu.sizes .popupbody {
    min-width:50px;
    text-align:center;
}

.popupmenu.colors .popupbody {
    min-width:144px;
}

.editor_controls .popupmenu .popupbody {
    background:{vb:stylevar editor_popupbody_background};
    border: 1px solid {vb:stylevar editor_popupbody_bordercolor};
}

.editor_controls .category,
.editor_controls .smilie ,
.editor_controls .attachment {
    font-size:{vb:stylevar small_fontSize};
    border-top:none;
    padding:1px;
    position: relative;
}

.editor_controls .smilie,
.editor_controls .attachment,
.editor_controls .attach .category {
    cursor:pointer;
}

.editor_controls .category {
    background:{vb:stylevar content3_background.backgroundColor};
    border:solid 1px {vb:stylevar mid_border.borderColor};
    border-width:1px 0;
}

.editor_controls .smilie div,
.editor_controls .category div,
.editor_controls .attachment div {
    padding:2px;
    white-space:nowrap;
    overflow:hidden;
}

.editor_controls .fontsize,
.editor_controls .fontname {
    padding:1px;
    border-top:none;
    font-size:14px;
}

.editor_controls .popupmenu .popupbody li > a {
    padding:1px 3px;
    overflow:hidden;
    background:none;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    color:#000000;
}

.editor_controls .popupmenu .popupbody li > a:hover {
    color:#000000;
}

.popupmenu.colors {
    position:relative;
}

.popupmenu.fonts div.popupctrl {
    width:91px;
}

.popupmenu.sizes div.popupctrl {
    width:45px;
}

.editor_controls a.popupctrl {
    border:1px solid {vb:stylevar editor_listbox_bordercolor};
    height:18px;
    line-height:17px;
}

.editor_controls .popupmenu div.popupctrl {
    height:18px;
    border:1px solid {vb:stylevar editor_listbox_bordercolor};
    color:#000000;
    line-height:17px;
    background-color:{vb:stylevar editor_listbox_background};
    padding-{vb:stylevar right}:10px;
    background-image:url({vb:stylevar imgdir_misc}/popupctrl.png);
    background-position:{vb:stylevar right} center;
    background-repeat:no-repeat;
    padding: 1px;
    padding-{vb:stylevar right}: 10px;
}

.popupmenu.imagemenu div.popupctrl, .editor_controls .popupmenu .popupctrl {
    padding:1px;
    padding-{vb:stylevar right}:10px;
    background-color: {vb:stylevar editor_button_background};
    border:none;
}

.popupmenu.imagemenu div.popupctrl.active {
    padding:0px;
    padding-{vb:stylevar right}:10px;
    margin-{vb:stylevar right}:-1px;
}

.popupmenu.fonts div.popupctrl div,
.popupmenu.sizes div.popupctrl div {
    font-size:{vb:stylevar small_fontSize};
    font-family:tahoma;
    overflow:hidden;
    white-space:nowrap;
    padding:0 3px 0 3px;
    _display:inline;
}

.editor_controls .imagebutton_selected,
.editor_controls .imagebutton_hover,
.editor_controls .imagebutton_down,
.editor_controls a.popupmenu {
    padding:0;
    margin:0;
}

.editor_controls .popupmenu .popupctrl.active,
.editor_controls .popupmenu .popupctrl.imagebutton_hover,
.editor_controls .imagebutton_selected,
.editor_controls .imagebutton_down,
.editor_controls .imagebutton_hover {
    background-color: {vb:stylevar editor_buttonhover_background};
    border:solid 1px {vb:stylevar editor_buttonhover_bordercolor};
    padding: 0;
}

.editor_controls .popupmenu .popupctrl.active {
    padding-{vb:stylevar right}: 10px;
    margin: 0;
}

.editor_controls .popupmenu .popupctrl.imagebutton_hover {
    padding-{vb:stylevar right}: 10px;
    margin-{vb:stylevar right}: -1px;
}

.editor_controls .popupmenu.fonts div.popupctrl.active,
.editor_controls .popupmenu.fonts div.popupctrl.imagebutton_hover,
.editor_controls .popupmenu.sizes div.popupctrl.active,
.editor_controls .popupmenu.sizes div.popupctrl.imagebutton_hover {
    padding: 1px;
    padding-{vb:stylevar right}: 10px;
    margin-{vb:stylevar right}: 0;
}

.editor_controls .popupmenu .popupctrl.active div,
.editor_controls .popupmenu .popupctrl.imagebutton_hover div {
    font-size: {vb:stylevar small_fontSize};
    font-family: tahoma;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 3px;
    _display: inline;
}

.editor_controls .popupmenu .popupctrl.active,
.editor_controls .popupmenu .popupctrl.imagebutton_hover,
.editor_controls .imagebutton_hover {
    background-color: {vb:stylevar editor_buttonhover_background};
    border: solid 1px {vb:stylevar editor_buttonhover_bordercolor};
    padding: 0;
}

.editor_controls .imagebutton_selected {
    background-color: {vb:stylevar editor_buttonselected_background};
    border: solid 1px {vb:stylevar editor_buttonselected_bordercolor};
    padding: 0;
}

.editor_controls .imagebutton_down {
    background-color: {vb:stylevar editor_buttonclicked_background};
    border: solid 1px {vb:stylevar editor_buttonclicked_bordercolor};
    padding: 0;
}

.editor_controls .popupmenu .popupctrl.active {
    padding-{vb:stylevar right}: 10px;
    margin: 0;
}

.editor_controls .popupmenu .popupctrl.imagebutton_hover {
    padding-{vb:stylevar right}: 10px;
    margin-{vb:stylevar right}: -1px;
}

.editor_controls .popupmenu.fonts div.popupctrl.active,
.editor_controls .popupmenu.fonts div.popupctrl.imagebutton_hover,
.editor_controls .popupmenu.sizes div.popupctrl.active,
.editor_controls .popupmenu.sizes div.popupctrl.imagebutton_hover {
    padding: 1px;
    padding-{vb:stylevar right}: 10px;
    margin-{vb:stylevar right}: 0;
}

.editor_controls .popupmenu .popupctrl.active div,
.editor_controls .popupmenu .popupctrl.imagebutton_hover div {
    font-size: {vb:stylevar small_fontSize};
    font-family: tahoma;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 3px;
    _display: inline;
}

.editor_controls .imagebutton_disabled {
    opacity:{vb:math {vb:stylevar editor_buttondisabled_opacity}/100};
    -moz-opacity:{vb:math {vb:stylevar editor_buttondisabled_opacity}/100};
    filter:alpha(opacity={vb:stylevar editor_buttondisabled_opacity});
}

.controlgroup_3 button.imagebutton {
     display:inline;
     margin:0;
     padding:2px;
     text-align:{vb:stylevar left};
     cursor:pointer;
     border:0px;     
 }

.popupbody > li:first-child {}

.wysiwyg {
background-color:{vb:stylevar wysiwyg_textbox_background.backgroundColor};
}

body.wysiwyg {
    margin:0;
    padding:2px;
}

/* Used within the iframe */
.wysiwyg hr.previewbreak {
    color:red;
    background-color:red;
    height:6px;
    border:none;
}

.wysiwyg,
.wysiwyg.content {
    font: {vb:stylevar content_msg_font};
}

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

.wysiwyg p {
    margin:0;
}

.wysiwyg .inlineimg {
    vertical-align: middle
}

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

.wysiwyg ol.decimal li {
    list-style:decimal outside;
}

.wysiwyg ol.upper-roman li {
    list-style:upper-roman outside;
}

.wysiwyg ol.lower-roman li {
    list-style:lower-roman outside;
}

.wysiwyg ol.upper-alpha li {
    list-style:upper-alpha outside;
}

.wysiwyg ol.lower-alpha li {
    list-style:lower-alpha outside;
}

/* IE createStyleSheet() falls over on img.previewthumb.active  */
.wysiwyg img.previewthumbactive {
    border:1px solid red;
    margin:0;
}

.editoroverlay {
    position:relative;
}

.editoroverlay.tableoverlay,
.editoroverlay.videooverlay {
    width:350px;
}

.editoroverlay.uploadoverlay {
    width:445px;
}

.editoroverlay.imageoverlay {
    width:550px;
}

.editoroverlay hr {
    border:solid 1px {vb:stylevar mid_border.borderColor};
}

.editoroverlay .blockrow {
    background:{vb:stylevar formrow_background.backgroundColor} {vb:stylevar formrow_background.backgroundImage} bottom repeat-x;
    border:solid 1px {vb:stylevar mid_border.borderColor};
    margin:{vb:stylevar padding};
    text-align: {vb:stylevar left};
}

.editoroverlay .blockrow .group {
    width:72%;
    float:{vb:stylevar right};
    margin-top:{vb:stylevar padding};
}

.editoroverlay ul.group li {
    float:{vb:stylevar left};
    margin-{vb:stylevar left}:{vb:stylevar padding};
    font-size:{vb:stylevar small_fontSize};
}

.editoroverlay ul.group .textbox {
    margin-top:0;
    width:auto;
    float:none;
}

.editoroverlay ul.group li:first-child {
    margin-{vb:stylevar left}:0;
}

.editoroverlay .cancelbutton {
    position:absolute;
    {vb:stylevar right}:6px;
    top:6px;
    background-color:red;
    color:white;
    font-weight:bold;
    border:1px solid black;
    width:15px;
}

.editoroverlay .cancelbutton:hover {
    background-color:crimson;
}

.editoroverlay input.textbox:focus, input.textbox
.editoroverlay textarea:focus, .blockrow textarea {
    color:#eeeeee;
background:#25292c;
background-color:#25292c;
}

input.textbox:focus, input.textbox {
/* REMOVE UPDATE */
color:#eeeeee;
background:#25292c;
background-color:#25292c;
/* REMOVE UPDATE */
}

.editoroverlay p.shade {
    font-size:{vb:stylevar small_fontSize};
    margin-bottom:{vb:stylevar padding};
}

.editoroverlay div.foot {
    text-align:center;
    padding:{vb:stylevar padding};
    position:relative;
}

.editoroverlay.uploadoverlay div.foot {
    padding-bottom:0;
}

.editoroverlay.videooverlay input.textbox {
    width:95%;
    margin-top:{vb:stylevar padding};
}

/* Table Overlay */
.editoroverlay.tableoverlay .primary,
.editoroverlay.tableoverlay ul.checkradio.group {
    float:{vb:stylevar right};
    width:45%;
    margin-top:0;
    margin-bottom:5px;
}

.editoroverlay.tableoverlay ul.group li {
    margin-{vb:stylevar left}:0;
    float:none;
}

/* imageoverlay */

.editoroverlay.imageoverlay .blockrow .fullwidth > label {
    float:{vb:stylevar left};
    clear:both;
    width:25%;
    overflow:hidden;
    margin-top:{vb:stylevar padding};
}

.editoroverlay.imageoverlay .textbox {
    margin-top:0;
    width:95%;
}

.editoroverlay.imageoverlay div.imagetarget {
    margin-{vb:stylevar left}:25%;
    border:solid 1px {vb:stylevar mid_border.borderColor};
    padding:5px;
    font-size:{vb:stylevar small_fontSize};
    background-color:{vb:stylevar content3_background.backgroundColor};
}

.editoroverlay.imageoverlay #imageconfigtarget {
    max-width:100px;
    max-height:100px;
    height:auto !important;
    width:auto !important;
    width:100px;
    height:100px;
}

.editoroverlay.imageoverlay #imageconfigtarget.{vb:stylevar right} {
    float:{vb:stylevar right};
    margin-{vb:stylevar left}:5px;
}

.editoroverlay.imageoverlay #imageconfigtarget.{vb:stylevar left} {
    float:{vb:stylevar left};
    margin-{vb:stylevar right}:5px;
}

.editoroverlay.imageoverlay #imageconfigtarget.center {
    display:block;
    margin-{vb:stylevar left}:auto;
    margin-{vb:stylevar right}:auto;
}

.editoroverlay.imageoverlay #imageoverlay_progress {
    display:none;
    position:absolute;
    {vb:stylevar right}:{vb:stylevar padding};
}

.editoroverlay.uploadoverlay h2 {
    font-size: 123.1%;
    font-weight:bold;
}

.editoroverlay.uploadoverlay p,
.editoroverlay.uploadoverlay h2 {
    margin-bottom:5px;
}

.editoroverlay.uploadoverlay label {
    margin-bottom:2px;
}
.editoroverlay.uploadoverlay input.textbox {
    width:95%;
    margin-bottom:5px;
}
.editor {
    border-top-width: 0px;
}
.postpreview {
    border: {vb:stylevar formrow_border} ;
    border-top: 0px;
}


.right_editor_button{
    width: 25px;
    float: {vb:stylevar right};    

}
.right_editor_buttons{
    width: 52px;
    float: {vb:stylevar right};    
}

[Deadmau5]

got it

But

Can anyone say me how i can change the color from the Editor?!

Its Black..........but after posting in Thread its White?!

See Screenshot





Can anyone Help me Pls?