IOD buttons - so sexy!

[cvekiboy]

Please help me fix my buttons!
3MAJ Clan
Here on IOD, they are matched with forum color scheme!
To be specific: Select & Action drop-down boxes, Search, New Thread, Post Options, ...
They move on hover, background is twisted, etc.
If they can be tweaked so have similar look like pagination buttons have - it would be perfect!

I tried messing with CSS on line 461 which affects it with poor results
.ui-selectMenu-box { border: 1px solid darken(@container_inner_border_color, 20%); }

I be patient, and do step by step. Just give me directions with what and where to start.

Muchas Gracias in advance.

Login out...

END

[Admin ( FKA RADesign )]

Seems like an easy enough question, but..... the answer(s) is/are a lot harder.

First of all, you are addressing a lot of different items as if they are all the same (which they are not).

So, let's split it up:

1 - The Action bar background (color)

2 - The pagination colors

3 - The Select and Action buttons

4 - The drop-down boxes

5 - The added buttons (like New Thread, etc.)

Each of these items has its own specifics (colors, background images, borders, etc.) but since they are all in the same area, they will interact with each other, making it look good or bad.

Let's start at the beginning: 1 - The Action bar background.

I think you could improve things a lot if you choose a different color or, even better, a background image rather then the black color you're using right now.

This way you would actually see the border: { border: 1px solid darken(@container_inner_border_color, 20%); }

(darkening a black border on a black background doesn't have much effect )

... to be continued

[cvekiboy]

Thanks RA for peaking into this matter and your suggestion.
Wish I can leave that top bar as it is and only copy the style that pagination buttons have them now to the rest of the mentioned objects.
That way, hovering over the action dropdown box to reveal a whole button by showing the brown-orange border.

To accomplish this I messed a bit with my n00b knowledge to invert background and text (black/white).
sample:
.ui-selectMenu-box { font: @nav_tree_font; color: #dbdbdb; background-color: #000000; border: 1px solid darken(@container_inner_border_color, 20%); }


Maybe its not right way, but affects the desired look.

Login out...

END

[Admin ( FKA RADesign )]

No problem, it was just a suggestion.

Since you decided to keep the Action bar and Pagination colors we can move on to the Select and Action buttons.

So, is this what you had in mind?

[cvekiboy]

Exactly that!
ROCKS!

Login out...

END

[Admin ( FKA RADesign )]

In the image above I changed the css for the Select and Action buttons, as well as the Search box.
Replace all lines from .ui-selectMenu-box untill and including .ui-search .search-filters-button with the lines below:

.ui-selectMenu-box { .rounded-corners(4px); background-color: #000000; border: 1px solid #525252; color: #525252;}
.ui-selectMenu-box:hover .arrow { background-image: none; background-color: #823609;  border-left-color: #171717; }
.ui-selectMenu-box .arrow.down > span { border-top-color: #823609; }
.ui-selectMenu-box:hover .arrow > span { border-top-color: #525252; }
.ui-dialog { .rounded-corners(); background-color: @container_outer_border_color; background-color: hsla(hue(@container_outer_border_color), saturation(@container_outer_border_color), lightness(@container_outer_border_color), .5); }
.ui-dialog .ui-dialog-titlebar-close:hover span, .ui-dialog .ui-dialog-titlebar-close:focus span { background-image:url('http://images.proboards.com/v5/ui-icons.png'); background-position: -20px, 0px; }
.ui-dialog div.ui-dialog-buttonpane { text-align: left; margin-top: 10px; padding: 0 0 0 10px; border-width: 1px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.ui-dialog div.section { text-align: center; background-color: @container_background_color_1; border-width: 1px; border-style: solid; border-color: @container_inner_border_color; .rounded-corners(10px); padding: 10px; margin: 10px 0; }
.ui-search .search-input.filters-input { .rounded-corners(); }
.ui-search .search-input { background: transparent; color: #525252; line-height: 16px !important; padding: 2px; border-width: 1px; border-style: solid; border-color: #525252; .rounded-corners(4px, 0, 0, 4px); }
.ui-search .search-filters-button { display: inline-block; width: auto; height: auto; margin-left: -2px; min-height: 19px; padding: 3px 4px 2px 4px; border-width: 1px 1px 1px 0px !important; border-style: solid; border-color: #525252; .rounded-corners(0, 4px, 4px, 0); vertical-align: top; cursor: pointer; }

Since I picked the hex colors from a screenshot of your forum they might not be exact, so you might want to tweak those. These are the hex colors I used:

#000000 - Black

#525252 - Light grey

#823609 - Brown

#171717 - Dark grey

Next, find the /* CSS Arrows */ section (around line 390) in your css.
Below the last line in that section, add this:


.arrow.down { background-color: transparent; border-left-color: transparent; }

Edited to include the .arrow.down

[Admin ( FKA RADesign )]

Moving on to the drop-down menu's.

Since the drop-down menu's are not specified in the css, you'll have to add them manually.

I strongly suggest to add them TO THE BOTTOM of your css!

/* Change the colors of the drop-down menu's */
.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: 1px solid #525252; box-shadow: (0px 0px 0px); background-color: #000000; color: @default_forum_text_color; }

/* Change the colors of the drop-down menu's on hover */
.options_menu li:hover > a, .select_menu_list li:hover > a, .smiley-menu li:hover > a, .ui-menu-context li:hover > a { border-color: #171717; background-color: #171717; color: #823609; border-radius: 0px; }

/* Text color in drop-down menu's */
.options_menu li > a, .select_menu_list li > a, .smiley-menu li > a, .ui-menu-context li > a { color: @default_forum_text_color; }

Additionally you can opt to remove the box-shadow:

/* Remove the box-shadow */
.options_menu li ul, .select_menu_list li ul, .smiley-menu li ul, .ui-menu-context li ul { box-shadow: (0px 0px 0px); }

Check my previous post for the hex-colors.

Edited to include the text color in drop-down menu's

[cvekiboy]

Fantastic!

Admin ( FKA RADesign ) - "God of code" in this case!
I assume next are the Select & Action right part buttons (white to black) and inside menu active font color.


Login out...

END

[Admin ( FKA RADesign )]

Ah, I see.

Add these 2 lines to the bottom of your css:

.ui-selectMenu-box .arrow.down { border-left: 1px solid #171717; background: #000000; border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; }
.options_menu li > a, .select_menu_list li > a, .smiley-menu li > a, .ui-menu-context li > a { color: #525252; }

That 'should' do the trick.

[cvekiboy]

Right on spot!
For BullsEye, please stop my Create Thread_btn hover-dance! o/

- make him work like pagination numbers.

Login out...

END

[Admin ( FKA RADesign )]

Nov 13, 2014 0:40:26 GMT 1 cvekiboy said:

Right on spot!

No, that's not what it's supposed to do. Let me think....

Okay, forget what I told you in my previous post and delete those lines from you css.

Instead, look for the /* CSS Arrows */ section (around line 390) in your css.
Below the last line in that section, add this:

.arrow.down { background-color: transparent; border-left-color: transparent; }

[cvekiboy]

Did, and is weirdo now

Login out...

END

[Admin ( FKA RADesign )]

Add this to the bottom of your css:

/* Text color in drop-down menu's */
.options_menu li > a, .select_menu_list li > a, .smiley-menu li > a, .ui-menu-context li > a { color: @default_forum_text_color; }

(If your default_forum_text_color is not the light grey, then replace @default_forum_text_color; with #525252;)

[cvekiboy]

Done!
Are u plan to leave hover color on triangle buttons?
Was better b4, or simply make them gray on hover.
if you do, invert current triangle colors, please.

Just to ask: all first options that you posted worked like charm and was happy by look.
Why change? No need if that aint broken. Just to save you nerves cose Im annoying as you see.

Login out...

END

[Admin ( FKA RADesign )]

Nov 13, 2014 14:46:25 GMT 1 cvekiboy said:

Done!
Are u plan to leave hover color on triangle buttons?
Was better b4, or simply make them gray on hover.
if you do, invert current triangle colors, please.

To change the hover color of the box behind the arrow, just change the background-color in this line:
.ui-selectMenu-box:hover .arrow { background-image: none; background-color: #823609; border-left-color: #171717; }

To invert the color of the arrows (normal/hover), swap the border-top-colors in these lines:
.ui-selectMenu-box .arrow.down > span { border-top-color: #823609; .rounded-corners(4px); background-color: #000000; border-left-color: #171717;}
.ui-selectMenu-box:hover .arrow > span { border-top-color: #525252; }

Just to ask: all first options that you posted worked like charm and was happy by look.
Why change? No need if that aint broken. Just to save you nerves cose Im annoying as you see.

First of all, you're not annoying. We try to help any and all members here at IOD.

Secondly, css has the nasty habit of changing things in places you don't want to (and don't notice right away) if you're not carefull. So, I rather play it safe.

My main problem is that you've made some changes to your css that are not always obvious and sometimes I miss them the first time (and even the second time  ).

Which reminds me, you should be able to get rid of the Side-bar (vert. line) in the drop-down menu's on hover by adding "background-image: none" to the end of this line:

/* Drop-down menu's Hover */
.options_menu li:hover > a, .select_menu_list li:hover > a, .smiley-menu li:hover > a, .ui-menu-context li:hover > a { border-color: #171717; background-color: #171717; color: #823609; border-radius: 0px; background-image: none; }