Applying Styles to Creator+ elements

Robert.B.2723

Hello,

We recently purchased Creator+ but I'm having some trouble getting it to apply either custom styles via CSS or through the Content Styler when applied to branded templated pages. Therefore, my question is actually twofold.

1. I am wondering if there is a mechanism by which we can apply custom styles via CSS (or any other method besides Content Styler) on Creator+ elements. The styles for Creator+ elements appear to be generated with JavaScript. I found a post here on Community where someone was asking the same thing where the responder said it wasn't possible at that time, but in the off chance it has become possible since, I thought it might be good to confirm.
2. Regarding the Content Styler, it appears that it will only apply the selected styles to a completely unformatted page in Brightspace. When applied to a page that has any custom styles added via a CSS stylesheet (from v3 Brightspace template), it doesn't. This becomes a problem when applying branded template pages for course content. I tried adding the selectors and styles generated by Content Stylet into the head of a templated HTML document and it seemed to work on some elements but not others. Then, if I delete these from the head, the style still holds on those elements. It's very strange. Is there a way to get the styles from Content Styler to work on pages that make use of other stylesheets?

Thank you!

Andrea.M.553

Hi Robert,

The V5 templates have the CSS needed to style the C+ elements. Perhaps you can look at the CSS for those and modify your templates to include it, or rebuild your templates using the V5 one as your starting point.

Best,

Andrea

Robert.B.2723

Hi Andrea,

Thank you for your reply. I do see that in the V5 head, there is the path to:

<link rel="stylesheet" href="/d2l/le/contentstyler/6606/files/View">

This would be what pulls from the Content Styler. When I place this in the HTML head, it does pull some of the styles from Content Styler but "--d2l-cplus-color-primary" keeps getting overridden for some reason (see images below). What's more. the --d2l-cplus-color-primary in the V5 template is #008EAB while here it is #007bff.

Do you have any idea where it might be pulling the "style attribute" selector from?

Rebuilding the templates using V5 entirely isn't a practical solution for us at this point, unfortunately. They are already in use. Likewise, the V5 templates as they currently stand, while they have CSS for elements like accordions or tabs, do not provide the html code to actually embed them. While it is possible to add them using Creator+, they appear to have different classes and I'm not sure if they would be stylable using the V5 CSS classes or other selectors.

If we did do something with the V5 templates in the future, though, do you happen to know if there would be any conflict if we incorporated Bootstrap into them to have more control over spacing, etc. Sorry for the random question tacked on.

Robert.B.2723

UPDATE: It looks as though it was Bootstrap (v4.3.1) CSS that was causing the conflict and not allowing Content Styler to pull through. Specifically the —primary value. When I added

:root {   

--primary: #0077be;   

--d2l-cplus-color-primary: #0077be;

}

to my custom style sheet, it worked! I had previously only had the --d2l-cplus-color-primary, but it required the —primary to be updated as well.