Changing Dropdown Colors?

[Goss]

How would I go about adding or changing colors in the dropdown menu?  I'm using SMF 2.0 RC3.

Thank you in advance!

[Paul_Pauline]

This section of the themes index.css

Code Select Expand

/* Styles for the standard dropdown menus.
------------------------------------------------------- */
#main_menu
{
padding: 0 0.5em;
float: left;
margin: 0;
width: 98%;
}

.dropmenu, .dropmenu ul
{
list-style: none;
line-height: 1em;
padding: 0;
margin: 0;
}
.dropmenu
{
padding: 0 0.5em;
}
.dropmenu a
{
display: block;
color: #000;
text-decoration: none;
}
.dropmenu a span
{
display: block;
padding: 0 0 0 5px;
font-size: 0.9em;
}
/* the background's first level only */
.dropmenu li a.firstlevel
{
margin-right: 8px;
}
.dropmenu li a.firstlevel span.firstlevel
{
display: block;
position: relative;
left: -5px;
padding-left: 5px;
height: 22px;
line-height: 19px;
}
.dropmenu li
{
float: left;
padding: 0;
margin: 0;
position: relative;
}
.dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
width: 19.2em;
font-weight: normal;
border-bottom: 1px solid #999;
background: url(../images/theme/menu_gfx.png) 0 -130px no-repeat;
padding: 7px 0 0 0;
}
.dropmenu li li
{
width: 19em;
margin: 0;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.dropmenu li li a span
{
display: block;
padding: 8px;
}
.dropmenu li ul ul
{
margin: -1.8em 0 0 13em;
}

/* the active button */
.dropmenu li a.active
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% 0;
color: #fff;
font-weight: bold;
}
.dropmenu li a.active span.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
}
/* the hover effects */
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -30px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
.dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 -30px;
}
/* the hover effects on level2 and 3 */
.dropmenu li li a:hover, .dropmenu li li:hover>a
{
background: #d4dbe4;
color: #000;
text-decoration: none;
}
.dropmenu li:hover ul ul, .dropmenu li:hover ul ul ul
{
top: -999em;
}
.dropmenu li li:hover ul
{
top: auto;
}
.dropmenu li:hover ul
{
display: block;
}
.dropmenu li li.additional_items
{
background-color: #fff;
}

/* The dropdown menu toggle image */
#menu_toggle
{
float: right;
margin-right: 10px;
padding-top: 3px;
}
#menu_toggle span
{
position: relative;
right: 5000px;
}


[Goss]

Oops, sorry, I wasn't clear enough.  I want to add new colors to the drop-down menu in the editor.  The color selection menu is what I mean.

[YogiBear]

There are only so many colours which would be readable on a forum depending on your theme of course.

Which other colours do you have in mind?

[Goss]

For example, I want to add #47545D to the drop-down list.  I already know what colors I want, I just need to know where to put them and what the code looks like.  =)

[ARG01]

Well I found a color selector in default/scripts/editor.js. But, when I attempted to add another color (paleblue: '#47545D',) for some reason it removed the color selector completely. When I tried to change an existing color (teal: '#008080',) to teal: '#47545D', it just came out as standard blue.
I am no code genius but gave it a shot and cant figure out why it doesn't work.  Sorry.

[Goss]

After some browsing around, I managed to find somebody else's code and copied what they had done (just with 1 color instead of 100.  However, when I go into the editor, all of the buttons and edit options vanish and I have the following error:

8: Undefined index: COLOR#47545D
Apply Filter: Only show the errors from this file
File: ...../Themes/default/Post.template.php (main sub template - eval?)
Line: 194

I made the following changes trying to add in #47545D to the dropdown:
GenericControls.template.php

Code Select Expand

// Print a drop down list for all the colors we allow!
if (!isset($context['disabled_tags']['color']))
echo ',
{
sType: \'select\',
sName: \'sel_color\',
oOptions: {
\'\': ', JavaScriptEscape($txt['change_color']), ',
\'black\': ', JavaScriptEscape($txt['black']), ',
\'red\': ', JavaScriptEscape($txt['red']), ',
\'yellow\': ', JavaScriptEscape($txt['yellow']), ',
\'pink\': ', JavaScriptEscape($txt['pink']), ',
\'green\': ', JavaScriptEscape($txt['green']), ',
\'orange\': ', JavaScriptEscape($txt['orange']), ',
\'purple\': ', JavaScriptEscape($txt['purple']), ',
\'blue\': ', JavaScriptEscape($txt['blue']), ',
\'beige\': ', JavaScriptEscape($txt['beige']), ',
\'brown\': ', JavaScriptEscape($txt['brown']), ',
\'teal\': ', JavaScriptEscape($txt['teal']), ',
\'navy\': ', JavaScriptEscape($txt['navy']), ',
\'maroon\': ', JavaScriptEscape($txt['maroon']), ',
\'limegreen\': ', JavaScriptEscape($txt['lime_green']), ',
\'white\': ', JavaScriptEscape($txt['white']), ',
                                                                        \'#47545D\': ', JavaScriptEscape($txt['COLOR#47545D']), '
}
}';

Editor.js

Code Select Expand

// Color maps! (hex => name)
this.oFontColors = {
black: '#000000',
red: '#ff0000',
yellow: '#ffff00',
pink: '#ffc0cb',
green: '#008000',
orange: '#ffa500',
purple: '#800080',
blue: '#0000ff',
beige: '#f5f5dc',
brown: '#a52a2a',
teal: '#008080',
navy: '#000080',
maroon: '#800000',
limegreen: '#32cd32',
                47545D: '#47545D'
}

Post.english.php

Code Select Expand

$txt['change_color'] = 'Change Color';
$txt['black'] = 'Black';
$txt['red'] = 'Red';
$txt['yellow'] = 'Yellow';
$txt['pink'] = 'Pink';
$txt['green'] = 'Green';
$txt['orange'] = 'Orange';
$txt['purple'] = 'Purple';
$txt['blue'] = 'Blue';
$txt['beige'] = 'Beige';
$txt['brown'] = 'Brown';
$txt['teal'] = 'Teal';
$txt['navy'] = 'Navy';
$txt['maroon'] = 'Maroon';
$txt['lime_green'] = 'Lime Green';
$txt['white'] = 'White';
$txt['COLOR#47545D'] = 'Marked Blue';
I have subaccounts and Enhanced Dropdown installed.  Line 194 of the error seems to be in the middle of a subaccounts-related code.  Um, but yeah, I have no idea what each part of the code is actually meant to do so I can't give anymore insight than that.  ^^;

Edit: Thanks G1 for trying to help.  Sounds like we had similar issues.  ^_^

[Goss]

Any ideas?

[Deaks]

Goss do you still need help with this?

[Goss]

Actually, I've figured this out.  Thank you!

[Deaks]

can I ask what you did, incase someone else has this issue so we can redirect them here

[Goss]

In Editor.js I originally had this:

Code Select Expand

   // Color maps! (hex => name)
   this.oFontColors = {
      black: '#000000',
      red: '#ff0000',
      yellow: '#ffff00',
      pink: '#ffc0cb',
      green: '#008000',
      orange: '#ffa500',
      purple: '#800080',
      blue: '#0000ff',
      beige: '#f5f5dc',
      brown: '#a52a2a',
      teal: '#008080',
      navy: '#000080',
      maroon: '#800000',
      limegreen: '#32cd32',
      47545D: '#47545D'
   }

The new addition was:

Code Select Expand

47545D: '#47545D'

However, it should have been:

Code Select Expand

C47545D: '#47545D'

So, any new color that is added, when added in editor.js, has to have the C in front of the color hex code.