Member Bio
Currently: Offline
Joined: November 2011
Gender: Undisclosed
Posts: 65
|
Post by cvekiboy on Nov 9, 2014 19:19:27 GMT 1
Please help me fix my buttons! 3MAJ ClanHere 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
|
|
Member Bio
Currently: Offline
Joined: March 2009
Gender: Male
Posts: 2,233
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/WF6qGGLds2CwwnCEPB26.png
Badges
|
Post by Admin ( FKA RADesign ) on Nov 10, 2014 20:33:32 GMT 1
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
|
|
Member Bio
Currently: Offline
Joined: November 2011
Gender: Undisclosed
Posts: 65
|
Post by cvekiboy on Nov 11, 2014 2:52:43 GMT 1
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
|
|
Member Bio
Currently: Offline
Joined: March 2009
Gender: Male
Posts: 2,233
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/WF6qGGLds2CwwnCEPB26.png
Badges
|
Post by Admin ( FKA RADesign ) on Nov 11, 2014 19:59:44 GMT 1
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?
|
|
Member Bio
Currently: Offline
Joined: November 2011
Gender: Undisclosed
Posts: 65
|
Post by cvekiboy on Nov 11, 2014 21:33:10 GMT 1
Exactly that! ROCKS! Login out... END
|
|
Member Bio
Currently: Offline
Joined: March 2009
Gender: Male
Posts: 2,233
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/WF6qGGLds2CwwnCEPB26.png
Badges
|
Post by Admin ( FKA RADesign ) on Nov 12, 2014 7:17:44 GMT 1
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
|
|
Member Bio
Currently: Offline
Joined: March 2009
Gender: Male
Posts: 2,233
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/WF6qGGLds2CwwnCEPB26.png
Badges
|
Post by Admin ( FKA RADesign ) on Nov 12, 2014 18:15:56 GMT 1
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
|
|
Member Bio
Currently: Offline
Joined: November 2011
Gender: Undisclosed
Posts: 65
|
Post by cvekiboy on Nov 12, 2014 20:25:46 GMT 1
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
|
|
Member Bio
Currently: Offline
Joined: March 2009
Gender: Male
Posts: 2,233
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/WF6qGGLds2CwwnCEPB26.png
Badges
|
Post by Admin ( FKA RADesign ) on Nov 12, 2014 22:46:39 GMT 1
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.
|
|
Member Bio
Currently: Offline
Joined: November 2011
Gender: Undisclosed
Posts: 65
|
Post by cvekiboy on Nov 13, 2014 0:40:26 GMT 1
Right on spot! For BullsEye, please stop my Create Thread_btn hover-dance! o/ - make him work like pagination numbers. Login out... END
|
|
Member Bio
Currently: Offline
Joined: March 2009
Gender: Male
Posts: 2,233
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/WF6qGGLds2CwwnCEPB26.png
Badges
|
Post by Admin ( FKA RADesign ) on Nov 13, 2014 11:55:24 GMT 1
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; }
|
|
Member Bio
Currently: Offline
Joined: November 2011
Gender: Undisclosed
Posts: 65
|
Post by cvekiboy on Nov 13, 2014 12:46:20 GMT 1
Did, and is weirdo now Login out... END
|
|
Member Bio
Currently: Offline
Joined: March 2009
Gender: Male
Posts: 2,233
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/WF6qGGLds2CwwnCEPB26.png
Badges
|
Post by Admin ( FKA RADesign ) on Nov 13, 2014 13:48:50 GMT 1
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;)
|
|
Member Bio
Currently: Offline
Joined: November 2011
Gender: Undisclosed
Posts: 65
|
Post by cvekiboy on Nov 13, 2014 14:46:25 GMT 1
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
|
|
Member Bio
Currently: Offline
Joined: March 2009
Gender: Male
Posts: 2,233
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/WF6qGGLds2CwwnCEPB26.png
Badges
|
Post by Admin ( FKA RADesign ) on Nov 13, 2014 19:00:39 GMT 1
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; } 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; }
|
|