Adapt Learning Community: Editing Content Objects

I'm editing the default course as I make my way through the source code, but I'm stumped a bit on one thing.

How would I make edits to the images in the content objects? I've replaced them with my own 420px-wide images, but is there a way to alter the default dimensions? And how would I align it to the left, with the display title and body to the right?

Along the same lines, how would I go about making all my content objects or components have different colors based on the way my course is structured, rather than the primary color I've defined in my theme?

Thanks for helping out an Adapt noobie!

So far as the following is concerned...

how would I go about making all my content objects or components have different colors based on the way my course is structured, rather than the primary color I've defined in my theme?

... the starting-point here is the scope Adapt gives you to add custom classes to articles, blocks and components.

This means you should be able to create custom CSS elements that do what you want in terms of colours etc., and then add these classes to the appropriate sections of your course.

You can find some more information about this process here: https://community.adaptlearning.org/mod/forum/discuss.php?d=753

Show parent | Reply

Hi Gareth. Sorry I'm just responding now, and I appreciate your response!

Can you elaborate a bit on this? I assume a new color class would be created in colors.less, but then how does it get applied to a specific component or content object? I don't see the color class anywhere in components.json or contentObjects.json, so I must be missing a step.

Thanks!

Show parent | Reply

(Gareth, pls excuse my jumping in. Add to or correct what I write.)

Arend,

In the framework, using classes is typically a two stage process:
1) Creating a class somewhere in a Less file.
2) Applying it to an Adapt content structure.

Create a class somewhere in a Less file.

You can use pure CSS or Less; however, be sure to use a .less extension and keep your file in one of the Less folders in the framework. Grunt will look in these to compile the styles.
You can create your own Less file or add your class to one that already exists. The separate files are purely for organization; they are processed into a single CSS file. If you want to modify the Less of a component, it is recommended that you copy the Less file into the Vanilla theme's Less folder and modify it there. If the files are named the same, the theme's file will override any similarly named styles that exist in the component's Less. (You get to make modifications while preserving the original styles.)
Vanilla has gathered some commonly used values into four files dedicated to variables: fonts.less, paddings.less, colors.less, and generic.less. I recommend that you keep these dedicated to variables that you want to use elsewhere in your styles (but that an organizational thing, not technical restriction). You can start another file of variables if it suits you, or throw some into generic.less. Heads-up: there are two fonts.less files on two separate levels. One is intended for variables and one is intended for styles (once again, not a technical restriction).

Apply it to an Adapt content structure.

By content structure I mean contentObject, article, block, or component. (It's possible that an extension could use a class, but I can't think of an example right now.) Each of these has a "_classes" field. Using this "_classes" attribute is often the easiest way to customize individual instances of components or articles. If you want to apply a style change to all instances of a component throughout your course, it is often more efficient to modify directly the component's Less file.
Do not include the dot/class selector when using "_classes". Simply list one or more classes separated with a space like this:
"_classes": "blue-bkgd narrow_border"
The classes whose names you add to the "_classes" property must be defined somewhere in a Less file. While Less will allow you to use variables and mixins, "_classes" is no place for them.
In most cases, the classes you enter in "_classes" will be applied to the structure's root div. It is worth taking the time to examine this the first time you use this technique. It can help you understand what is necessary to target child divs or why other classes may interfere with yours.

Arend, my apologies if I told you something you already know in this long response. It sounds like your plans might warrant a new Less file or two to organize your classes (maybe backgrounds.less or images.less).

This technique of styling was difficult for me to envision when I was first reading about it. The lightbulb came on when I engaged the process. And now it's become pretty easy, especially as my Less skills have improved. Come back with more questions if it's tough to get started.

Hope something in this helps.

Chuck

Show parent | Reply

Hi Chuck. Please don't apologize because you might have covered something I already know. I can assure you I still feel super green on the framework in a lot of ways.

I mostly understand what you're describing here, but some details are unclear. I see the "_classes" line in the contentObjects.json and classes.json files, so I get that my custom class will be listed there.

It seems that you're saying I need to write a custom class in the generic.less file that can later be applied to my contentObject. What would that code look like? For instance, the contentObjects currently use my primary color. How would I write a line of code that to create a custom class that applies one of my other defined colors (secondary, tertiary, whatever)?

If you feel the need to backtrack because I'm not getting something, please feel free.

Thanks again.

Show parent | Reply

Arend, experiment with anything like this:

.arend-custom-class {
    background-color: @secondary-color; 
    color: @font-color; 
    float: left; 
    margin: 0 @item-padding 12px; 
}

Save it in a Less file. Enter the class into a component like so:

"_classes": "arend-custom-class"

I typed out a longer explanation in another post. See if any of this gets you closer or raises other questions. Keep 'em coming!

Chuck

Show parent | Reply

Thanks Chuck! For the benefit of the community, I'll post my responses on your larger post.

Show parent | Reply