Template CSS

Forums Help and How To Template CSS

This topic contains 4 replies, has 2 voices, and was last updated by  daveharney 5 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • daveharney
    Member

    I understand that custom css classes are added to standard BS css to create a css file specifically for the template. Is there any way to get this custom css in a stand alone css file instead of it being incorporated into one BSS css file? If not currently, is there any plan for making this an option at some point in the future? For my environment, it would be much easier to have the BSS custom css in a separate file. Thanks.

    Jo
    Member
    Valued

    When you add custom CSS to your project, it is always added to either the styles.css file (which is for custom CSS) that the app creates for you, or to whatever file you want it added to. You control where you want it to go other than not having access to the default Bootstrap files. The tutorials should have information on how to best work your way around the file system for saving CSS. If not a search on the forums here should give some results as it has been covered multiple times on how to do things for custom css (best ways to manipulate it so it goes to your file instead of inline styles). Good luck!

    daveharney
    Member

    Thanks for your reply – I should have explained better! I was referring to a Bootstrap Studio Template like “Landing Page”. For example, in that template, there is a css class named “masthead” and it has been incorporated into the BS4 CSS file. Which means that this class is only available if I use the BSS file instead of a standard BS file from a CDN.

    screen shot

    as you can see, “header.masthead” is “locked” into Bootstrap. I could copy these classes one-by-one and put them into a styles.css file, but that seems pretty awkward. So, I was wondering if some of these templates used a styles file instead of creating a customized BSS file?

    Jo
    Member
    Valued

    If the classes are internal ones that are not in the standard Bootstrap files, then no, you’ll have to find them one by one and deal with the copy and paste as there’s no separate file for classes for the built in Bootstrap system. I believe that all the classes should be there in the built in system though, so anything that is available in the CDN should be available internally as well. If you find things in a CDN or prefer to use the CDN then you can set that in the settings for your project Export settings. IT will then use a CDN for the Bootstrap, JS and Fonts files instead of the files built within the app.

    If you check on Bootstrap’s site, they may have the files setup with separate CSS and JS for specific pages as the pages are pretty much the same within BSS as they are on the Bootstrap site. I haven’t looked at any of that in quite some time so I don’t know if they have them separated or all in one default file.

    Hopefully I understood you correctly, and if I did, then look at the bright side. If neither of the locations (BSS or Bootstrap itself) provide separate files for CSS and JS for the pages they offer, then BSS is doing you a favor and giving you the ability to see not only each class used, but exactly what file it is in so if there are parts of a page you need to override, it would not be too difficult to create a new CSS page, highlight the element and it’s parts and copy it’s CSS to the new file. Copying can be done as a mass copy and paste so you should be able to highlight it all, and copy it directly to the new CSS file. Might take a little bit of time, but may be the only way if Bootstrap’s site doesn’t provide these files separately.

    daveharney
    Member

    Thanks Jo, Much appreciated!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.