Adapt Learning Community: change vanillla theme to center images placed in text

I've used the adapt framework v4 to create a course using the command line tool. I've manually embedded some text with images in json formatted html within a simple Adapt 'Text' component. Everything works fine - text and images display as desired save for not having the images centered. I've figured out that I need "display:block; text-align:center;" to make this work. but can't figure out how to modify the vanilla theme to do it.

I have read this and while interesting it's far from clear and I don't know anything about handlebars or less. I'm hoping I could avoid digging too deep into these two technologies - can anyone throw me a freebee here?

Why did you embed graphics into a Text component? Surely there is a better component to use like the Graphic component?

The CSS for center aligning stuff is

    margin: 0 auto;
    width: 100%;

You will need to create add a class for the Component that you want changed and then create a selector that targets the specific element. Assuming you've added a div called images and have a class called centered-images. Here's something that will work

.component.centered-images .images {
    margin: 0 auto;
    width: 100%; 
}

Show parent | Reply

Thanks Simon. So...a few things... 1. If I edit the css in the browser manually for the images as they are embedded in my html, the css you've given doesn't want to center my images. Only the centering css I note in my original post wants to work.

2. Yes a graphic component would be better in terms of putting images into my content, however, per another thread my requirements are fairly unique. The course I've been tasked with putting into an LMS has been written in markdown. I want to keep the core content in markdown and with a bit of tom-foolery output it into different formats. Exactly what I'm doing is documented here. Another challenge with the graphic component is that I can't quite figure out how to get it to work with multiple images in my case - it seems to be geared to only work in a very specific circumstance, such as your material having only 1 image and the text can only be placed above it. I have several images and I need text above and below it.

My approach could be wrong...I'm open to changing it. I'm piecing all this together a bit at a time...thanks for replying.

Show parent | Reply