HTML 5 style documentation
We have just upgraded from the 2.2 version of the viewer to 2.4, which has unfortunately broken a lot of our custom css styling . It looks like it will be a significant piece of work to identify the elements that have changed and update our custom css files accordingly.
Are there any documents that detail the elements used in the viewer? (desktop, tablet, mobile)
I do like the look of the HTML5 viewer, but we have corporate style guidelines to follow for our web apps, as such I'd love to see some more advanced options in the the "Look and Feel" section of Geocortex Manager to help style the viewers, especially if the elements are changing with every version.
-
I migrated from 2.3.3 to 2.4 and I would like to know the answer to this as well. I have begun creating a list of 2.4 css tweaks for our apps.
Rick
0 -
Thanks for the reply Jason,
For now, all I'm interested in doing is overiding the exiting css tags that are delivered with 2.4.
For example, I'm documenting the css tags that involve styling the toolbar. I'll capture a screenshot and file it away in a folder so our other developer knows what changes were made in the event a bus hits me.
/customer/servlet/servlet.FileDownload?file=00P6000000eltkzEAA
/customer/servlet/servlet.FileDownload?file=00P6000000em21uEAA
And the final result for our thinner 2.4 toolbar looks like this:
/customer/servlet/servlet.FileDownload?file=00P6000000em1I0EAI
I'm next on the hunt for the css tags to restyle the feature details list to look similar to the v2.3.3 template. Note: I place the Hyperlinks above the Description by editing the order in desktop.json.js.
I noticed that the css tag for the Hyperlinks link in feature details does not honor the coloring setting applied in common.css. Here is the original tag:
.menu-hyperlinks .list-menu-button {
color: #1B7DBF;
text-decoration: underline;
}and the result:
/customer/servlet/servlet.FileDownload?file=00P6000000elzIQEAY
Also with regard to the Hyperlinks re-ordering, I noticed that if I set a layer's Feature Hyperlinks "Invalid/Broken Links:" setting to "Show Disabled" and the URL response is slow to verify, the re-ordering is not honored and the hyperlink is placed at the bottom of the feature details list. That did not occur in 2.3.3.
Regards,
Rick
0 -
We have completely restyled the toolbars to present a more compact toolbar.
/customer/servlet/servlet.FileDownload?file=00P6000000eltuLEAQ
This has involved updating a lot of the CSS related to buttons and tabs, primarily the CSS related to .toolbar-item, .toolbar-tab, .toolbar-body, .tb-tab-active and ul. I had to redo quit a bit of the CSS moving from 2.3 to 2.4, so it would be great if there were some way of minimizing the amount of work to be redone with new versions.
We also used CSS to move the banner image and text locations (.banner-text) so they do not overlap each other like they do by default. This should be something that could be added to the viewer configuration - perhaps a title/subtitle x-offset to account for logos of various widths - instead of having to manually tweak the CSS files.
Peter
0 -
Great information guys, thank you very much. We'll use this as a seed for upcoming discussions around theming.
Just a general CSS tip: If you're having trouble overriding a particular style, read up about "CSS specificity". The gist is that CSS selectors have a set of rules that define how "specific" they are, and rules with higher specificity need to be overridden with higher specificity. We try to keep things low, but sometimes you may encounter particularly targeted selectors that require some extra specificity to override.
Also, if you're not already using your browser's built-in dev tools to manipulate CSS on the fly, I suggest giving it a try. It's a far more productive workflow than trying out changes and reloading every time.
@Peter: Nice job on the toolbar customization! Great use of space.
0 -
@Rick: We'll have someone take a look at your Feature Hyperlinks issue. Thanks for the info and note about 2.3.3.
0 -
Hi Rick,
Thanks for bringing the issue with Invalid/Broken Links property to our attention, we have filed the bug in our internal bug tracking software and hope to get the issue fixed soon. For reference the bug is filed as GVH-5982.
As for your CSS questions, Jason is right when talking about CSS specificity. In the case of the hyperlink text the color property is actually coming from the following selector: a.list-menu-item (which is defined in Desktop.css and not common.css)Fortunately there is a way around this and we can change all these properties within common.css. First off you can use the a.list-menu-item to change the text-decoration of the layer hyperlinks:
a.list-menu-item {
display: block;
text-decoration: none;
}
In this instance I set the text-decoration to none , leaving the display property intact.If you want to change only the Feature hyperlinks text color, I came up with this selector for doing so (just add it to common.css for it to function):
a.list-menu-item span.list-menu-name{
color: #9DD2A8;
}This sets the color of only the feature Hyperlinks, though I haven't done extensive testing with it I believe it shouldn't affect anything else.
In the end it looks something like this:
/customer/servlet/servlet.FileDownload?file=00P6000000elzdTEAQ
Hopefully that was helpful, CSS can be a tricky beast.
Let me know if I can be of assistance in any other way,
Cory Purnell
Latitude Geographics Quality Assurance Team0 -
Thanks Cory! I'll take a look at this when I get into the office. I have to say that our test users so far really like the new 2.4 template! Great job!
Rick
0 -
Cory,
The new tag worked with an additional reference to "underline".
/* Feature Details Hyperlinks Color - 05/08/2015 */
a.list-menu-item span.list-menu-name {
color: #1B7DBF;
text-decoration: underline;
}/customer/servlet/servlet.FileDownload?file=00P6000000elzOoEAI
Thanks for the tip!
Regards, Rick
0
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
Kommentare
8 Kommentare