Color Customization in HTML5 Viewer
Hello,
I am trying to change colors in my HTML5 viewer. I am not a developer and just found out about css files. Does anybody have any pre-written codes for setting the color of the toolbar, layer list, home panel, etc, that they can share with me? Any help would be much appreciated!
Thanks,
Denise
0
-
I should probably mention, I only want to change the colors for one site. Thanks! 0 -
What version of the viewer are you using?
Generally speaking, site specific styling is done through the .css files in [yoursite]\viewers\[yourviewer]\virtualdirectory\resources\styles\custom.
What need to be changed in those files may depend on the version of the viewer you are using.
For the toolbar, look in the desktop.css for ".toolbar-body" (without the quotes) and edit the "background" property with whatever rgb colour you want.
Similarly, look for ".panel-scroll-container" and change the same background property0 -
I am currently running 2.9.2, although I beleive we will be upgrading to the most current version soon. Thanks! 0 -
Also, I found the css files, but this is all that is in any of them: /* Put custom styling for all shells in this file. Put custom images in the Custom subfolder of the Images directory. */I found the following in another post and pasted it in, and it works. I just have no idea what all the properties are called that I want to customize.0 -
.HomePanelContainerView .panel-scroll-container { background-color: #e6ecff; }0 -
If those styles do not exist in the custom/desktop.css file, you can simply add them (being careful not to put new styles inside an existing one) using this format: .panel-scroll-container { background: #ddddff; }0 -
You can usually find the style in question by right-clicking on the place you want to change the colour of, choose 'Inspect' from the popup menu. This will open the browsers developer tools window and should highlight the object in question. It should list (location may depend on browser being used) all the styles applicable to that object. You can modify property values interactively (click on the existing values) and try out your changes before adding them to the custom .css files. 0 -
That worked perfectly! Thank you! Is there a way to change the background for the panel title, tabs, and arrow buttons, shown in the (poorly) annotated picture below, as well as the color of lines between layers?
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000XdUg&feoid=Body&refid=0EMf2000000YB91"_/_img_0 -
Oh, I just saw your comment about "inspect". That helps a lot! Thank you so much Peter! 0 -
So I've had a lot of success changing the colors of most of the elements I want, but there is a sort of halo around the toggle button for the tool labels. I've tried several different things to try to match it to the color under "Tool Labels", but I've tried has worked. I feel like it has to be somewhere in div.toolbar-tab-container.bound-visible, but the only object I found that I would think it is is input.input-checkbox. However, that seemed to change the color behind the checkmark. Could it maybe be linked to another element? In case it helps, here is what I have so far: .panel-scroll-container { background-color: #f0f4ff; } .panel-title { background-color: #f0f4ff; } .panel-header-contents { background-color: #f0f4ff; } .panel-header { background-color: #3366ff; } button.chevron-right-16 { background-color: #f0f4ff; } div.layer-contents { border-bottom: 1px solid #ccd9ff; } div.filter-control { background-color: #f0f4ff; } div.button-tab-strip { background-color: #b5cfe3; } div.button-tab-strip button.tab-active { background-color: #f0f4ff; } div.toolbar-group.bound-visible { background-color: #f0f4ff; } div.toolbar-group.bound-visible { border: 1px solid #ccd9ff; } li.toolbar-tab.tb-tab-active { background-color: #f0f4ff; } li.toolbar-tab { background-color: #dbe7f0; } div.toolbar-tab-container.bound-visible { background-color: #b5cfe3; } li.toolbar-label-toggle label.gcx-toggle span.input-label { background-color: #b5cfe3; }0 -
Hi Denise,
Can you try -
.toolbar-item p, .toolbar-item label {
background-color: aqua;
}
with the color that you are using and not aqua.
Regards,
Wayne0 -
Hello Wayne,
Thank you for your suggestion! I tried it, but it looks like it changed the color behind the tool labels instead. I just realized that I forgot to include a screenshot in my last post, so I apologize for being unclear. Here are a couple of screenshots of my toolbar.
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000XdVF&feoid=Body&refid=0EMf2000000YBBR" _/_img_ _img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000XdVF&feoid=Body&refid=0EMf2000000YBBW"_/_img_
Thanks,
Denise0 -
Right, my mistake, I thought that's what you meant. I looked for the CSS that would control that but I couldn't find a unique selector. Maybe Peter or someone else can find one.
Regards,
Wayne0 -
Denise,
Try adding:.toolbar-label-toggle .gcx-toggle .input-label:before { box-shadow: 0 0 0 0.275em #00F0F0; }and change the #00F0F0 rgb value to whatever you want the background colour to be.
Peter0 -
Peter,
That worked perfectly! Thank you!
Denise0 -
Does anyone know how to get rid of the sign out button and dropdown on the banner?
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000XdVt&feoid=Body&refid=0EMf2000000YBFs"_/_img_0 -
Hi Denise,
In Essentials Manager > Permissions page > Sign-In Settings tab, there is a checkbox to hide it.
Regards,Wayne
0 -
Hello Wayne,
When I unchecked the sign out in permissions, it got rid of the sign out button in the I want to menu as well. I don't mind not having the option to sign out so much, but then there were only 3 global action buttons with extra space, and I didn't like how it looked. Thanks for the suggestion though!
Denise0 -
Oh OK, you can always try CSS, something like -
.SignInView, .SignInView.active, .UserInfoView, .UserInfoView.active {
visibility: hidden;
}
but like all CSS changes, you would need to do testing to make sure nothing else was affected.
Regards,
Wayne0 -
That worked Perfectly! Thanks, Wayne! 0 -
Does anyone know how to change the background color of the I Want To menu items (not the actual I Want To Button or the global menu items)? I've tried several different things, but the only one I tried that worked also changed the background color of the map.
Thanks,
Denise
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000XdaA&feoid=Body&refid=0EMf2000000YBQM"_/_img_0 -
what is the element name to change the color of Sign-In? 0 -
did you try adding: .wtm-list { background: #abcdef; }to your css file? I assume that wtm = Want To Menu0 -
Thanks for the suggestion, Peter! I just tried that, but it doesn't seem to work. 0 -
@Patrick,
if you want to change the colour of the text.sign-out button, .sign-in button { color: red !important; }
should do what you want0 -
@Denise,
Strange because it works fine for me in viewer 2.6.1 - what version of the viewer are you using? Did you put it in your [sitename]/viewers/[viewername]/VirtualDirectory/resources/styles/custom/desktop.css file?0 -
Peter,
It looks like I have version 2.9.2, and yes, that is where the file is located. I have built up quite a list of changes now, and have had a lot of success with them, but for reason, I just can't seem to change the color of the I Want To list. Also, is it OK to have extra spaces and words in the file? I'm trying to stay organized, so I've been doing stuff like this:*I Want To Menu* .wtm-list { background: #f0f4ff; }Thanks,
Denise0 -
Denise,
That snippet still works in my 2.11.1 site so it should work for you. However, it's quite possible that your comment line above it is causing the problem. Comment lines in your .css files should use the syntax:/* put your comments here */0 -
Peter,
That worked! Thank you!
Denise0 -
Does anybody know an easy way to change the background color of Map Tips? I was able to change the background color of most of it with the following code, but it left a white gap. div.map-tip-view-header { background-color: #f0f4ff; } div.map-tip-view-contents.region-active { background-color: #f0f4ff; }_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000XddO&feoid=Body&refid=0EMf2000000YBd1"_/_img_
I tried the following, but it did not work.div.map-tip-view { background-color: #f0f4ff; }Thanks,
Denise0
Please sign in to leave a comment.
Comments
32 comments