When I import an existing html file (which was created in another Bootstrap editor) in Bootstrap Studio, the images show as a broken icons and the css and js files seem not to be used for displaying the page. I can only make an image display correctly by dragging and dropping the image file and changing the html code from src="img/image.png" to src="image.png". Is there a way to tell Bootstrap Studio the base folder where my html pages are located so that it automatically loads the images, css and js files?
Additionally the whole page is automatically declared as custom code, so I cannot edit it visually. How do I change that?
It would be best if there would be a method to tell Bootstrap Studio the folder of existing html files and to make it automatically import all html, image, css and js files from this folder and its sub folders.
I just purchased Bootstrap Studio, but at the moment it looks as if I cannot use it to edit my existing web site. Please help.
At this time (not sure if it will change) editing sites that were created outside of Bootstrap Studio is all done via Custom Code. There is pretty much no other way to do that. We're hoping to see something in the future, but I haven't heard a lot about any work on that feature so I don't know.
The reason you're having issues is because you are not importing your files correctly. For your images, go to the Design area in the bottom right of the app and find the Images drop down. Right click and make folders to mimic your file tree of your images on your site. You don't need to add an img folder as it adds that automatically. You may need to do a mass text update on your pages to change "images" to "img" if your image folder was named "images" so that the links reflect the correct location in BSS.
After you create the folders, right click over each folder and choose Import Image. Navigate to the folder you want to import the images from and then highlight all images in that folder to import them all at once. Do this for each folder for images.
Rinse and repeat for an JS files you have in special directories, any 3rd party extensions or elements you're adding that have specific file structures etc.
Then all of your files "should" work once you have ordered the JS and CSS files in BSS to the correct order. To do this right click over the Styles and choose Include Order, rearrange those as needed. Do the same for the JavaScript section and that's it.
Import your Pages the same way and you should be all set to go.
Having said all that, BSS is pretty easy to use to setup new websites, maybe you might want to give it a shot to recreate your site so you can take full advantage of the features. Hope that all helps.
P.S. Just a tip for recreating a current site. You can create a new project and import your CSS files and JS files without having to do any of that over. Only the HTML pages need to be structured and since you already have all the classes and id's needed in your current code, you will already have half the work done by just copying it from your text editor to the class and id area of BSS. Wouldn't take long at all to whip out a remake that way. :)
Thanks for your help. However, my two main .css files display an import error, so I cannot import them. The imported js files also do not seem to be working, even with the correct folder structure. Additionally the missing visual editing for external html files is a real downside. My web site has 1000+ pages, so I cannot simply redesign it again.
Your web demo did not have an import feature, so I was not able to find out about these problems. Would you please give me a refund?
I am more than willing to purchase a future version again at an even higher price if these problems are resolved. Now I have to return back to editing html code in a plain text editor.
import an existing html file (which was created in another Bootstrap editor)
Your web demo did not have an import feature, so I was not able to find out about these problems. Would you please give me a refund?
I am more than willing to purchase a future version again at an even higher price if these problems are resolved. Now I have to return back to editing html code in a plain text editor.
You can contact the developers via here: https://bootstrapstudio.io/contact-us Or perhaps via the app, under, Help (menu) > Bug Reports. To inquire about a refund.
Based upon what you described in this thread -- You may like this thread where an alternative app is discussed (Pinegrow) which should work better for your visual editing of existing files and site structures, the Pro version is probably what you want.
Thanks for the Pinegrow tip. But that is the editor I came from. I used its trial version to modify a new template that I now use for my web site. It did not let me apply the template to files in sub folder without breaking links, so I have to use good old Dreamweaver MX to do that. It also messes up the non-standard html code of my web site pages when editing them. I also checked out Dreamweaver CC 2015, which supports Bootstrap, but Dreamweaver also has some serious problems, e.g. no 4K screen support and its visual editor does not display Bootstrap pages correctly. I thought BSS would be the solution, but it is even worse when it comes to working with existing files.
So I guess I will have to buy the Standard version of Pinegrow for editing individual pages and batch process the html code of my pages to avoid broken links when editing them in Pinegrow. As the project management features of Pinegrow Pro are still immature, I will have to continues using Dreamweaver MX for updating all pages in sub folders. And additionally a text editor for occasional edits if Pinegrow still messes up too much of the html code.
It is a pity that there is not a single web editing application that satisfies all needs...
Thats interesting. Maybe you could use the Pinegrow + Atom integration for your code editor. I guess I don't fully understand what it is that your actually trying to accomplish. Did you happen to speak of this or ask on the Pinegrow forums?
There are may tools in the web developers / slash designers toolbox. I am very happy with the bootstrap studio program. It is easy to use. I use another editor with lots of plugins. Although it would be great to use one my editor I don't get a felling of systematic progress. This is a great tool and design for a website developer / designer like me who needs a tool that focuses on design. After a hour or so on this tool, I'll spend more time adding additional libraries services and controllers, and data models. All the additional work is done using other tools for linting(syntax) and debugging in jasmine mocha, but I don't need to be worrying about that stuff when I'm designing. I also would not like or want anything included that has too many design choices. Buttons can be styled with css and should be unless there svg we don't need a bitmap editor in the toolbar. If you need a wonder tool to do everything it used to be Creative Studio 4. Then I found a real editor. Now I use Ubuntu 16.04 === (OS) | VIM === (editor) | ?Gimp ===(bitmap) | Inkscape === (images logo svg so much more). They are all free, and also servers databases libraries plugins also are free and are community driven open source products and very popular topics on quality help sites. I think this is a great value for the price and I don't mind the fact that its closed source. I wouldn't change it at all it's 10/10 for my needs. Ps. Pinegrow looked good. I tried it but, it was weird for me like... you can use your editor our live view + add things with drag n drop and I guess you could if the system can cope with all having a file opened for writing by two different programs working together needs a driver in-between the editor if you have Atom, there's support maybe for others though. It is trying to do things I didn't know that I didn't need it too but I don't and can't use more than what bootstrap studio does.
The Pinegrow support knows that Pinegrow breaks links when you try to update components in pages that are located in sub folders. They plan to fix it sometime in the future, but they did not specify any date. I also wrote them that Pinegrow automatically rewrites certain html code when it loads a html file, which again results in broken links. But I got no reaction so far.
I can avoid the first problem by using Dreamweaver's Template feature and I will either have to write my own software or use regular expressions (which I hate) to clean up my html code in order to avoid the second problem. Or I have to wait until the Pinegrow guys fix these problems, which could be 2017 or take even longer.
The BSS visual editor seems to be more responsive and better organized than Pinegrows, but that does not help me at all. On the other hand Pinegrow lets you visually edit existing pages and does not force you to inconveniently convert html code before you can edit it.
By the way, does anyone of you know what cross platform development tool was used to compile applications like BSS, Pinegrow or Pingendo? It does not seem to be Qt as far as I can tell.
So back to your issues with BSS rather than other programs since this is a BSS forum lol.
Why do your CSS files not import? I would start there and see what's wrong with your CSS files. Maybe they have code in them that is not compatible with CSS. Are you using a CSS compiler or for something like Less or Sass? If just writing straight CSS then there has to be a technical reason it won't import and I doubt very much that it's BSS's issue as I've imported CSS files many times without issue. Check your files and compare them to what BSS exports and see what is wrong there. You could be making a mountain out of a molehill here when instead you could be working on your site(s) in BSS :P
Thanks for all your help, but I just got a refund and I am moving on. Great customer service!
Jo: Resolving the import problem is secondary as long as I am not able to visually edit existing pages in BSS. It would not be better than editing my pages in a plain text editor and using a browser for viewing the edits. If BSS should one day have this feature and hopefully also offer an automatic import feature, I will gladly try and buy it again. I would gladly pay even $200 or more if it offers what I need.
know what cross platform development tool was used to compile
applications like BSS, Pinegrow or Pingendo
@harryg7, Bootstrap Studio = Electron - & - Pinegrow = NWJS, I think maybe Pingendo is NWJS also but I have seen mention of each. Thank's for the conversation. I enjoyed it even if @Jo didn't particularly. ;-)
Good luck with your workflow and development efforts.
lol wasn't that I didn't find it interesting, just got off track with all the other program stuff to me when the obvious questions were why things didn't work for him. I will be the first to admit, after having admin'd many software forums over the years, that I find it tacky to be introducing rival software on a company's forum ... but ... in cases like this, there is a bit of a need, I am just not real comfortable with it. I will say that a 1000+ page website would indeed be a big job to transpose into BSS and I probably wouldn't do it either so I can't say much on that. I too will be hoping they bring a better way to import websites created in other software. I did check out Pinegrow and found it pretty interesting and did purchase it for the sites that I have that the clients just will not spend the money to redo the website to newer code with responsiveness. I can't force their hands so I did find Pinegrow an advantage for that and I thank you or whoever it was that introduced it on another thread a bunch of weeks ago. I was curious though as to why the CSS wouldn't import for Harry. Guess it doesn't matter at this point though. Good luck to you Harry.
I am not trying to take away from or diminish Bootstrap Studio in any way, heck at it's price point I think most people wishing to work with Bootstrap should own it or give it quality consideration. Likewise I am not promoting Pinegrow and vise versa. I just feel they are all merely tools and like traditional screwdrivers or hammers and the like, sometimes you need different tools even for similar tasks (different screwdriver or hammer, etc.). I posted about Pinegrow in this thread and the previous thread I referenced as it seemed like a tool they may wish to evaluate to see if it would better address there need for working with templates and preexisting sites. In the end I just want to help people meet their needs with a tool that can possibly accomplish the desired tasks. In the end it's up to each individual to assess that. Sadly there is no one size fits all and the landscape across web and design in general is quite diverse, so many tools and associated technologies may be and are required most times.
So to me they are just tools, I mean nothing more by referencing or speaking of each or others. In the end they are just merely tools, and like a hammer and chisel they wont make you a sculptor like Michael Angelo just by merely owning them.
Having said all that there seems to be an increasing trend of posts across the forum of users expecting or wanting Bootstrap Studio to handle and work with templates or existing Bootstrap sites, so perhaps it's something the developers will need to decide if it will someday fit into the scope of their app. Regardless, in the meantime perhaps make it more clear on the main site, that this is not presently the case concerning a feature as to not confuse peoples expectations of the app.
I am eager to see how the developers advance the app, even in it's current scope and trajectory it's an exciting and viable app for Bootstrap development. Hopefully with time and future updates that will increase further and they will continue to grow the user base.
Thanks for the pointing me to Electron and NWJS, BSS_User! I already expected that these Bootstrap application were developed with web technologies. I am more the C/C++ guy, but it is nice to see that it is possible to develop cross-platform application with HTML, CSS and JavaScript. Makes sense to use them for developing a web editor. Would make less sense to develop image editing tools with them, which is what I mainly do.
My experience from the image editing sector is that most people do not just use one tool, but two or more, even if these have a very similar feature set. So it is no surprise that the same seems to be true for web design.
I also hope that Bootstrap Studio will become more useful for a larger group of people in future. I really liked what I saw so far.
Hello, I am very new with BSS. After a few hours, I successfully use it to elaborate CMS templates. Great software!
A suggestion :
The Export function exports to a directory, with an "assets" folder containing css, js, img etc.
But the Import function is not reciprocal. It would be great to be able to re-import the exported directory. This would greatly simplify using external tools.
More generally, I try to make roundtrip betwween BSS and external tools easier.