Change Vanilla default html class

Carlo_13

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

R_J

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.

donshakespeare

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'

Carlo_13

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.

<

nav class="navbar navbar-expand-lg navbar-light bg-light">

<

ul class="navbar-nav mr-auto">

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_J

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

donshakespeare

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.

rgp

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 ?

rgp

@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.