"Bookmark Widget - Read Only" - Two Questions

[JoshJones1]

Hey Everyone.



I previously asked a question about the "Bookmark Widget - Read Only" located at: http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_bookmarks_dropdownbutton.htm, and I was curious about two more aspects of the dropdown widget that I can't figure out on my own. 

First, Is there anyway to change the color/appearance of the dropdown button without changing the esri dojo/dijit theme?  I tried dissecting what I could using Firebug, but still couldn't figure out how to change the appearance of the button itself.

Secondly, I am going to be having ~100 cases in each dropdown button that will push the list much further than the height of most monitors, so I was curious if anybody knows a way in which to set the size of the height of the dropdown window, and then have a scrollbar for the users to scroll down to find the bookmark of their choice.


Thanks for any help you can give me.



-Josh

[KellyHutchins · Accepted solution]

You can find out more about customizing the dojo themes here:

http://dojotoolkit.org/reference-guide/1.7/dijit/themes.html


You can modify the button css using rules like these:

       .nihilo .dijitButtonNode{         background: blue;         color:white;         border:1px solid darkblue;        }        .nihilo .dijitButtonNode:hover{         background: gray;        }

The above rules modify the existing dojo theme style for the button to have a blue background - and then when  you hover over the button the background is gray.

You can add a scroll bar to the bookmark list by adding the following rule:
     
   

  .dijitTooltipContainer{         overflow:scroll;       }

[JoshJones1]

Thanks Kelly!


The one question I have (although it is probably self-explanatory to people not new to JS like myself), is how to get the scrollbar to properly work.  There are now scroll bars along the right and the bottom of the dropdown menu, but they are not active.   The dropdown menu still extends well below the bottom edge of the monitor.  I'm assuming i have to add the rule to a portion of the bookmark wrapper, but I still was not able to make it work properly.


Thanks for any help you can give me.


-Josh

[JoshJones1]

Nevermind!


I figured it out.  I just needed to set the height in the .esriBookmarks portion of the CSS.


Thanks again Kelly.


-Josh

[JanBenson]

My Basemaps  dropdown button appears as I would like it, but my bookmarks is different.  I cannot figure out how to change the text color, font, style, etc.  I saw the reference to customizing dojo themes  (http://dojotoolkit.org/reference-gui...it/themes.html) from above, but am still unclear how to do this  I am presuming I customize this in my generic css file?  However, how do I get the font color, size and type altered?  I tried adding a .claro td.dijitMenuItemLabel and a .claro td.dijit.TooltipDialog to my #bookmarks-wrapper in my css file, without any luck. 

Help and thanks.

[KellyHutchins]

Jan,

You should be able to customize this by adding the following to your css file.


   .claro .dijitButtonText {
        color:#03c;
        font-family: Arial, Helvetica, sans-serif
        font-weight:bold;
      }
      .claro td.dijitMenuItemLabel {
        color:#03c;
        font-family: Arial, Helvetica, sans-serif
        font-weight:500;
      }

[JanBenson]

I tried adding the code to my css file, but it did not change anything.  Does it matter that bookmarks uses data-dojo-type as opposed to dojoType which is used by basemaps?  Also, there is reference to <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/bookmarks.css>.  Would it help to copy this locally and try to make changes there?

Thanks.

[KellyHutchins]

I tried adding the code to my css file, but it did not change anything.  Does it matter that bookmarks uses data-dojo-type as opposed to dojoType which is used by basemaps?  Also, there is reference to <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/bookmarks.css>.  Would it help to copy this locally and try to make changes there?

Thanks.

No dojoType vs data-dojo-type shouldn't matter. Can you post a link to your app? Or a sample that shows the problem?

[JanBenson]

I got it working so it is close.  I add the following code to the css file under my #bookmarks-wrapper:

           .esriBookmarkHighlight{
            background: #c7dafc;
            }
            .esriBookmarkItem{
            color: #03c ;
            }
            .esriBookmarkItemLabel{
            font-size: 12pt;
            }

Thanks for the help!

[JoshJones1]

I am currently using four bookmark dropdowns, and then the same button and tooltip containers for two additional dropdown menus (for a total of six at the top of my website). 

I am able to style all of the buttons at once, but a problem I am having is assigning different styling to the different buttons.  Is there an easy way to distinguish the buttons in the CSS so that I am able to style them all independently instead of making changes that alter all six buttons?


Thank you very much.


-Josh