The default markup and styling for popups isn't quite what I need, and was wondering how I may change the following;

1. I'd like to toss the divs with id='popup_FrameDecorationDiv_#'. For me, these are adding unnecessary bloat - visuals which CSS alone is very well able to produce.

2. How can I change/remove some/all of the gross inline styling on the popup block elements (elements like, '#popup, #popup_GroupDiv, #popup_contentDiv)?

I'm keen on using any css/js/php methods, but I can't find where these things are constructed. Thanks!

Comments

friedjoff’s picture

friedjoff CreditAttribution: friedjoff commented

This is the default OpenLayers markup that can't be modified without going into the OpenLayers library. My advice is to work around this markup, if possible.

If you want to modify the popup content try to override Drupal.theme.prototype.openlayersPopup.

Pol’s picture

Pol
the/that
Location Brussels
CreditAttribution: Pol commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

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

bcobin’s picture

bcobin CreditAttribution: bcobin commented

In case anyone else runs into this, you can also override the styling by deploying the OpenLayers library locally (as per the instructions on admin/structure/openlayers) and then you can override by using !important in your CSS declarations. The below is a quick and dirty improvement for the popups that I'll likely refine:

.olPopup {height: 130px !important;}

#popup_contentDiv {height: 110px !important;}

#popup_FrameDecorationDiv_0,
#popup_FrameDecorationDiv_1 {height: 81px !important;}

#popup_contentDiv {height: 125px;}

Happy mapping!

bcobin’s picture

bcobin CreditAttribution: bcobin commented

Or... you could use OpenLayers Feature Popups. Duh... sorry.