Adapt Learning Community: Use JQuery for theme?

Hi Guys,I am currently making a theme, derived from the Vanilla 2.0 theme.

What I noticed is that when no article, block or component title is present it still takes the amount of space and padding. I would like to remove this with a jquery script like so:

$('#articletitle').empty().remove('#articletitleWrapper');

Here the 'articletitle' name is of course just an example.

Is it possible to add such jquery to the theme?

Hey Joannes,

There's no reason why you can't use jquery in the theme. Another solution to this however may be to to add additional if statements into the template files so that you only render elements needed.

Thanks

Kirsty

Show parent | Reply

Hi Kristy,

Thank you for your answer. How would you use this if statement? For instance an example. Probably around the div? Sorry for this really beginners question, though.

Show parent | Reply

Hi Joannes,

Have a look on the handlebars helpers page for some simple examples. You can also have a dig around in adapt-contrib-vanilla's templates folder for some real-life examples -- quite a lot of these have if-statements (e.g. buttons.hbs).

Show parent | Reply

Thanks Tom,

Diving in it as we speak!

Show parent | Reply

Hi Tom,

To come back to your answer.

Yes the handlebars seem to me as the best/easiest way to achieve not rendering a title. The current Vanilla 2.0 theme has padding around the titles and you still see this padding even if there is no title. With your comment, I wanted to add the if statements in the handlebar files but to my surprise it is already there.

{{#if displayTitle}}
        <div class="article-title">
            <div role="heading" tabindex="0" class="article-title-inner h2" aria-level="2">
                {{{displayTitle}}}
            </div>
        </div>
{{/if}}

How can I then remove the padding for the titles if there is no title?

Show parent | Reply