I Want To... Button - Change the background color
Hi All,
Does anyone know how I'd go about changing the background color of the IWantToMenu button? The bluish color doesn't look as good with our purplish color scheme.
Thanks,
~Becky
-
you need to get into custom styles for your viewer. transfer the common and other css files from the main geocortex tree to your virtual directory resources styles directory and start exploring. be sure to make a backup of the original file. sometimes modifying the css files can have unintended consequences. probably explore one of the css training and tutorial sites on the web first.
J
0 -
Hi Rebecca,
What you should be able to do is add the following bit of CSS to your <GVH_Viewer_Home>\VirtualDirectory\Resources\Styles\Custom\Desktop.css file:
.wtm-button { background: #6EAB9B !important; } I actually don't think the !important declaration is needed there - you can try it with or without. Just change the color to a nice purplish for your site. You may also change the Tablet.css file in the same manner.0 -
Edit: my mistake - I misread the question. The post from John is correct.
Becky,
I assume you are talking about the bluish highlight colour as you hover over each of the I Want To menu items?
If so, the easiest way is to add the following to your <site>\viewers\<viewername>\virtualdirectory\resources\styles\custom\desktop.css file (and handheld and tablet css files as well).
.wtm-list button:hover {
background-color: #ddddaf;
}
Where #ddddaf is replaced by whatever hex color value you want the highlight to be.
Peter
0 -
I've tried adding that bit of code to every desktop.css file on my machine and it still won't change the I want to menu background colour. Has anyone successfully implemented this?
0 -
Becky,
If you want to change the background colour of ALL I Want To menu items, you should add
.wtm-list button {
background-color: #ddddaf
}to your desktop.css file.
You might want to confirm that the custom css files are being loaded by using Fiddler or Firebug (If you're using Firefox browser) or Developer Tools (in Chrome browser) to monitor which files are being loaded.Peter.
0 -
Thank you to John and Peter. I couldn't find the Desktop.css file in any VirtualDirectory on my machine. When I edited the Desktop.css file in C:\inetpub\wwwroot\HTML5Viewer\Resources\Styles\, it changed my "I want to..." button color.
(/customer/servlet/servlet.FileDownload?file=00P6000000elztbEAA) /customer/servlet/servlet.FileDownload?file=00P6000000elztbEAA
Here's a follow up question though. How do I then make the button background white, and the "I want to..." text purple? I tried making '.wtm-list button:hover {' white, but that didn't change anything.
/customer/servlet/servlet.FileDownload?file=00P6000000eluDSEAY
Thanks for all the help!
~Becky
0 -
Becky,
The desktop.css file isn't in a webserver (ie. IIS) virtual directory - it's an actual directory named "Virtualdirectory". It should be located in <essentials site folder>/<site_name>\viewers\<viewername>\virtualdirectory\resources\styles\custom. If the custom directory doesn't exist you could always create it and put a new desktop.css file in it (it should always be there though).
To change the background colour of the 'I Want To...' button you actually have to change it in a few places: If you edit your desktop.css file and make the following changes/addtions, you should be okay:
1) To change the normal (non-activated) button style:
.wtm-button {
background-color: #bb00dd;
color: #ffffff;
}2) To change the style when the button is hovered over and/or active:
.wtm-active .wtm-button, .wtm-active .wtm-button:hover {
background-color: #bb00dd;
color: #ffffff;
}0 -
That's great Peter! Thank you so much. I really appreciate all the help. :) In case other want to cut to the chase, I put the following in Desktop.css:
/* I WANT TO MENU (LARGE)-------------------------*/
.wtm-button {
background: #3E3E8B !important;
}.wtm-active .wtm-button, .wtm-active .wtm-button:hover {
background-color: #3E3E8B;
color: #FFFFFF;
}Btw, I did have a Desktop.css in my custom folder of my VirtualDirectory. It was essentially empty. I copied over the one from C:\inetpub\wwwroot\HTML5Viewer\Resources\Styles\, and made the changes you suggested.
Thanks again!
~Becky
0 -
Great that you got it working! Note that you don't need to copy the content of the Desktop.css file from the Styles directory - the one in the Custom folder is intentionally empty. It is designed for you to only insert the things that you want to override from the default one. You can remove everything except your .wtm changes and it'll keep going as planned. It will actually be preferable, since it'll allow future versions of the viewer to continually upgrade the default styles that you *don't* want to override.
John
0 -
Very good points John! I tried just changing the .wtm stuff in the files in the custom folder and it worked. Thanks!
Where do you get the information on commands for different elements of the HTML5 viewer, like .wtm?
I tried making the same change in the Handheld.css, and it didn't change the "I want to" button when clicked on. Do you know off hand what is different for the .css for handheld devices?
/customer/servlet/servlet.FileDownload?file=00P6000000elzfyEAA
/customer/servlet/servlet.FileDownload?file=00P6000000eltorEAA
0 -
The small shell has a separate stylesheet: SmallShell.css.
0
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
Kommentare
11 Kommentare