Overriding default CSS styles

Discontinued products DHTMLX Touch
#1

Hi

I wonder if anyone can point me in the right direction for this?
I’m using a segmented control, but I want it to fit the UI style of my app. I’ve used the following CSS to override the defaults:

[code].dhx_el_segmented {
background: #000;
margin: 0px;
padding-top: 2px;
padding-bottom: 2px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border: 1px solid #222;
border: none;
outline: none;
}

.dhx_el_segmented .segment_0,.dhx_el_segmented .segment_N,.dhx_el_segmented .selected.segment_0,.dhx_el_segmented .selected.segment_N {
border: 1px solid #222;
margin: 0px;
padding: 0px;
width: 152px;
font-weight: normal;
}

.dhx_el_segmented .segment_0,.dhx_el_segmented .selected.segment_0 {
border-bottom-left-radius:10px;
border-top-left-radius:10px;
}

.dhx_el_segmented .segment_N,.dhx_el_segmented .selected.segment_N {
border-bottom-right-radius:10px;
border-left: 1px solid #333;
border-top-right-radius:10px;
}

.dhx_el_segmented .segment_0,.dhx_el_segmented .segment_N {
background: #3a3a3a; /* Old browsers /
background: -moz-linear-gradient(top, #3a3a3a 0%, #848484 6%, #2b2b2b 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(6%,#848484), color-stop(100%,#2b2b2b)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #3a3a3a 0%,#848484 6%,#2b2b2b 100%); / Chrome10+,Safari5.1+ */
color: #000;
text-shadow: 0px 1px #666;
}

.dhx_el_segmented .selected.segment_0,.dhx_el_segmented .selected.segment_N {
background: #3f0000; /* Old browsers /
background: -moz-linear-gradient(top, #3f0000 0%, #aa0000 6%, #3f0000 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f0000), color-stop(6%,#aa0000), color-stop(100%,#3f0000)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #3f0000 0%,#aa0000 6%,#3f0000 100%); / Chrome10+,Safari5.1+ */
text-shadow: 0px -1px #200;
}[/code]

However, there is an annoying cyan border still visible above and below the buttons, so i’m guessing there is another element doing that, but there doesn’t seem to be any other way to override… any help appreciated!

:cry:

#2

Hi,

The overall border is set in the .dhx_all_segments css rule:

.dhx_all_segments{
border-width:0px;
}

#3

Hi Alexandra

Thanks for your help. When I look at it in the iPad Simulator via XCode (deployed via Cordova), it looks like this:

The white highlight at the bottom of both segments, and at the top of the “Date” segment is what I am trying to change - is it a box-shadow or something? If so, I can’t seem to control it.
On a mid-tone background like this it looks ok, but on a dark background, pure white highlights look terrible. I guess I will have to adapt my design :wink:
It doesn’t appear on Firefox, so I guess it may be a Webkit browser feature (assuming iPad Safari is webkit, which it is AFAIK)

Any further overides I can try?

Also, I notice that the container for the segmented control is 1px wider on either side than its parent container -

.dhx_el_segmented

has a margin and a border set to 0 though… :question:

Thanks again. I’m loving DHTMLX Touch so far - really flexible :slight_smile:

#4

erm. just read that last bit after I posted it - it sounded like sarcasm, but it really wasn’t! - this framework is cool and is helping me create a really nice app :smiley:

#5

Hi,

Thank you for your kind words about Touch library )

White highlight on the button is set by the box-shadow in dhx_all_segments:

-o-box-shadow: 0px 1px 1px #ebebeb;
-ms-box-shadow: 0px 1px 1px #ebebeb;
-moz-box-shadow: 0px 1px 1px #ebebeb;
-webkit-box-shadow: 0px 1px 1px #ebebeb;

The following will remove the shadow:

[code].dhx_all_segments{
border-width:0px;

-o-box-shadow: none;
-ms-box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

} [/code]

Also, I notice that the container for the segmented control is 1px wider on either side than its parent container -

I do not see this in the picture you sent. Could you please explain what you meant ?

There is online skinBuilder on our website. Possibly it’ll help to customize styles for components:

dhtmlx.com/touch/skinBuilder/