Make Basemap Switcher bigger
I would like to make the basemap switcher and the flyout bigger. I have played around with google chrome dev tools and css but cant get it.
Any way to do this?
/customer/servlet/servlet.FileDownload?file=00P6000000elztHEAQ
/customer/servlet/servlet.FileDownload?file=00P6000000em1TdEAI
-
Hi Mark,
I took a look at this and it proved to be quite complicated, but I think I have found a solution through quite a few CSS changes. Before getting into the actual changes I will explain them to you.In advance, I would like to warn you that due to the classes applied to the elements of the basemap switcher, The styling between the compact toolbar and the basemap switcher are dependent on each other. Due to this I don't suggest making any of these changes if your site is configured to use the compact toolbar. If, however, you are using the tabbed toolbar, these changes will only impact the basemap switcher.
- The first 4 changes are just setting the height and width of the elements as you expect.
- The .shell-large .flyout-menu-collapsible-area:after change is due to some additional styling that makes it flow a bit nicer when at a smaller size, but this breaks when it is increased by a significant amount. If you would like you can keep it in and play around with the values to make it work out, but I personally didn't notice much of a difference with it completely removed.
- The .toolbar-body ul li, .flyout-menu ul li change is just to compensate for the increase in size, if this margin is not decreased you may experience the last item in the picker to fall off screen.
- Unfortunately we also have to make a change to Desktop.css and Tablet.css for this to function how we want it to, this is due to the property we are changing already having an !important tag which will override any changes we make in common.css for this property. Due to this the last css change needs to occur in both Desktop.css and Tablet.css (if you are using both shells).
- The final changes are completely optional, though I think scaling the text with the size of the increased containers looks better. You can also change the size of the icons within this view by
In common.css.flyout-menu-active-tool{
/*Change the height and width to the value you wish, In my example pictures I used 10em*/
}
.map-top-right .flyout-menu-tools,
.map-top-center .flyout-menu-tools,
.map-middle-right .flyout-menu-tools,
.map-bottom-right .flyout-menu-tools,
.map-bottom-center .flyout-menu-tools {
/* Same as the width of the active tool button */
}
.map-top-left .flyout-menu-tools,
.map-middle-left .flyout-menu-tools,
.map-bottom-left .flyout-menu-tools {
/* Same as the width of the active tool button */
}
.flyout-menu .toolbar-item li {
/* Set width to the same as the others above*/
}
.shell-large .flyout-menu-collapsible-area:after {
/*comment this section out */
}
.toolbar-body ul li,
.flyout-menu ul li {
/* Set margin to 0.1em */
}
In Desktop.css and Tablet.css look for the following selector:
.flyout-menu .toolbar-item {
/* Set the height to a bit smaller than the height you used in common.css, in my example I am using 9em */
}
Suggest changing the text to compensate for increased size:
.flyout-menu .toolbar-item p,
.flyout-menu .toolbar-item label,
.multi-tool-container .toolbar-item p,
.multi-tool-button{
/* set the font-size to a larger value, ex: 1em */
}
.flyout-menu-active-tool p {
/* set font size to same value as above */
}
Here are screenshots of before and after, I set the height and width to 10em and the font size to 1em in my example.
Before CSS Changes:
/customer/servlet/servlet.FileDownload?file=00P6000000elu3SEAQAfter CSS changes
/customer/servlet/servlet.FileDownload?file=00P6000000elzDMEAYHopefully this was somewhat helpful, let me know if you need any clarification on the property changes.
Cory Purnell,
Latitude Quality Assurance Team0 -
Thank you Cory. That looks amazing!
I will test this out soon. Lucky I am not using compact toolbar, so this is great.
0 -
Thanks Cory the size works great.
Next piece is to get full sized image in the button and text on top. ala google. I can get the image full size but cant get text on top.
/customer/servlet/servlet.FileDownload?file=00P6000000elzZcEAI
0 -
Perhaps just create the image with the text on it? I did this in Adobe Illustrator.
0 -
Hi Mark!
I had a quick talk with our developers and I actually found a way through some selectors to allow our CSS to only apply to the base map switcher. This is primarily just using a few additional selectors to target only the flyout menu tools used within the basemap selector. I will post all my CSS below in case you decide to use it (and for anyone who wants to change their base map slider).
Additionaly I took a look at placing the text at the bottom left of each base map picker for you. It proved to be a little tricky but I think I found a result that will do the job.
Note all this CSS can go within common.css. Unfortunately I had to use some !important tags to override existing selectors, I believe it may be possible to find a solution without using !important so much given enough time.
Here is the final result, note that the images I am using for the basemaps are small and had to be stretched to reach maximum size (which is why they look bad).
/customer/servlet/servlet.FileDownload?file=00P6000000em1L9EAI
Here is all the code I changed, you can revert your previous changes if you like and just place all these new selectors within your common.css file. Otherwise just take the last CSS Selector and use it to make the text appear ontop of the image.
/* Custom CSS changes for basemap switcher view */
.view .region .view.BasemapSwitcherButtonView .flyout-menu-active-tool{
height: 10em;
width: 10em;
}
.view .region .view.BasemapSwitcherButtonView .flyout-menu .map-top-right .flyout-menu-tools,
.map-top-center .flyout-menu-tools,
.map-middle-right .flyout-menu-tools,
.map-bottom-right .flyout-menu-tools,
.map-bottom-center .flyout-menu-tools {
right: 10em !important; /* Same as the width of the active tool button */
}
.view .region .view.BasemapSwitcherButtonView .flyout-menu .map-top-left .flyout-menu-tools,
.map-middle-left .flyout-menu-tools,
.map-bottom-left .flyout-menu-tools {
left: 10em !important; /* Same as the width of the active tool button */
}
.flyout-menu .basemap-switcher li{
width: 10em !important;
}
.flyout-menu .basemap-switcher li .toolbar-item{
height: 9em !important;
}
.view .region .view.BasemapSwitcherButtonView .flyout-menu .flyout-menu-collapsible-area:after{
content: none;
}
/* Make images fill the size of the container*/
.basemap-item .toolbar-item > img, .view .region .view.BasemapSwitcherButtonView .flyout-menu-active-tool > img{
height:100%;
width: 100%;
margin: 0;
}
/* Place text over-top of images at the bottom left of the container*/
.basemap-item .toolbar-item > p, .view .region .view.BasemapSwitcherButtonView .flyout-menu-active-tool > p{
position: absolute;
width: 10em !important; /* This property should be equal to the width of the container*/
bottom:1em; /*Same as font-size*/
padding: 0;
margin:0 0 0 1em !important; /* Set all to 0 except final parameter (left) which should be equal to font-size* /
font-size: 1em !important;
/* Below CSS used to create white text with a black border, so that it is visible on top of any background */
color: #fff;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
/* Text is aligned to the left to emulate the look in the image you provided */
text-align: left !important;
}Let me know if you need anything cleared up, and whether or not it works out for you!
Cory Purnell
Latitude Quality Assurance Team0 -
Hi Cory thanks for your help. I am back on to this now and can test it all out.
Almost there. When there are more basemaps the text does not move with the thumbnail, and if you click a few times the text will stay displayed past th eedge of the fyout and not hide.
see my attached image for a better description. I just put some background shading so you can see what I mean.
/customer/servlet/servlet.FileDownload?file=00P6000000eltwvEAA
0 -
Thanks again Cory much appreciated. I had a chance to dig a bit further and seem to have enough now to get to where I want. I used this reference : http://jasonmillerdesign.com/Programming/Overlay_Text_On_Images_With_CSS
/customer/servlet/servlet.FileDownload?file=00P6000000em1B4EAI
Here is the final added to common.css. Set up to cater for two lines of text on the basemap thumbnail. Only tested on desktop so not sure how tablets or other devices will look.
changes made to :
.flyout-menu .basemap-switcher li .toolbar-item{
.basemap-item .toolbar-item > img, .view .region .view.BasemapSwitcherButtonView .flyout-menu-active-tool > img{
.basemap-item .toolbar-item > p, .view .region .view.BasemapSwitcherButtonView .flyout-menu-active-tool > p{
and added a few extras at the bottom but these are just personal preference. (and they may affect the compact toolbar ).
/* Custom CSS changes for basemap switcher view */
.view .region .view.BasemapSwitcherButtonView .flyout-menu-active-tool{
height: 7em;
width: 7em;
}
.view .region .view.BasemapSwitcherButtonView .flyout-menu .map-top-right .flyout-menu-tools,
.map-top-center .flyout-menu-tools,
.map-middle-right .flyout-menu-tools,
.map-bottom-right .flyout-menu-tools,
.map-bottom-center .flyout-menu-tools {
right: 7em !important; /* Same as the width of the active tool button */
}
.view .region .view.BasemapSwitcherButtonView .flyout-menu .map-top-left .flyout-menu-tools,
.map-middle-left .flyout-menu-tools,
.map-bottom-left .flyout-menu-tools {
left: 7em !important; /* Same as the width of the active tool button */
}
.flyout-menu .basemap-switcher li{
width: 6em !important;
}
.flyout-menu .basemap-switcher li .toolbar-item{
height: 6em !important;
position: relative;
float: left;
clear: none;
overflow: hidden;
}
.view .region .view.BasemapSwitcherButtonView .flyout-menu .flyout-menu-collapsible-area:after{
content: none;
}
/* Make images fill the size of the container*/
.basemap-item .toolbar-item > img, .view .region .view.BasemapSwitcherButtonView .flyout-menu-active-tool > img{
height:100%;
width: 100%;
margin: 0;
position: relative;
z-index: 1;
}
/* Place text over-top of images at the bottom left of the container*/
.basemap-item .toolbar-item > p, .view .region .view.BasemapSwitcherButtonView .flyout-menu-active-tool > p{
display: block;
position: absolute;
width: 100%;
top: 55%;
left: 0;
z-index: 2;
text-align: center;
white-space: normal;
text-overflow: initial;
margin: 0;
/*position: absolute;*/
bottom:0;
padding: 0.5em 0 0 0;
/* Set all to 0 except final parameter (left) which should be equal to font-size*/
/*margin:0 0 0 0.2em !important;
font-size: 0.9em !important;*/
/* Below CSS used to create white text with a black border, so that it is visible on top of any background */
color: #fff;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
/* put some transparent shading around the text.*/
background-color:#333;
opacity:0.7;
}/* my extras */
/* reduce the gap between the current base map image and the first flyout basemap image*/
.toolbar-group.toolbar-group-horizontal-controls {
margin-left: 1em;
}/* reduce gap between basemaps */
.toolbar-body ul li, .flyout-menu ul li {
margin: 0;
}/* adjust text shading on the current basemap */
.view.BasemapSwitcherButtonView .flyout-menu-active-tool > p{
top: 55% !important;
}/* thicken up the border for the selected or hovered basemap in th eflyout */
.toolbar-item:hover, .tbo-btn:hover, .toolbar-item.highlight {
border: 2px solid #197DC9;
}
/*Border color of selected basemap*/
.toolbar-item.selected {
border: 2px solid #197DC9;
}0 -
Hi,
I am trying to use Cory's CSS in HTML5 viewer 2.8. Even though I can see the changes in common.css on the web server, there is no effect at all in my site/viewer. I also tried addding the code to desktop.css. And I did refresh the site in manager and restarted the web services. I can see changes that I make in manager to the images. Do I need to do more than paste Cory's code snipped in? Thank you.0 -
I did get it to work, used inspect in the browser and found that I must not have changed the correct css. Which css is the one that needs to be edited to just make changes to the desktop version (there are several desktop and common css). Could someone please post the path? Thank you. 0 -
Try this location/path
\Sites\SiteNameViewers\ViewerName\VirtualDirectory\Resources\Styles\Custom
Then edit the Desktop.css
Cheers
Chris0
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
Kommentare
10 Kommentare