Hi, I am following the "Custom Themes" guide at https://bootstrapstudio.io/tutorials/customizing-design. It says that "you can import your theme CSS file, and it will be available to use in all your designs." But I dont understand how to import it and exactly which file / files to import in File -> Design Settings -> Themes. If I import a css file for a theme there from Bootswatch it simply does not apply.
But if I on other hand copy some css or min.css file from some other site and import it in Design tab -> Styles I see that theme is applied.
What am I doing wrong in File -> Design Settings -> Themes? What should one really import there and how?
Just open the Settings of the project.
Click the Bootstrap choice under the Design section in the left menu of the dialog box that opens for settings.
Choose the theme that you want to use.
All of those on the Bootswatch site are in BSS as far as I can tell. Use the Bootswatch site as your template chooser to see which one(s) you like best, easier than trying to check them within BSS.
Ok thanks! But what is the meaning of File -> Design Settings -> Themes? when i import something there it does not work. But css works if simply imported in Design tab... best regards
To be totally honest, I have no idea what that's for. I've never seen anywhere that you could import full themes so I've never bothered to investigate that window as it was basically useless to me lol.
To import themes normally (without the default Bootstrap files) you would just import the custom CSS files for it. There's a few sites where you can purchase premade themes etc. just that you need to know exactly how to import the files and use the styles etc. Easier for me to just start with one that's already included. Now we have some new Site templates as well with this new version so that's helpful as a starting point as well.
Hello and welcome to the forums! The Settings > Themes is exactly the place to import custom Bootstrap Themes. Then they will show up in the Settings > Bootstrap tab for you to choose as a theme of your designs. Only CSS files can be imported. A theme should contain the entire Bootstrap framework, along with your customizations. Bootswatch themes are already included in the app, so there's no need to import them separately.
Ok thanks for reply Martin!
Just a question, say I have made a design in bootstrap studio and want to send it to my friend.
He then should open Bootstrap Studio and go to File -> Design Settings -> Themes and import bootstrap.css and customfixes.css? Where customfixes.css is the changes that I made to default bootstrap.css. Is that correct? Or does he have to import something else?
If you're making designs for others and they will be using Bootstrap Studio, then you would just give them a copy of the project file itself.
If you're making designs for others and they will NOT be using BSS, just export your design and send them the exported files folder. That will include all the files that the website uses.
Ok so File -> Design Settings -> Themes is practically useless? OR if it is not useless, how should one import there? Please give an example, because I saw that more people are wondering about the function of File -> Design Settings -> Themes.
In example, what should I exactly import in File -> Design Settings -> Themes for a theme from i.e. ThemeForest to work in Bootstrap Studio?
Guys, File -> Design Settings -> Themes does NOT work.
In example:
1) Download "bootstrap4-executive-suite.css" file from https://hackerthemes.com/bootstrap-themes/executive-suite/#!
2) Go to File -> Design Settings -> Themes and import it, and click on in so the blue pen button becomes greem check button. Press save.
3) The theme is NOT working!
But is does work if I simply import "bootstrap4-executive-suite.css" in "Styles" drop down in "Design" panel. Please tell what I am missing.
The thing is that I dont want to have a duplicate bootstrap file. I simply want to have either Bootstrap Studios bootstrap file + mine customization css OR a custom imported theme imported in File -> Design Settings -> Themes (so Bootstrap Studios bootstrap file is not included this way).
The File -> Design Settings -> Themes dialog is only for importing themes. In order to use the imported theme you need to go to File -> Design Settings -> Bootstrap and choose it from the "Theme" dropdown. That's also where all of Bootswatch's themes are located. Hope this helps!
Yes thanks gabby that sorted my issue too - I was importing the theme - didn’t realise I then needed to select it in order to use - not that intuitive was it? Great Help - Thanks
Just a thought for any others reading this - when you import your theme - it calls it bootstrap by default - rename it whatever you like - then its easier / more obvious to find in the themes.
I know earlier in this thread @martin sent some information about the Bootstrap theme, but I would like to challenge this notion a bit.
The UI and documentation for this feature needs some additional information and user guidance. It is not clear what a “theme” contains other than it being a CSS file. This leads to some questions:
What is the expectation for the CSS file?
What all should it include?
Why can’t the theme be defined in SCSS as the rest of the project contains SCSS support…?
To me, as a user, “Theme” sounds like color theming. Maybe an example file could be added to the UI so the user knows exactly what to import.