Styling zoom slider - claro.css

[AlistairDorman-Smith]

Hi
I am trying to integrate a map into a customer template, using their stylesheets etc, with the Javascript API.

I notice that if I include claro.css into my file, it styles everything on the page. It contains default styling which I simply don't want or need.

What I really want is to have the zoom slider styled properly, but I don't see how I can achieve this without all the other CSS that I don't need.

I'm new to ArcGIS Server and the JS API so would be grateful if someone can advise how I can access styling on the zoom slider without other styles I don't need.

Thanks.

[HemingZhu]

Hi
I am trying to integrate a map into a customer template, using their stylesheets etc, with the Javascript API.

I notice that if I include claro.css into my file, it styles everything on the page. It contains default styling which I simply don't want or need.

What I really want is to have the zoom slider styled properly, but I don't see how I can achieve this without all the other CSS that I don't need.

I'm new to ArcGIS Server and the JS API so would be grateful if someone can advise how I can access styling on the zoom slider without other styles I don't need.

Thanks.

You can overwrite certain style in claro.css by add your overwritten style on your page:

<style type="text/css">
.theStlyOnClaro.css
{
}
</style>

[AlistairDorman-Smith]

Thanks for the reply.

Unfortunately that suggestion you have made is not practical. It's not feasible to redefine everything that claro.css defines, as that will mean a lot of unnecessary time being spent and extra code being generated.

I don't really want to use claro.css anyway. I have a customer's template and branding guidelines which do the job - all I want to do is be able to style the zoom slider somehow. But unfortunately the styles seem to be locked away and I need to find a way of accessing them.

Can anyone suggest a way to style the zoom slider?

[HemingZhu]

Thanks for the reply.

Unfortunately that suggestion you have made is not practical. It's not feasible to redefine everything that claro.css defines, as that will mean a lot of unnecessary time being spent and extra code being generated.

I don't really want to use claro.css anyway. I have a customer's template and branding guidelines which do the job - all I want to do is be able to style the zoom slider somehow. But unfortunately the styles seem to be locked away and I need to find a way of accessing them.

Can anyone suggest a way to style the zoom slider?

I didn't suggest you redefine everything in the claro.css. What i said is only overwrite the style that defined the zoom slider. It is a common practice.

[AlistairDorman-Smith]

I think I have misunderstood your original suggestion, but I would be grateful if you could expand further.

claro.css contains reset css for default fonts, sizes, margins etc to be used. And then it does contain - like you say - the styling for the zoom slider and popups.

But short of redefining everything, I'm not sure I follow your suggestion!

If I don't want all the body.claro to be defined, but I do want classes like
.dijitSliderButtonInner
which are part of the slider.

There's a good chance I'm missing something obvious here, but grateful if you could explain further!

[HemingZhu]

I think I have misunderstood your original suggestion, but I would be grateful if you could expand further.

claro.css contains reset css for default fonts, sizes, margins etc to be used. And then it does contain - like you say - the styling for the zoom slider and popups.

But short of redefining everything, I'm not sure I follow your suggestion!

If I don't want all the body.claro to be defined, but I do want classes like
.dijitSliderButtonInner
which are part of the slider.

There's a good chance I'm missing something obvious here, but grateful if you could explain further!

I don't know exactly which style you want to overwrite. If it is just simple ones like width, height etc., you could use: esri.config.defaults.map.slider={left:"30px",top:"30px",width:null,height:"200px"} or esri.config.defaults.map.sliderLabel ={tick:5,labels:null,style:"width:2em; font-family:Verdana; font-size:75%;"} in your init() to change the default slider look. if you want change specific style like .dijitSliderButtonInner in the claro.css. you could do like this:

<style type="text/css">
.dijitSliderButtonInner {
    visibility: visible; !important
}
</style>
it will overwrite .dijitSliderButtonInner in you claro.css.

[AlistairDorman-Smith]

thanks for your reply. I've attached a screenshot of the issue I have - because I haven't included claro.css in my page (to avoid getting all the unwanted reset styles), the attached image shows what my zoom slider looks like at the moment!

Not very attractive!

Your reply seemed to indicate the practical option available to me is to refined the classes used to style this slider, but is there any way to find out a complete list? Maybe there is and that's a silly question but I don't know! If I open claro.css, it's a compressed css file, so hard to easily get the info out of there (again, unless I'm missing something!).

The same thing happens with my popups, so these would need to be styled too.

Thanks.

[HemingZhu]

thanks for your reply. I've attached a screenshot of the issue I have - because I haven't included claro.css in my page (to avoid getting all the unwanted reset styles), the attached image shows what my zoom slider looks like at the moment!

Not very attractive!

Your reply seemed to indicate the practical option available to me is to refined the classes used to style this slider, but is there any way to find out a complete list? Maybe there is and that's a silly question but I don't know! If I open claro.css, it's a compressed css file, so hard to easily get the info out of there (again, unless I'm missing something!).

The same thing happens with my popups, so these would need to be styled too.

Thanks.

dojo css files are pretty well designed for the most parts. It is recommended that you should include in the page and overwrite those style(s) only if you don't like them. It would be nice for ESRI to have detail doc about those css so we don't spend a lot of time digging out ourself.

[AlistairDorman-Smith]

I've now solved this issue and it turns out it was very simple!
All the ESRI documentation that I've read tells you to apply the claro class to the body tag, but actually, I only need to apply it to the map div.

It's one of those things that is so simple, you over look it.

[HemingZhu]

I've now solved this issue and it turns out it was very simple!
All the ESRI documentation that I've read tells you to apply the claro class to the body tag, but actually, I only need to apply it to the map div.

It's one of those things that is so simple, you over look it.

I am glad that you find your solution.

It is logical because most of the components (slider, scale bar, pan arrow) are with the map. However, if you are using toolbar, attribute inspector, template picker etc or some other dojo coponents datagrid etc, you still need to style them. A common way is to apply the css to the body tag.