Layout Skin - CSS problem

Suite and Optimus Suite 5
#1

I think there is a missing CSS class in the skins from Skin Builder. The setCollapsedText() is showing the wrong skin:

The same sort of problem happened with the grid and you gave me the CSS fix, see: viewtopic.php?f=2&t=30885

Please help… thank you

#2

Locally everything works with new created and downloaded skin.
If you have directly “Yellow sand” skin without any custom settings you can try to rebuild it.

#3

I downloaded the skin to make sure it is current and the problem still exists.

Messing around in Chromes inspector, I found that when this background-image is enabled (which is the default) it is broken:

Capture1.PNG804×119 2.61 KB

Then when I manually remove the background-image, by unchecking the box it works:

Capture2.PNG800×97 2.48 KB

So I am not sure what to do.

#4

What DHTMLX, browser and OS version do you have?

#5

I am using dhtmlxSuite_v36_pro_131108 and Chrome.

#6

Have test on the same conditions - works correctly.
Please, provide us a direct link or completed demo on support@dhtmlx.com with a link to this topic - we will test it.

#7

I sent an email with a link.

Inside of dhtmlx.css, look for:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3),alpha(opacity=100); background-image: url('imgs/dhxlayout_dhx_skyblue/dhxlayout_collapsedhor2.gif');

When the background-image is removed in this file it works.

Please see my email for the working demo, the email subject is “Demo of Problem Described in Forum”

#8

Hi,
problem is confirmed, skin builder will be updated soon.
You may add the follow code in the end of dhtmlx.css to fix it right now:

table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBarCollapsedVer div.dhtmlxInfoBarLabel_collapsed_hor {
    background-image: none;
}

Thanks for your feedback.

#9

Super, I will make this change.

While you are looking at skin builder, I noticed another thing:

In all of the skins, in Blue Sky and Rose, only the active tab label is bold and the inactive tabs are normal. In all of the other skins, every tab label is bold regardless of its state.

Thank you very much for your great support and making a great product.

#10

Hi,
tab font bold/normal may be changed using option Title text -> Bold at tab Text.

#11

I see now.

The default functionality is to bold only the highlighted tab and bold the titles: dhtmlx.com/docs/products/dht … cript.html

The skin builder ties the title and tabs text-weights together.

#12

Hi,
you should add the follow code in the end of dhtmlx_custom.css:

.dhx_tab_element {
    font-weight: normal;
}
#13

Adding this:

.dhx_tab_element {
    font-weight: normal;
}

Then the active tab is normal, can only the active tab be bold?

#14

Please, modify the last fix according the follow code:

.dhx_tab_element>span {
    font-weight: normal;
}

.dhx_tab_element.dhx_tab_element_active>span {
    font-weight: bold;
}
#15

Thank you, this is great! Exactly the touch that was needed. Now the tab groups blend in nicely with the rest of page and it the bold active tab provides a good indicator as which tab is open.

There was one small typo (a ‘>’ instead of a space), here’s the change:

.dhx_tab_element span {
    font-weight: normal;
}

.dhx_tab_element.dhx_tab_element_active>span {
    font-weight: bold;
}

Is there a possibility that this might become a permanent change in the skins? Or should I add this code after each update?

#16

Here’s the typo fix:

.dhx_tab_element span {
    font-weight: normal;
}
.dhx_tab_element.dhx_tab_element_active span {
    font-weight: bold;
}
#17

We don’t have plans to make it as a separate option.

#18

I was thinking it would always be show only the active tab bold, as this is what the default sky blue skin does.

Then again, maybe you intend for it to be like this :slight_smile: My CSS judgement is not the best…for example, I thought the Rose skin would be the least selected, turns it is 3rd highest selected, here is the order: default, sea, rose, salad, sand, aut, sky, cloud

#19

Hi again, bmcgin
Could you clarify the last your post, please?

#20

I was suggesting that you might want to not worry about making the tab bolding an option. Just always bold the active tab and always keep the non-active tabs normal.

You have provided a way to do this with the CSS update, and I will use it. It just seems like this should be the default when the skin is downloaded.

But then again, that is a decision which is up to you…my css judgement is not always keen.