When creating a widget with HTML content to add to a course homepage, there is the ability, when "Render in IFrame" is selected, to add all three kinds of CSS styles—inline, internal, and external.
However,
the internal and external styles do not behave as expected because they are not added to the <head> of the iframe, but rather a <div> within the <body> of the iframe. Moreover, because the widget container pulls in two stylesheets from D2L—namely `bsi.css` and `reset.css`—several styles that we define externally or internally do not appear as expected.
Is this expected behavior for iframe-style widgets? Is there an option for our internal and external styles to be defined in the <head> of the iframe to avoid being overwritten by the D2L styles?
Screenshots:
The first screenshot shows creating/editing a widget with a checkbox to “Render in IFrame”.
The second screenshot is an image of the pop up that is displayed when selecting “Customize Widget Style”. There are no options here to add/define CSS styles.
The third screenshot shows the browser inspector with a link highlighted. Note that styles from `bis.css` and `reset.css` are applied before, and therefore overwrite, the styles from our external stylesheet `catalyst.css`.
The fourth screenshot is a closeup of one problem because of the overwritten styles—a link in the :hover state has two underlines: one from D2L (`color: #004489; text-decoration: underline`) and one from our stylesheet (`border-bottom: 1px solid #006FBF`).
Edit: included the screenshots inline in this post rather than as attachments.
