Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product

Change Vanilla default html class

Carlo_13Carlo_13
edited October 5 in Development

Hi everyone.

I want to make a bootstrap 4 theme for vanilla, problem is, I cannot edit the default classes and IDs applied to Vanilla.

Is there a way to edit the default html template, for eg _ li,a,p_ and so on... ?

Where is the default file in vanilla core ?

Thanks

Comments

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator
    edited October 5

    If you start from scratch with a html page, you can choose to follow what structure Bootstrap lays upon you. But if you want to integrate a CSS framework into an existing page, you should integrate it, but not wrap the existing page around the CSS framework.

    Take a look at the Bootstrap 3 theme: https://open.vanillaforums.com/addon/bootstrap-theme

    You will see that you have to customize the CSS framework and do not need to make much changes to Vanillas HTML.

  • https://sass-lang.com/guide
    Extend/Inheritance
    This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean.

    @Carlo_13 you might not need to edit the HTML. Example: if you wish to make .Discussion in to .container, simply copy the rule over to `.Discussion'

    R_J
  • Carlo_13Carlo_13
    edited October 9

    Hi @R_J , thanks for your answer.

    The problem with Boostrap 4, is that a class is added with almost every html item.

    For eg., if you want to create a navigation bar, this is the code you'll be dealing with.

    </p> <p>&lt;</p> <p>nav class="navbar navbar-expand-lg navbar-light bg-light">
    </p> <p>&lt;</p> <p>ul class="navbar-nav mr-auto">
    <li class="nav-item active">
    <a class="nav-link" href="#">

    Hi @donshakespeare , I think I know you from Modx =)

    Well I don't think sass will solve the problem above ( I may be wrong though )

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    Again I would advise you to take a look at Kaspers way of integrating bootstrap. Just take a look at what he have done for the navbar: https://github.com/kasperisager/vanilla-bootstrap/blob/master/less/components/navbar.less

    1. The best way is to use the unobtrusive @extend. I have based a vanilla site on foundation6 before, with all the bells and whistles of its CSS.
    2. Or if your site already will not work (properly, think Flarum) without JS, you can add those classnames after the page loads and then your CSS would be apply.
    3. Or you can duplicate and edit all the vanilla views (plus theme hooks overrides) and start labouriously and dangerously injecting all your classnames.
  • rgprgp London New

    I've successfully based a theme on Bootstrap 4 (mainly to integrate into a wider site, so it's not suitable for redistribution). As R_J suggested, looking at Kasper's Bootstrap 3 theme will provide inspiration.

    That's not to say it's a simple job. A lot of Kasper's LESS will not convert to SASS (the navbar example quoted above is a case in point - unlike LESS, SASS will not allow you to @extend a nested selector).

    What I did was auto-convert Kasper's LESS files to SASS, then went through them line by line to a) change them from B3 to B4; b) fix the @extends, etc, that wouldn't work in SASS and, of course, c) make the changes I needed to suit my new theme.

    Quite a lot of work, but it can be done ...

    Carlo_13
  • @rgp a dit :
    I've successfully based a theme on Bootstrap 4 (mainly to integrate into a wider site, so it's not suitable for redistribution). As R_J suggested, looking at Kasper's Bootstrap 3 theme will provide inspiration.

    That's not to say it's a simple job. A lot of Kasper's LESS will not convert to SASS (the navbar example quoted above is a case in point - unlike LESS, SASS will not allow you to @extend a nested selector).

    What I did was auto-convert Kasper's LESS files to SASS, then went through them line by line to a) change them from B3 to B4; b) fix the @extends, etc, that wouldn't work in SASS and, of course, c) make the changes I needed to suit my new theme.

    Quite a lot of work, but it can be done ...

    What if.. I'd try to do it the other way around. I found this on github:
    https://github.com/seanCodes/bootstrap-less-port

    It seems that someone made less works with Bootstrap 4.

    Do you think I could merge that with Kasper work ?

  • rgprgp London New

    @Carlo_13 said:

    What if.. I'd try to do it the other way around. I found this on github:
    https://github.com/seanCodes/bootstrap-less-port

    It seems that someone made less works with Bootstrap 4.

    Do you think I could merge that with Kasper work ?

    Yes, I would think so. It would certainly be less work (no pun intended =) ) as you could omit two of the conversion steps, though you'd still need to go through the LESS code line by line to change from B3 to B4.

    The obvious downside is that you don't know if the LESS conversion will be updated as new versions of B4 are released, but once you have a stable and working theme to your liking you may not care about that.

    Carlo_13
Sign In or Register to comment.