• Welcome to Simple Machines Community Forum. Please login or sign up.
January 18, 2022, 07:51:43 PM

News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord


How to include Bootstrap css-file?

Started by Doctor Asp, November 15, 2021, 09:02:24 AM

Previous topic - Next topic

Doctor Asp

I´m almost done with a new theme based on Bootstrap 5.
Until now I´ve just included the Bootstrap css-file in function template_html_above like this:

echo '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css [nofollow]" rel="stylesheet" integrity="sha3841BmE4kWBq78iYhFldv" crossorigin="anonymous">';

I wonder if there is a better (more proper) way to do it?

The comments state:
To load other CSS files you should use the functions loadCSSFile().
This approach will let you take advantage of SMF's automatic CSS minimization and other benefits. You can, of course, manually add any other files you want after template_css() has been run.

Short example:
- CSS: loadCSSFile('filename.css', array('minimize' => true));

I did try this:
loadCSSFile('https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' [nofollow];, array('minimize' => true, 'integrity' => 'sha3841BmE4kWBq78iYhFldv', 'crossorigin' => 'anonymous'));
/Doctor Asp

Diego Andrés

You are missing the external => true; if you aren't loading it in your files.
Additionally, for attributes and other, you must use attributes.
attributes => array('crossorigin' => 'anonymous', 'integrity' => ' sha3841BmE4kWBq78iYhFldv')

SMF Tricks - Free & Premium Responsive Themes for SMF.

Doctor Asp

Quote from: Diego Andrés on November 15, 2021, 09:54:24 AMYou are missing the external => true; if you aren't loading it in your files.
Additionally, for attributes and other, you must use attributes.
attributes => array('crossorigin' => 'anonymous', 'integrity' => ' sha3841BmE4kWBq78iYhFldv')

Thx - it works - but...
Now the Bootstrap css-file seems to load after the default SMF css-files.
Is there a way to load it before the default SMF css-files?
I can´t find any documentation on the function loadCSSFile.
/Doctor Asp

Diego Andrés

For CSS files you also have an order_pos option.
I believe the index.css file has a position of 1

So you could simply add 'order_pos' => -20 for your bootstrap file

SMF Tricks - Free & Premium Responsive Themes for SMF.

Advertisement: