MyBB Community Forums

Hey guys,

SITE URL - http://theprofiters.com

Just a small issue, I just got a custom theme yesterday and it has a colour picker so individual users can choose what colour they want the categories to be. But when they select the colour wheel it appears underneath the tabs and I would like them to appear above.

Screenshots:





Hope somebody can help,

~Hostpro

You've to ask support from envira.

someone else had this problem recently not with this theme though. search the forums for overlapping tabs or something.

it was fixed aswell.

(2012-05-21, 08:31 AM)Yaldaram Wrote: [ -> ]You've to ask support from envira.

Envira told me it's a problem with the tabs and not his colour picker theme,

~Hostpro

Change the z-index CSS property for the tabs. Google z-index.

---

Ok open your "colourpicker.css" and find the ".colourpicker" css class. Add this to that class:

z-index:1;

In the CSS file: Tabbed.css
Change the following:

Change this:

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

To this:

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
z-index:-1;
}

Not 100% sure if you would need position absolute in your case. If you do you will have to space-out some things properly again.
But check:
http://css-tricks.com/video-screencasts/...on-values/
For more information about it.

More information about z-index look here:
http://css-tricks.com/almanac/properties/z/z-index/

If that doesnt work you can always try to edit the colorpicker.css

Change:

.colorpicker {
	width: 356px;
	height: 176px;
	overflow: hidden;
	position: absolute;
	background: url(cp/colorpicker_background.png);
	font-family: Arial, Helvetica, sans-serif;
	display: none;
        margin-left:-300px;
}

To something like

.colorpicker {
	width: 356px;
	height: 176px;
	overflow: hidden;
	position: absolute;
	background: url(cp/colorpicker_background.png);
	font-family: Arial, Helvetica, sans-serif;
	display: none;
        margin-left:-300px;
        z-index:10;
}

I think the second option would work better but not 100% sure. Just adjust the z-index to what ever value overlaps the menus something 1+ should work probably.

All you need to add is "z-index:1;" to the colourpicker class in colourpicker.css