I have successfully created multi-layer maps which work well but I would like to modify the colour and contents of the popup. On my system the popup is blue writing on a grey background which is hard to read. I would also like to add some other fields to the bubble.
I have read Theming Openlayers but it is too vague for my level of knowledge. I understand how to overwrite php themes but not js. Could someone tell me

  • what is the new file called
  • which directory does it go into
  • an example of how to change something i.e. background colour

I am sure an example would help more people than just me and make a great module look even better. Thanks in advance


waltf’s picture

I would like to add, could someone show me how to overwrite the width of a popup.
I understand openlayers plus solved this for drupal 6, but isn't available to 7, and i don't know how to port it.

zzolo’s picture

Status: Active » Closed (works as designed)

OpenLayers is available for D7. https://drupal.org/project/openlayers_plus

Popup containers are actually managed by just image sprites. You can create your own "theme". Check out the default "theme" that comes with the module now. It is in the themes/ folder. Also, the default map shows how to set the paths for a custom theme.

Re-open if you have more questions.

dlshannon’s picture

Status: Active » Closed (works as designed)

Could you or someone else please expand on this explanation?
The sites/all/modules/openlayers/themes folder contains 2 CSS files (open layers_style.css and style.css). But, I don't see anything that I can alter there to change the popup background from that dark gray.
I read somewhere else that the trick is to change the color of sites/all/modules/openlayers/themes/img/cloud-popup-relative.png but that didn't have any effect, either.
So, after spending weeks trying to figure out how to create a map with OpenLayers, I'm stumped a few feet from the finish line. Like the original poster, blue text on a dark gray background doesn't work. I'd really like the popups to look the way that they look in the tutorials (black text on a white background). What's the secret?
If the answer is JS or PHP, could you please go into a little more detail for the benefit of us non-developers? Since all I'm trying to do is change the colors (not add fields, change the size or any fancy stuff) I would expect it to be straightforward. But, it's eluding me, as well as others.

Update: The secret is to change the color of the cloud-popup-relative.png file located in sites/all/modules/openlayers/openlayers/themes/default_dark/img. BUT, as it turns out, flushing the Drupal cache doesn't trigger the change. You have to flush your browser's cache. (I accidentally discovered this after several frustrating hours after noticing different results with Safari and Firefox.) So, my new newbie question is....is there anyway that we can set up our maps so that these objects don't get stored in the browser's cache? Or, maybe tell their browser's to ignore the object that may be cached? Otherwise, we could have users with completely different experiences, depending on what is cached. I don't know anything about caches so I'm hoping that someone will step up with a solution. Or, is this a bug?

dlshannon’s picture

Status: Closed (works as designed) » Active

Changing back to active (I think).

jeffschuler’s picture

Status: Closed (works as designed) » Active

dlshannon: It looks like you've opened a new issue for your second question, #1605720: Please prevent BROWSER caching of cloud-popup-relative.png. I'm going to stick to the first question.

Are you familiar with browser-based style debugging, a la Firebug? It's indispensable for figuring out how CSS is being applied to elements on the page, and from which files, and allows you to play around and override styles in the browser's rendered page. I believe that Chrome, Firefox and Safari all come with at least a Firebug-like tool, though I prefer the original.

With Firebug installed you can then right-click (ctrl-click) on the popup in question and "Inspect Element" to dig into its CSS. Sounds like you've already figured out which file is providing the background image for the popups, but this will allow you to debug further, if necessary. Hope this helps.

dlshannon’s picture

Thanks, Jeff. I use the development tools regularly to override the CSS. I just hopped onto that PHP/JS track because I had read somewhere else that one themes this popup using Javascript and, while I took a couple lessons on Javascript, I still can't figure out how to use JS in a Drupal environment [yeah, I know there's a page that's supposed to explain how but, trust me, that page only makes sense if you're already 90% of the way there.] Anyway, the CSS didn't help in this situation because the color is in the PNG file rather than generated during the rendering - at least, that's my theory.
Just to whine a bit more, this was frustrating because changing the color of the png file didn't immediately fix it. A developer would have immediately said "Oh, this must be cached". But, instead, this gal labored for hours and just as I was convinced that my computer was possessed and only an ordained priest could fix it, I discovered the browser cache culprit.

wemmies’s picture

Status: Active » Fixed

Setting to fixed as i Guess this is fixed. In your first question you also stated: "and contents of the popup"

I haven't seen you asking for this again, but just to be complete:

If you want to add more fields to your popup, you can also use the Views route. Say you want to have Field A, B and C as a description. In views ad thos fields to your OpenLayersDataOverlay.

Now set fields A and B to 'Exclude from display'

In Field C you set Rewrite Results to 'Rewrite the output of this field' and put your HTML there along with the replacement paterns [field_a], [field_b] and [field_c].

In your Format settings select Field C as your Description Field.

Save it all and check the result.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

philcoffaro’s picture

Wow! I needed this and your instructions worked perfectly to add fields to the popup. You're awesome!!!

jboeger’s picture

Thank you wemmies, appreciate that.