Multi level Tabbar with different skins

Suite and Optimus Suite 5
#1

hi guys,

i’ve a layout with 2 cells. In the second one i put a tabbar and inside it a second tabbar where i put another layout and grids.

For my project i use dhx_skyblue skin but for the first tabbar i’d like to use a dhx_web skin. So i would have a sort of multiline tabbar with different look.

Is it possible in 4.0 . With 3.6 i realized it but now i 've some problem.

Thanks

#2

Hi

officially we do not support mixed skins

#3

Officially not ! but is there some workaround ? with 3.6 i was able to do it simply using setSkin !

#4

You can try to test the next demo code:

[code]

Integration with dhtmlxTabbar div#layoutObj { position: relative; margin-top: 20px; margin-left: 20px; width: 600px; height: 400px; } var myLayout, myTabbar; function doOnLoad() { myLayout = new dhtmlXLayoutObject({ parent: "layoutObj", pattern: "3L", skin: "dhx_skyblue" }); 
		myTabbar = myLayout.cells("a").attachTabbar({
			tabs: [
				{ id: "a1", text: "Tab 1", active: true },
				{ id: "a2", text: "Tab 2" }
			]
		});
		myTabbar.setSkin("dhx_web");
	}
</script>
[/code]
#5

Many thanks Darya,

Now i’m able to use different skin but previously i changed some charcteristic of web-skin (selected color white, unselected black and text always bold) using setCustomStyle that was very useful.

Now, if i understood correctly, i’ ve to modify css trough tag. The problem is how can i know what are the classes to use ?

Thanks again

#6

You can find them manually using your browser console tool “inspect element” as any other CSS elements. If there are some questions, you can attach here screenshots with marked elements you need to change - we will give you style names.

#7

Many thanks, i’m not so used with css.

#8

So, if there are some questions about it - just mark at screenshots. We will try to help )

#9

i believe to have understood that to change background color of single tab and the colors of active tab i have to use

div.dhxtabbar_tab and
div.dhxtabbar_tab.dhxtabbar_tab_actv

are they correct ? and how ? i tried in some ways without success

Thanks.

#10

Hi Darya and thank again for your patience.

I linked a snapshot of my application before (3.6) and after (4.0).

I sincerely prefer the old skyblue-style that was fine with ie8 that i’ve to use.

Anyway as you can see i’ve these problems:

  1. The text of tabs must be bold and the background color of tab not selected must be black.

  2. why there is a padding between layout and its contents (toolbar and grid) ?

  3. why there is space between toolbar and the grid header ?

  4. The top of toolbar seems to have missed the border-line or maybe is due to the padding from layout-border ?

  5. The grid has no border of header cells ?

  6. i’d like to have the same border also between the grid columns.

Many many many and many Thanks

Immagine.jpg768×614 20.4 KB

#11
  1. you can try the next styles:

.dhxtabbar_base_dhx_web div.dhxtabbar_tabs div.dhxtabbar_tab div.dhxtabbar_tab_text { font-weight: bold; } .dhxtabbar_base_dhx_web div.dhxtabbar_tabs div.dhxtabbar_tab { background-color: black; }
About the rest questions: it is skin features or results of mixed skins. You can mail on sales@dhtmlx.com to ask for some customization in your case.

#12

Many thanks Darya

I’m following your trick and i’m modifying the css trough the “inspector” but i still have a problem with header cell that has not the border even if in css is present. I’ve to use IE8 that have this problem while in other versions (ie10 for instance) there is not the problem.
How can i solve it in ie8 ?

thanks-