I have imported an HTML file into Bootstrap Studio. Apparently, style.css uses the class attribute starting at the <body> tag for styling.
Example: HTML <body tag="ap-v2">....... CSS .ap-v2 .global-nav-menu-item{.....}
How can do this?
You will have to do everything manually if you import existing HTML pages. The app does not allow for use of drag and drop or editing within the main editing setups other than CSS. I'm not sure if it is already set up as a Custom Code setup or if you have to transpose it in the app to do so. I haven't imported any HTML pages to check that out. Either way it will need to be done manually not normally how the app would edit things like that if it were built within the app.
My suggestion would be to import your CSS, JS and supporting image files and then recreate your HTML pages rather than importing them. Since you'll already have the CSS imported (which should be fully functional), just open the HTML files that you currently have outside of BSS and mimic the setup of the structure and classes.
You will find this to be a much more user friendly way of editing your site than trying to do it in BSS as Custom Code.
Thank you, Jo. I'm a new user of BSS, hence the question. I have tried to import all relevant resource files, import the HTML, export the result, and then add back the key referencing start point of the CSS selector. Since the imported resource files is from the original structure, after examining what was missing, putting it back after exporting was it was required. But yes, I do understand what you meant by recreating the structure in BSS and then carry on with the development from there on.
Regards, Jemmy Lai
Yeah unfortunately, since this is built for Bootstrap the CSS from other areas may not be exactly what is needed, but by importing the CSS and then reworking the HTML pages as new pages instead of imports, that will get you a pretty good start on recreating the site in BSS.
I also wouldn't import the HTML files at all and I would use the original ones you originally imported as the base to work from. I don't "think" that BSS changes anything in imported HTML files, but it's best to use the original pages HTML instead of an imported version just in case.
You'll just want to import your "custom" CSS though, not the framework's CSS. That way you will be free to use the internal Bootstrap system that BSS is created for without conflicts. Once created, the upkeep and adding is pretty amazing in this app. Takes a bit to get used to it, learning curve isn't super easy, but lots of help on the forums and forum searches will help a lot when trying to work out a functionality that isn't documented yet.
Give it a shot and try just redoing one page. When you redo the structure, don't use the same classes and total structure of what the old page is, recreate it using the structure of a Bootstrap page instead. That should help get that part working better. Bootstrap's pretty easy to use when coding manually so Bootstrap Studio is great because it shortens what's needed and gives us a lot of drag and drop capabilities. Just not with imported HTML pages is all. Good luck whatever you decide to try!