Bootstrap Theme Convertion

Hello,

I’ve purchased a Theme from https://themes.getbootstrap.com/ to be specific the Silicon Theme but there are so many items in there and to be honest I don’t get how I can all of these files into BSS. I’m aware that I have to convert the HTML Files with the online tool, but I don’t know how to add the SCSS files, the vendor files and so on.

Could someone please explain to me what I should do
Thank you in advance
Best regards
Philipp

First question is are you planning on modifying anything in the theme scss ?
If not it may be better to just import the theme.css.min that is usually supplied with these themes for users that do not need to modify anything in the theme. Much easier then in Bootstrap Studio also as you will just import the theme in the settings and then choose that theme in the Settings > Design > Bootstrap.

If you are familiar with compiling a custom Bootstrap Theme and want to use the internal compiler to do so it very well is possible but there is no use trying to describe everything until the first question is answered.

I would use the theme compiled that probably is supplied, and concentrate and focus more on just adding the assets, html, js, vendor, etc and get going first.

I bought the Landkit Theme and was able to use the scss files but you also have to set up Bootstrap core scss to compile as you never want to change anything in those (edits not allowed) because of future updates to Bootstrap Css Versions.

I actually like that theme Silicon also and was contemplating buying it because it is a highly polished professionally done template following good Bootstrap 5 standards and pretty clean. Obviously they always have to add in the additional sliders, gallerys, parallax etc vendors but those are pretty solid also.

As for getting the SCSS, CSS, JS, and images into BSS you drag them to the design panel and it adds them to their respective sections. You can also create folders if needed so you can organize them, and then drag the files to that directory. Unfortunately, it isn’t possible to drag a directory in as of yet, not sure if/when that would be added. Hopefully soon!

As @twinstream has said though, it all depends on what you plan to do with it once you have it in there.

@twinstream @jo-r Thank you for your fast replies
I’ve already tried to just use the theme.css.min unfortunatly this does not work as intended as there are a few elements that are not working properly afterwards.

For example, the mailform doesn’t work properly after importing the CSS and all other assets. So I took a look at the CSS properties from the original template and the property which was missing was from one of the SCSS files.

How can I fix this behaviour? Or would importing the SCSS Files even solve that Issue?

also how could I import all the vendor files?

If I’m allowed, and it would help you help me solve my problem, I could upload it

If not, here is the online documentation of the template:

Thank you so much for your Help
Best Regards
Philipp

Usually the email form uses two other files, one php and one JS. you must search the html file for their address.

@gilmar The from already works the problem is that the Icon, it doesn’t work properly it. It is completly off on mobile phones. But in the original template with all the scss files it works on mobile

I’m not sure how BSS will work with the files for this theme as the structure is much different than the setup in BSS. In other words, most of the files seem to be within a “vendor” directory or a few other directories rather than the same structure BSS uses.

You would need to somehow recreate the exact structure that the theme is using and I’m not sure that BSS will read those files and overwrite the default Bootstrap styles that way? You could try, but I think the key here is that the structure needs to be the same as the theme is using because files will be calling from those directories.

If you’ve already done that then … nevermind :stuck_out_tongue:

1 Like

When converting html using the convertor, the icon tags will be modified by Bootstrap Studio by giving them a default icon which is the fa-star.

Since your theme uses boxicons, You have the options of using the icon sets supplied by Bootstrap Studio. I would remove the box icon code and choose a match by double clicking the star. or…

(my choice)
Convert the icon to custom code inside Bootstrap Studio by right clicking on the icon choosing convert to html and then double clicking on the converted icon and removing the “far fa-star” leaving the boxicon code and hit apply. I would go back and label that custom code as a custom icon and save it to your library. Since there may be many of these learning to use your search and replace will speed up the process if you choose to use the boxy icons. Dont forget to include the cdn link in your head section for boxy. boxicons

Vendor files can just be added to the css and js folders. Usually a plugin or library addon includes a css file, a js file, or both. Find the ones you want to use and add them.

There also must be a way to hook the plugin or library to your page which is usually done with another smaller js initialization file but the people that make these themes probably following good practice have bundled all the initialization in one theme.js file. So I would look for that and add that at the very end of all your js files as position is important to have the main vendor(s) js file load first, then the initialization js last. In other words you cannot initialize something if it has not already loaded first.

As far as uploading I see no reason since you own this that you could not use the publish mode in Bootstrap Studio to share a page or pages you see a problem on. You have up to 5 sites and you can use and delete as needed. Top right corner publish settings.

1 Like

@gilmar @jo-r @twinstream Thank you so much for your help. I called a developer friend of mine whom gave me the idea of using a span on this an this worked for and now the icon is fixed. Thank you also for the help with the vendor files. I will work this weekend on the Theme and if i have any issues i will upload it ans write in this forum again

Yes copying the icon code to a span probably is a better solution as it will give you control over adding color changes etc. Nice tip !

Update>>

I did find at least 14 references to the >i icon css so may want to consider staying with the icon tag. :space_invader:

1 Like