[CKEditor] Toolbar Background color

[Sarteck]

Thanks to TheWindows7Site, I can make the changes I wanted to make to the wrapper, and it wasn't hard to figure out how to change the area in which we type. Right now, I am trying to figure out how to change the colour for the toolbar, and the background colour for the individual buttons.

After a bit of mucking around, I found out that I could change the background color of the buttons using this (in additional.css):

.cke_skin_kama .cke_button a:hover,
.cke_skin_kama .cke_button a:focus,
.cke_skin_kama .cke_button a:active	/* IE */
{
	background-color: #333333!important;
}

However, I cannot find out how to change the background of the buttons while they are NOT "active." I've tried .cke_skin_kama .cke_button a and .cke_skin_kama .cke_button, with no luck.

In addition, I'd like to change the background of a GROUP of buttons. In the css, these are "cke_toolgroup" classes, but changing the background-color property doesn't seem to affect the group. (The "cke_toolbar" DOES change the background color, but only SURROUNDING the group.)

Could someone point me in the right direction?



[EDIT: Sorry, posted in vB3 by accident.]

[EquinoxWorld]

The buttons are controlled by :

.cke_skin_kama .cke_toolgroup {

which uses a sprite as a background for the buttons; all of them. You can use this to give color with the sprite used:

background-color: blue;

Hope that helps.

BTW edit the file itself and don't add the css in adittional. The file you need is in/forum/clientscript/ckeditor/skins/kama/toolbar.css

[Sarteck]

@EquinoxWorld, Thanks, I wish it did.... But it seems to not be the case. :< Not for me, anyways.

FireBug does tell me that the background-color: blue !important; property IS applied, but it doesn't seem to change anything.

This is the CSS that it usually has:

.cke_skin_kama .cke_toolgroup {
    display: block;
    height: 22px;
}

.cke_skin_kama .cke_toolgroup {
    -moz-border-radius: 5px 5px 5px 5px;
    background-image: url("images/sprites.png");
    background-position: 0 -500px;
    background-repeat: repeat-x;
    display: inline;
    float: left;
    margin-bottom: 5px;
    margin-right: 6px;
    padding: 2px;
}

(Of course, the background-position: changes with whichever sprite it's loading.)

I did try changing this before, too, but I figured maybe I made a mistake, so I tried again. XD I didn't have any lick.





EDIT: Whoops... I was wrong! I didn't have a space before the !important bit. O_O

It works now, thanks!





EDIT2: Weird.... When I try to change it to #000000, nothing does change. O.o But changing it to anything else works fine.

[EquinoxWorld]

Originally Posted by Sarteck

@EquinoxWorld, Thanks, I wish it did.... But it seems to not be the case. :< Not for me, anyways.

FireBug does tell me that the background-color: blue !important; property IS applied, but it doesn't seem to change anything.

This is the CSS that it usually has:

.cke_skin_kama .cke_toolgroup {
    display: block;
    height: 22px;
}

.cke_skin_kama .cke_toolgroup {
    -moz-border-radius: 5px 5px 5px 5px;
    background-image: url("images/sprites.png");
    background-position: 0 -500px;
    background-repeat: repeat-x;
    display: inline;
    float: left;
    margin-bottom: 5px;
    margin-right: 6px;
    padding: 2px;
}

(Of course, the background-position: changes with whichever sprite it's loading.)

I did try changing this before, too, but I figured maybe I made a mistake, so I tried again. XD I didn't have any lick.





EDIT: Whoops... I was wrong! I didn't have a space before the !important bit. O_O

It works now, thanks!

I just tried it myself. It worked just edit the css file itself. Download the file from your server at clientscript/ckeditor/skins/kama/toolbar.css and just add:

background-color: #xxxxxx;

to:

.cke_skin_kama .cke_toolgroup
{

[Sarteck]

Well, the buttons are awfully bright, and that's kind of horrible for our darker Styles--that's why I was trying to edit them in the first place.

But it's like there's some kind of filter on them that makes 'em brighter... Or something, I don't really know. Giving them a background-color of #000000 only makes them a light gray, for example.

Y'know what I'm saying?

[EquinoxWorld]

Originally Posted by Sarteck

Well, the buttons are awfully bright, and that's kind of horrible for our darker Styles--that's why I was trying to edit them in the first place.

But it's like there's some kind of filter on them that makes 'em brighter... Or something, I don't really know. Giving them a background-color of #000000 only makes them a light gray, for example.

Y'know what I'm saying?

Yeah I added background-color: #191919; to .cke_skin_kama .cke_toolgroup { makes them looks darker but the images themselves are to light and not sharp and bright enough to add a dark background. I got this playing with it in Chrome:

[Sarteck]

Is taht your Blackstream squared Style? (Just registered because I was going to check out your source, see if you had some different value somewhere than I did, heh.)

If so, then the darkness thing might be a FireFox (3.6) issue, since it seems lighter on my FF.

EDIT: Nice site by the way. X3

[EquinoxWorld]

Originally Posted by Sarteck

Is taht your Blackstream squared Style? (Just registered because I was going to check out your source, see if you had some different value somewhere than I did, heh.)

If so, then the darkness thing might be a FireFox (3.6) issue, since it seems lighter on my FF.

EDIT: Nice site by the way. X3

Thanks . Yeah that blackstream is the default , FF always has a bit different "read" to the color codes and stuff like that to Google Chrome. Right now I'm trying to see how I can change the actual icons to be lighter so I can use the set up I made in the previous posts. If you have any ideas let me know.

PS.: Welcome and thanks for registering.

[Sarteck]

Well, wouldn't you just have to lighten the sprite.png file?

I know less than nothing about image editing, myself, heh, but since all of the buttons are taken from there, T'would make sense, ya?