Show tools on one line
I'm trying to maximize the space for my map so I tried switching all my tools to use the 'small' Group Layout setting which works fine except that it puts all the tools into two rows which means they take up the same height as a single row of large tool icons/labels (See image below).
/customer/servlet/servlet.FileDownload?file=00P6000000em1WfEAI
What I would like is to be able to have them all on one single row (there's lots of empty space on the right of the toolbar) like the image below.
/customer/servlet/servlet.FileDownload?file=00P6000000eluLbEAI
I don't see any settings in the viewer configuration in Essentials Manager. Does anyone know if this can be done? If so, how/where do you make the changes?
-
+1. I just upgraded our dev site to GHV 2.2 and I would love to be able to reduce the height of the toolbar.
0 -
I've managed to tweak things somewhat by adding some custom CSS in the Styles/Custom/Desktop.css file for my site.
I kept the 'large' layout for the buttons in the Viewer Configuration and then through .css tweaks managed to re-style the buttons down to almost half the size - roughly going from a height of 112px to 64px.
/customer/servlet/servlet.FileDownload?file=00P6000000eltuqEAA /customer/servlet/servlet.FileDownload?file=00P6000000eltioEAA
It doesn't deal with modules like MarkupEditRegion that have a fixed height for both 'large' and 'small' layout styles and overflow my modified toolbar, but until there is a better solution this might do.
Peter.
0 -
Nice work, Peter! Thanks for posting this.
0 -
I should also mention that I used the icons from the FlexViewer code - they're a bit smaller and we generally like the look of them better than the HTML5 versions.
0 -
Hi Peter, would you be able to post or send some of the custom css styling you used?
thanks
0 -
Mike,
I've made a few addtional tweaks to the CSS but pretty much everything is similar to the image I posted earlier.
We have completely customized the VTE file so that all our common defaults get loaded every time we create a new HTML5 viewer. In order to facilitate that, we have tried to eliminate changes to the default CSS and put any tweaks into the site+viewer specific custom CSS.
Here are the contents of our [site]/viewers/[viewername]/virtualdirectory/resources/styles/custom/desktop.css file:
(edit: I should mention that the only reason we changed the .shell height is because we use our own footer instead of the Geocortex one).
----------------------------------.select-double {
display:inline-block;
width:200px;
border: 3px dashed red;
}body {
font-family: Arial,Helvetica,"Helvetica Neue","Droid Sans","Segoe UI",sans-serif;
font-size: 10pt;
}button {
font-family: unset;
}.banner-text {
left: 130px;
}
.BannerView {
padding-left: 5px;
}.global-search .search-box {
font-size: 8pt;
}.global-search input {
font-weight: bold;
font-size: 10pt;
}.markup-edit {
margin-top: -2px;
}.multi-tool-button {
padding-left: 10px;
padding-top: 0px;
padding-left: 1px;
color: #000000;
text-align: right;
border: 1px solid #ccccdd;
}.SearchView, .SearchView.active {
width:30em;
}
.shell {
height: 96%;
}.toolbar-group h4 {
display:none
}.toolbar-body {
height:55px;
background: none repeat scroll 0 0 #eeeeee;
}.toolbar-body button {
margin: 1px 1px;
background-image: linear-gradient(5deg, #cccccc, #eeeefe);
height:48px;
}
.toolbar-body .toolbar-region ul.transient-measurement li {
margin: unset;
}.toolbar-body.large .toolbar-group {
border: medium none;
min-height: 1em;
padding-bottom: 1px;
padding-top:0px;
}.toolbar-body ul li {
margin-top: 2px;
margin-left: 0px;
margin-right: 0px;
}.toolbar-body.large .toolbar-item p {
margin-bottom: 0px;
}.toolbar-container {
background: none;
}.toolbar-container button.multi-tool-button {
height: 24px;
}
.toolbar-group p, .toolbar-group label {
color: #000000;
}.toolbar-item.bound-disabled {
opacity: 0.6;
}.toolbar-item:hover {
border: 1px solid #ff4444;
}.toolbar-item.checkbox {
padding-top: 4px;
background-image: linear-gradient(5deg, #cccccc, #eeeefe);
}.toolbar-item.checkbox input {
margin: 0 auto 2px;
}.toolbar-item.multi-tool {
padding: unset;
height:24px;
}.toolbar-item.select-double select {
margin-top: 0.25em;
font-size: 8pt;
}.toolbar-tab {
border-top-left-radius:4px;
border-top-right-radius: 8px;
margin-right: 2px;
margin-left: 0px;
}.toolbar-tab-.tb-tab-active button, .toolbar-tab button:hover, .toolbar-tab a:hover {
background-color: #FFCF33
}ul.toolbar-tab-control li {
padding: 0px;
}ul.toolbar-tab-control li button {
display: inline-block;
font-size: 10pt;
padding: 2px 10px;
}.toolbar-item {
border: 1px solid #bbbbcc;
padding: 0;
max-width: 10em;
}.toolbar-item.checkbox {
max-width: 10em;
width: unset;
}.toolbar-body .nested-group {
padding: 0px;
height:55px;
}.toolbar-tab button {
color: #333333;
}.tb-tab-active::before, .tb-tab-active::after {
box-shadow:none;
}ul.toolbar-tab-control li {
background-color: #ccccff;
}.toolbar-tab.tb-tab-active {
background: none repeat scroll 0 0 #eea830;
}.toolbar-tab.tb-tab-active button, .toolbar-tab button:hover {
color: #000000;
}.toolbar-item > img, .toolbar-item > span.icon {
margin: 0.1em auto;
padding: 2px 0px 0px;
}.SignInView {
display: none;
}0 -
Thank you very much Peter. I wanted to do something similar to this but did not know exaclty where to start, so you help is greatly appreciated.
Mike
0 -
Yes I found this very useful too.
0
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
Kommentare
8 Kommentare