What are select menus?

[Stinky666]

In visual editor for colors and styles, I have no idea what "select menus" are, under "forms".
I assumed they were the drop down menus for stuff such as "action" and "select" and "font" and "font size", but when I edit the select menu, none of those change. So, I am confused as to what they edit.

Does anyone know?


Edit:
if these aren't for the drop down menu's, how does one edit the colours for those? They are always white, and on a dark theme, stand out like a sore thumb. Thanks =)


Edit 2:
Just realised haha, they are the drop downs in the search page.
So yeah, how to change the drop down for "action", "select" and all those similar?

[Tumbleweed]

This is the css for most of them. I know that isn't what you asked (change in visual)but in case anyone is interested.


"Search"
.ui-search > .search-input

"Action" , "Select" and "Post Options"
.controls div

The drop down itself for Select, Action
.controls ul

"Quote", "Edit" and "Thumbs up"
.controls a

"Quick Repy"
.quick-reply input 

"Arrow" for the drop down
span.arrow.down

"Create Post"
span.float-right input

[RADesign]

Feb 4, 2013 20:59:13 GMT -8 Stinky666 said:

Edit:
if these aren't for the drop down menu's, how does one edit the colours for those? They are always white, and on a dark theme, stand out like a sore thumb. Thanks =)

Change the colors of the Select/Action buttons.
/* CSS Arrows */ Add this line below  the last line  for the color of the box behind the arrow. The border-left-color is the color of the vertical line.	.arrow.down {  background-color: transparent; border-left-color: #202020; }
/* Containers and Dialogs */ Change this line for the background color of the text  box and/or the border. You can also set the rounded corners.	.ui-selectMenu-box { .rounded-corners(4px); background-color: #0C0E10; border: 1px solid #0C0E10;   }
Change this  line for the color of the arrow.	.ui-selectMenu-box .arrow.down > span  { border-top-color: #3f719a; }
You can  change the color of the text in this line.	.container  > .control-bar > .controls { float: right; padding: 5px; color: #b6c4d0; }
Change the  colors of the arrows in the drop-down menu's.
/* CSS Arrows */ Change these 4 lines.	.arrow.up > span  { margin-left: -4px;  margin-top: -6px;  border-bottom-color: @container_links_color; }
( you can replace @container_links_color  with a #color)	.arrow.right  > span {  margin-left: -2px;  margin-top: -4px;  border-left-color: @container_links_color; }
	.arrow.down  > span { margin-left: -4px; margin-top: -2px; border-top-color: @container_links_color; }
	.arrow.left  > span {  margin-left: -7px;  margin-top: -4px;  border-right-color: @container_links_color; }
Change the  dropdown menu colors
Add these lines to the bottom of the  CSS.	.options_menu, .options_menu ul, .select_menu_list, .select_menu_list ul, .smiley-menu, .smiley-menu ul, .ui-menu-context, .ui-menu-context ul{
To change the  color of the borders.	border-top-color: #202020;
"	border-right-color: #202020;
"	border-bottom-color: #202020;
"	border-left-color: #202020;
To change the  shadow color.	box-shadow: 0px 2px 4px #444444;
To change the  background color.	background-color: rgb(12, 14, 16);
	}
To change the  color of the menu-text.	.options_menu  li > a, .select_menu_list li > a,  .smiley-menu li > a, .ui-menu-context  li > a { color: #3f719a; }
To change the  color of the menu-text in the wysiwyg-editor	.ui-wysiwyg .button  { color: #3f719a; }
Change the  Side-bar (vert. line) in the drop-down menu's.
Add this line to  the bottom of the CSS. Enter the path to your image in the url.  Image-size: 300x30px (transparent)	.options_menu li, .select_menu_list li, .ui-menu-context li { background-image: url("http://i28./c236/radesign100/IODv5/IODv5b-DropDownMenuSide-bar.png"); }

Please re-host the image in the last line.

[Stinky666]

RADesign, POTD (post of the day) goes to you, by far.
This is awesome, and I seriously love you for it

I'm having a couple of problems though (nothing serious, I don't think):

1 - Where the vertical line image goes, there is a border from the default style and the text is black. I tried using "color: #8f8c85;" but it didn't work.

2 - When I hover over the arrows for the menus, the default/old arrow shows. I don't see it above, but possibly I am just going blind haha.

3 - In the WYSIWYG, when I click on "font size", it opens (or 'drops') ABOVE rather than below.

4 - When I hover over anything it too is the old default hover (for example when I hover over a smiley, or when I am in font face and size)

I've attached some screenshots to hopefully show you what I mean.


/* Containers and Dialogs */
.ui-selectMenu-box { .rounded-corners(4px); background-color: #202020; border: 1px solid #1a1918;   }
.ui-selectMenu-box .arrow.down > span  { border-top-color: #1a1918; }
.container  > .control-bar > .controls { float: right; padding: 5px; color: #8f8c85; }

/* CSS Arrows */
.arrow.down {  background-color: transparent; border-left-color: #202020; }
.arrow.up > span  { margin-left: -4px;  margin-top: -6px;  border-bottom-color: @container_links_color; }
.arrow.right  > span {  margin-left: -2px;  margin-top: -4px;  border-left-color: @container_links_color; }
.arrow.down  > span { margin-left: -4px; margin-top: -2px; border-top-color: @container_links_color; }
.arrow.left  > span {  margin-left: -7px;  margin-top: -4px;  border-right-color: @container_links_color; }

options_menu, .options_menu ul, .select_menu_list, .select_menu_list ul, .smiley-menu, .smiley-menu ul, .ui-menu-context, .ui-menu-context ul {
border-top-color: #1a1918;
border-right-color: #1a1918;
border-bottom-color: #1a1918;
border-left-color: #1a1918;
box-shadow: 0px 2px 1px #444444;
background-color: #202020;
}

li > a, .select_menu_list li > a,  .smiley-menu li > a, .ui-menu-context  li > a { color: #8f8c85; }
.ui-wysiwyg .button  { color: #8f8c85; }

.options_menu li, .select_menu_list li, .ui-menu-context li { background-color: #202020; background-image: url('http://i1303./ag142/stinky666pbthemes/vertical-side2_zps05d5e47b.png'); }

Attachments:

[RADesign]

Feb 5, 2013 11:43:55 GMT -8 Stinky666 said:

I'm having a couple of problems though (nothing serious, I don't think):

1 - Where the vertical line image goes, there is a border from the default style and the text is black. I tried using "color: #8f8c85;" but it didn't work.
Changing the color: #8f8c85 in this line:
.container  > .control-bar > .controls { float: right; padding: 5px; color: #8f8c85; }
works just fine for me (I just tried).

2 - When I hover over the arrows for the menus, the default/old arrow shows. I don't see it above, but possibly I am just going blind haha.
I haven't figured out the hover colors yet (because the default is just fine for me .

3 - In the WYSIWYG, when I click on "font size", it opens (or 'drops') ABOVE rather than below.
You are a missing part of the css in this line:
li > a, .select_menu_list li > a,  .smiley-menu li > a, .ui-menu-context  li > a { color: #8f8c85; }
Replace it with this:
.options_menu  li > a, .select_menu_list li > a,  .smiley-menu li > a, .ui-menu-context  li > a { color: #8f8c85;  }

4 - When I hover over anything it too is the old default hover (for example when I hover over a smiley, or when I am in font face and size)
Same answer as in 2.
 

[Stinky666]

Feb 6, 2013 9:35:09 GMT -8 RADesign said:

Feb 5, 2013 11:43:55 GMT -8 Stinky666 said:

I'm having a couple of problems though (nothing serious, I don't think):

1 - Where the vertical line image goes, there is a border from the default style and the text is black. I tried using "color: #8f8c85;" but it didn't work.
Changing the color: #8f8c85 in this line:
.container  > .control-bar > .controls { float: right; padding: 5px; color: #8f8c85; }
works just fine for me (I just tried).

2 - When I hover over the arrows for the menus, the default/old arrow shows. I don't see it above, but possibly I am just going blind haha.
I haven't figured out the hover colors yet (because the default is just fine for me .

3 - In the WYSIWYG, when I click on "font size", it opens (or 'drops') ABOVE rather than below.
You are a missing part of the css in this line:
li > a, .select_menu_list li > a,  .smiley-menu li > a, .ui-menu-context  li > a { color: #8f8c85; }
Replace it with this:
.options_menu  li > a, .select_menu_list li > a,  .smiley-menu li > a, .ui-menu-context  li > a { color: #8f8c85;  }

4 - When I hover over anything it too is the old default hover (for example when I hover over a smiley, or when I am in font face and size)
Same answer as in 2.
 

1 - Ok changing the colour for number 1 has resulted in how I want it, except the white borderr (padding?) still remains. I did change "padding" in that from 5px to 0px, yet I saw nothing change at all.

2 + 4 - Alrighty. If you do figure the hover out, I'd really appreciate you letting me know. If I do, I will tell you (doubt I will, but stranger things have happened haha ). Or maybe we could ask Brian if he knows? We'd really love you more if you did Brian

3 - hahahaha that fixed it.
It's because I copied and pasted ALL of that table, and then went through quickly to erase the explanations/descriptions on the left side. Must have carried over a bit too much and deleted the start of that bit of css.



Thanks a bunch btw, this looks better than stupid default colours.
I'm surprised they haven't put this in the Visual Editor tbh.

[RADesign]

Feb 6, 2013 10:35:43 GMT -8 Stinky666 said:

1 - Ok changing the colour for number 1 has resulted in how I want it, except the white borderr (padding?) still remains.

Hmm, can you get me a screenshot?

[Stinky666]

Feb 6, 2013 10:55:33 GMT -8 RADesign said:

Feb 6, 2013 10:35:43 GMT -8 Stinky666 said:

1 - Ok changing the colour for number 1 has resulted in how I want it, except the white borderr (padding?) still remains.

Hmm, can you get me a screenshot?

If you notice as well, the "action" text is black, no clue why that is. I have nothing set to black. Code I have is below.


The border is like that for both the thread page, and the posting page.
Text for everything else, is the colour I want it: 8f8c85 (a nice greyish colour)

/* Menus (Action, Select etc)*/
/* Containers and Dialogs */
.ui-selectMenu-box { .rounded-corners(4px); background-color: #202020; border: 1px solid #1a1918;   }
.ui-selectMenu-box .arrow.down > span  { border-top-color: #1a1918; }
.container  > .control-bar > .controls { float: right; padding: 5px; color: #1a1918; }

/* CSS Arrows */
.arrow.down {  background-color: transparent; border-left-color: #202020; }
.arrow.up > span  { margin-left: -4px;  margin-top: -6px;  border-bottom-color: @container_links_color; }
.arrow.right  > span {  margin-left: -2px;  margin-top: -4px;  border-left-color: @container_links_color; }
.arrow.down  > span { margin-left: -4px; margin-top: -2px; border-top-color: @container_links_color; }
.arrow.left  > span {  margin-left: -7px;  margin-top: -4px;  border-right-color: @container_links_color; }

options_menu, .options_menu ul, .select_menu_list, .select_menu_list ul, .smiley-menu, .smiley-menu ul, .ui-menu-context, .ui-menu-context ul {
border-top-color: #1a1918;
border-right-color: #1a1918;
border-bottom-color: #1a1918;
border-left-color: #1a1918;
box-shadow: 0px 2px 1px #444444;
background-color: #202020;
}

.options_menu li > a, .select_menu_list li > a,  .smiley-menu li > a, .ui-menu-context  li > a { color: #8f8c85; }
.ui-wysiwyg .button  { color: #8f8c85; }

.options_menu li, .select_menu_list li, .ui-menu-context li { background-color: #202020; background-image: url('http://i1303./ag142/stinky666pbthemes/vertical-side2_zps05d5e47b.png'); }


exdat.freemessageboards.com - the default theme

[RADesign]

You left out the . (dot) at the beginning of this line:

options_menu, .options_menu ul, .select_menu_list, .select_menu_list ul, .smiley-menu, .smiley-menu ul, .ui-menu-context, .ui-menu-context ul {

It should read:

.options_menu, .options_menu ul, .select_menu_list, .select_menu_list ul, .smiley-menu, .smiley-menu ul, .ui-menu-context, .ui-menu-context ul {

[Stinky666]

Feb 6, 2013 22:10:25 GMT -8 RADesign said:

You left out the . (dot) at the beginning of this line:

options_menu, .options_menu ul, .select_menu_list, .select_menu_list ul, .smiley-menu, .smiley-menu ul, .ui-menu-context, .ui-menu-context ul {

It should read:

.options_menu, .options_menu ul, .select_menu_list, .select_menu_list ul, .smiley-menu, .smiley-menu ul, .ui-menu-context, .ui-menu-context ul {

Hahahahahaahahahahaha only I can screw something that simple up
That fixed it Thanks.


Also, i did try that mini profile css, but because I have 2 different mini profile background colours, I need to use 4 images and couldn't be bothered to figure out how Thanks anyway for that too though.

If you haven't already, you should share this stuff.

[Stinky666]

Brian, or anyone else.. any idea how to change the colour for the hover stuff?

[Brian]

Feb 13, 2013 17:04:51 GMT -8 Stinky666 said:

Brian, or anyone else.. any idea how to change the colour for the hover stuff?

This... maybe.

.options_menu li:hover > a,
.select_menu_list li:hover > a,
.smiley-menu li:hover > a,
.ui-menu-context li:hover > a { background-color: #f3f33f; color: #000; }

You're referring to the super light blue hover for the menu options when you click the gear icon, right? This should affect all of them everywhere.

[Stinky666]

Feb 14, 2013 9:24:33 GMT -8 Brian said:

Feb 13, 2013 17:04:51 GMT -8 Stinky666 said:

Brian, or anyone else.. any idea how to change the colour for the hover stuff?

This... maybe.

.options_menu li:hover > a,
.select_menu_list li:hover > a,
.smiley-menu li:hover > a,
.ui-menu-context li:hover > a { background-color: #f3f33f; color: #000; }

You're referring to the super light blue hover for the menu options when you click the gear icon, right? This should affect all of them everywhere.

I knew I loved you for a reason
Thanks yet again.

I did have to add some stuff though, because it for some reason kept a border that was rounded. So I added border-top and the other 3, set a 1px border that matched the window/background colour, and I had to also add the custom vertical side image.. But it works

I tried copying your above method on the arrows, but it failed.. Any ideas?
Quite literally the arrow on "action" and similar. The hover, again.


/* CSS Arrows */
.arrow.down { background-color: transparent; border-left-color: #1b1510; }
.arrow.up > span { margin-left: -4px; margin-top: -6px; border-bottom-color: @container_links_color; }
.arrow.right > span { margin-left: -2px; margin-top: -4px; border-left-color: @container_links_color; }
.arrow.down > span { margin-left: -4px; margin-top: -2px; border-top-color: @container_links_color; }
.arrow.left > span { margin-left: -7px; margin-top: -4px; border-right-color: @container_links_color; }

[Brian]

Feb 14, 2013 15:27:11 GMT -8 Stinky666 said:

Feb 14, 2013 9:24:33 GMT -8 Brian said:

This... maybe.
You're referring to the super light blue hover for the menu options when you click the gear icon, right? This should affect all of them everywhere.

I knew I loved you for a reason
Thanks yet again.

I did have to add some stuff though, because it for some reason kept a border that was rounded. So I added border-top and the other 3, set a 1px border that matched the window/background colour, and I had to also add the custom vertical side image.. But it works

I tried copying your above method on the arrows, but it failed.. Any ideas?
Quite literally the arrow on "action" and similar. The hover, again.


/* CSS Arrows */
.arrow.down { background-color: transparent; border-left-color: #1b1510; }
.arrow.up > span { margin-left: -4px; margin-top: -6px; border-bottom-color: @container_links_color; }
.arrow.right > span { margin-left: -2px; margin-top: -4px; border-left-color: @container_links_color; }
.arrow.down > span { margin-left: -4px; margin-top: -2px; border-top-color: @container_links_color; }
.arrow.left > span { margin-left: -7px; margin-top: -4px; border-right-color: @container_links_color; }

If any of them don't work, try adding !important to the end of them. That typically fixes it.

[Stinky666]

Feb 14, 2013 15:38:12 GMT -8 Brian said:

Feb 14, 2013 15:27:11 GMT -8 Stinky666 said:

I knew I loved you for a reason
Thanks yet again.

I did have to add some stuff though, because it for some reason kept a border that was rounded. So I added border-top and the other 3, set a 1px border that matched the window/background colour, and I had to also add the custom vertical side image.. But it works

I tried copying your above method on the arrows, but it failed.. Any ideas?
Quite literally the arrow on "action" and similar. The hover, again.


/* CSS Arrows */
.arrow.down { background-color: transparent; border-left-color: #1b1510; }
.arrow.up > span { margin-left: -4px; margin-top: -6px; border-bottom-color: @container_links_color; }
.arrow.right > span { margin-left: -2px; margin-top: -4px; border-left-color: @container_links_color; }
.arrow.down > span { margin-left: -4px; margin-top: -2px; border-top-color: @container_links_color; }
.arrow.left > span { margin-left: -7px; margin-top: -4px; border-right-color: @container_links_color; }

If any of them don't work, try adding !important to the end of them. That typically fixes it.

I actually discovered the above isn't the arrow I need, I don't think anyway. But I have attempted the css on all the different sections, adding the li:hover > a to them all, and even tried adding !important, as suggested, but nothing works for me