topic Re: Styling zoom slider - claro.css in ArcGIS JavaScript Maps SDK Questions

Styling zoom slider - claro.css

AlistairDorman-Smith — Mon, 16 May 2011 12:37:24 GMT

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.

Re: Styling zoom slider - claro.css

HemingZhu — Mon, 16 May 2011 13:06:35 GMT

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>

Re: Styling zoom slider - claro.css

AlistairDorman-Smith — Tue, 17 May 2011 07:45:17 GMT

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?

Re: Styling zoom slider - claro.css

HemingZhu — Tue, 17 May 2011 11:40:42 GMT

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.

Re: Styling zoom slider - claro.css

AlistairDorman-Smith — Tue, 17 May 2011 14:13:24 GMT

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!

Re: Styling zoom slider - claro.css

HemingZhu — Tue, 17 May 2011 16:52:44 GMT

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.

Re: Styling zoom slider - claro.css

AlistairDorman-Smith — Thu, 19 May 2011 13:54:41 GMT

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.

Re: Styling zoom slider - claro.css

HemingZhu — Thu, 19 May 2011 14:35:15 GMT

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.

Re: Styling zoom slider - claro.css

AlistairDorman-Smith — Fri, 20 May 2011 12:19:30 GMT

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.

Re: Styling zoom slider - claro.css

HemingZhu — Fri, 20 May 2011 12:34:28 GMT

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.

Re: Styling zoom slider - claro.css

AlistairDorman-Smith — Fri, 20 May 2011 12:51:39 GMT

Yes, I can see why it would be useful to apply the claro class to a wider context on the page to access other styling.

In this particular example of what I was doing I don't need that (as I was using a customer template) so this worked out well for me.

I'm still a little weary of the theme css files setting global styles for pages, but at least I'm aware of the issue now for any future project.

Thanks for your help.