Custom CSS for C+ Content Styler?

Question

Does anyone have an example custom CSS file for Creator+/Contentstyler that they are willing to share?

We are new to Creator+, but we plan to make the most of the custom styler option.

Can we, for instance, by using a custom CSS, define other features than the four that can be defined in the four features available in the interface/default CSS?

Regards, Birgitte

Subul.I.322 · Answer

Hi @Birgitte.B.96, thank you for reaching out to the Brightspace Community!

A support case has already been submitted, so the team will be following up with more details soon. Appreciate your patience!

Birgitte.B.96 · Answer

Hi Furkan

Yes, it is something like that, I am looking for.

Which "additional features" are there? Can you provide a list? It will be a very slow process if we are to search through the page code, and feature for feature work out their name and include it in our Custom CSS.

I am familiar with the article that you refer to - but it is lacking this very key information in order to actually create and use a Custom CSS.

Regards, Birgitte

Furkan.K.312 · Answer

Good morning  Birgitte,

Thank you for asking this question. I understand you asked for an example of custom CSS for Creator+/Contentstyler:

To get started with custom CSS in Brightspace's Creator+, you can use the Content Styler tool to modify the default styles. Here’s a basic example of what a custom CSS file might look like:

/* Custom CSS for Brightspace Creator+ */

body {

font-family: 'Arial', sans-serif;

background-color: #f4f4f4;

}

h1, h2, h3 {

color: #333;

font-weight: bold;

}

.custom-button {

background-color: #007bff;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

}

.custom-button:hover {

background-color: #0056b3;

}

Extending Beyond Default Features

While the Content Styler interface allows you to modify four key parts of the default CSS (headers, font and color, accent color, and accessible color), you can define additional features by linking to a client-hosted CSS file. This allows you to add more custom styles beyond the default options provided by the interface

To implement this, you need to:

* Create your custom CSS file with all the desired styles.
* Host the CSS file on a server accessible by Brightspace.
* Link the CSS file in Brightspace by updating the d2l.Tools.ContentStyler.The CssOverride configuration variable points to your custom CSS file

Here is the reference:

Set up style and branding with Creator+ Content Styler - Brightspace

I hope this will help.