When using an Omega 4 sub-theme and the External Links module, the icon next to external links does not display even when "Place an icon next to external links" is checked in the External Links configuration. When I change the theme to anything other than an Omega 4 sub-theme, the icon does display.

Upon inspecting the source code, I see style="display: inline-block;" is being added in the HTML to the span class="ext" element where the external link icon should display. This only happens when using an Omega 4 sub-theme. Non-Omega 4 themes don't include this style declaration.

When I turn off this style declaration in Firebug, the external link icon displays.

I can't figure out where the style="display: inline-block;" declaration is coming from. I've looked at all the template files, SASS files, and CSS files in the Omega 4 theme and sub-themes and can't find the source.

I've also tried a fresh Drupal install with only External Links and the Omega 4 Ohm sub-theme enabled and it still happens.

Where else should I look or how can I find and remove this style declaration?

Comments

fubhy’s picture

fubhy CreditAttribution: fubhy commented

I cant check right now but this I can tell you: Omega 4 dpes NOT add in-line style attributes. Anywhere. Ever. Tgat rather sounds like some weird JS is setting it on page load. Omega 4 does a lot of template and theme function overrides but nowhere does it add inline styles.

camhoward’s picture

camhoward
Location New Hampshire, USA
CreditAttribution: camhoward commented

Thanks, fubhy! I appreciate you confirming Omega 4 is not adding any inline style attributes and suggesting it might be a JavaScript issue. That sent me looking in a new direction.

I found that the JS for the External Link module includes a work around for IE box model problems which was apparently conflicting with the Compass "toolkit/border-box" that is imported in the themename.normalize.scss file in Omega 4 sub-themes. The inline style was being added even for non-IE browsers. When I disabled the "toolkit/border-box" import in the sub-theme, the External Link module worked as expected and displayed the icon.

I opted to keep the "toolkit/border-box" import in the themename.normalize.scss file and put a copy of the External Link module JS file in my theme's JS folder so I could edit it to remove the workaround. Made the changes, updated the themename.info file to include the new JS, cleared the cache, and the external link icon now displays as expected in my Omega 4 sub-theme.

Thanks for pointing me in the right direction.

camhoward’s picture

camhoward
Location New Hampshire, USA
CreditAttribution: camhoward commented
Status: Active » Closed (works as designed)

Closing the issue.

fubhy’s picture

fubhy CreditAttribution: fubhy commented

Glad you found the problem and fixed it. Note: If the JS file you are overriding is large and has many custom stuff in it and you want to avoid overriding it all at once you can also simply override single behaviors by redefining them in a new .js file in your theme. Due to how Behaviors are added (simply by overloading them in Drupal.behaviors, which is a global object) you can easily override single behaviors without the need to replace the entirety of a module-provided .js file. This might not be relevant if the module's .js file only contains a single behavior, so just consider this as another hint ;).

fubhy’s picture

fubhy CreditAttribution: fubhy commented

Oh and just to re-assure you: I think your choice of keeping the border-box stuff and instead fixing the .js was the right decission. Not only because I consider this a bug in the module if it unfolds like you described in your last comment but also because using border-box as your box model will vastly improve your themeing experience.

camhoward’s picture

camhoward
Location New Hampshire, USA
CreditAttribution: camhoward commented

Thanks for the tip about overriding single behaviors -- good to know! And glad you think keeping the "toolkit/border-box" import was the way to go. It just seemed to make sense to set one standard for the whole site rather than attempting to fix things piecemeal.