Panel Close image customization

Josh Vigness

10. Mai 2019 14:08

I am looking for some help as to where I am going wrong in trying to set a custom image for the panel close button in the viewer for a specific site. I have placed my image in the Resources/Images/Custom folder and also added the following to the sites Custom/common.css file

 

.close-16 {

 

    background-image: url(Resources/Images/Custom/panel-close-white.png);

 

}

 

with no luck. 

 

Any help is much appreciated,

 

Josh

0

• 

  Permanently deleted user

  10. Mai 2019 15:46

  Which custom folder did you put the image in?  There is a custom folder in the wwwroot directory and there is another in each site viewer's virtualdirectory\resources\images folder.  If you want it to only apply to one site then put it under the viewer folder, if you want all sites/viewers to use it then put it in the folder under the wwwroot.

   

  Make sure that the path in your css matches the location of your icon.

  0
• 

  Josh Vigness

  10. Mai 2019 15:58

  Peter,

   

  Thanks for the response. My image is in the site's viewer VirtualDirectory/Resources/Images/Custom folder. I think my error is coming in the url itself. I am unsure of how much of the url needs to be in that parameter.

   

  Josh

  0
• 

  Denise Beckham

  10. Mai 2019 16:28

  Hello Josh,

   

  I have had success changing background images by using the full url. When I have an image saved in a site folder, it would be something like the following:

   

    .close-16 { background-image: url("https://[Main portion of the url for your maps, something like 'gis.cityname.com']/Geocortex/Essentials/REST/sites/[Site Name]/viewers/[Viewer Name]/VirtualDirectory/Icons/[Name of File].png"); } I like to make sure I have the right url by opening a new tab in my browser and seeing if the url I tried in the css file pulls up the image. 

   

  Sorry if I didn't explain that very well, but I hope that helps a little. 

   

  Denise

  0
• 

  Josh Vigness

  10. Mai 2019 16:36

  Denise,

   

  thank you for the response, that worked for me. In the developer tools of chrome I wasn't noticing a full url path as you stated so I was a bit lost.

   

  Thanks again,

   

  Josh

   

   

  0
• 

  Denise Beckham

  10. Mai 2019 16:45

  Josh,

   

  I'm glad it worked for you! I haven't seen full paths while using the developer tools in Chrome either, but I haven't figured out how to get it to work with a partial path yet.  The only down side is that if you want to apply it to another site, you'll have to remember to edit the url. 

   

  Denise

  0
• 

  Permanently deleted user

  10. Mai 2019 17:25

  Partial paths work like this: .wtm-list h2 { padding: 1em 1em; background: #fff url("../../Images/Custom/close-24.png"); border: 2px solid #D9D9D9; The padding and border settings are obviously unncessary.  In this example, the Images folder is two directories above where this css is located.  That's why the reason for ../../.  You'd use three if it's three directories and so on.  

   

  Scott

   

   

  0
• 

  Denise Beckham

  10. Mai 2019 18:40

  Ok, so it's relative to the css file location.  I never knew how this was supposed to work before.  I just tried changing an image with a partial path in a test map, and it worked! Thank you so much, Scott!

   

  Denise

  0
• 

  Josh Vigness

  13. Mai 2019 12:41

  Scott,

   

  thank you for that helpful tip, I was able to get my image to work that way as well. 

   

  Josh

  0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.