Need help with Tutor Indigo

Site Operators Tutor Help
,
1

So I am new to Openedx Tutor as I was a former user of the native version of Openedx only for a few months. I am trying to customize the indigo theme the same way in the native theming. The problem is when i try to add the bootstrap elements they only show up as static elements and even with adding cdns to it nothing happens. What could be the possible mistake that I am doing while customizing it?

2

After customizing it, Make sure to build the image if using with tutor local. For tutor dev, check the logs of watchthemes. If you can share more context on this, then I can help you further.

1 Like
3

Well I was trying to modify the tutor indigo so I can customize it. The logo and the favicon was changed. The issue that I faced was that when I tried to add bootstrap element to the index_overlay.html of Indigo, It only showed as texts even if I attached a cdn link to the site. I tried adding a carousel banner, it only shows as first image, second image, etc. and this was after I rebuilt the images.

4

also thank you for taking the time to reply to my problem.

5

I’m not sure but It might be the index_overlay.html doesn’t support bootstrap. As I saw in footer.html there is condition like % if uses_bootstrap:. If the problem is solved now, you can share the solution so the community can take benefit from that. If not, you can share the CDNs link and the element with proper code so that I can try and debug about the problem.

6

Thank you for taking the time to reply to my problem again.
The problem still isn’t solved for me.
Well at the moment, the code was trial and error mostly so it was a test to check if it would work.

this was put in the index overlay.html as a test

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>
7

I’ve tried this on my system. Edx-platform has already bootstrap css and js so we don’t require to import them separately. If we do so, the site takes huge amount of time to load. So, for including carousel, you just need to include its code in index_overlay.html. Secondly, add the below line in start of index.html for loading styling from bootstrap.

<%! main_css = "css/bootstrap/lms-main.css" %>

For including bootstrap js, remove the if uses_bootstrap condition in main.html. This will load the bootstrap js which enables the auto change of slide.

% if uses_bootstrap: 
    ## xss-lint: disable=mako-invalid-js-filter
    <script type="text/javascript" src="${static.url('common/js/vendor/bootstrap.bundle.js')}"></script>
% endif

Then, you will see the carousel working perfectly.