Styling with Resource Packages, Feather and Pure MVC Templates ignores Sitefinity Templates - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Styling with Resource Packages, Feather and Pure MVC Templates ignores Sitefinity Templates

  • Styling with Resource Packages, Feather and Pure MVC Templates ignores Sitefinity Templates
  • Looking at the following link: www.sitefinity.com/.../app-theme-does-not-render-on-the-frontend

    It suggests : "When utilizing Feather and pure MVC templates layout files and resource packages have to be used instead of App themes"

    It also references three links, but none of those recommend an approach or best practice for adding customizations in such a way that won't interfere with package updates. 

    Also, you have to setup Node.js etc. and use SASS to stick with the practice being used within the package. 

    Is there a document describing best practice for where to store your custom CSS, Images, JS, etc.? 

  • Thanks Victor. 

    So to use Bootstrap are you suggesting perhaps making a copy of the Bootstrap package, giving it a new name and then making your own changes in there? 

    As for Web Essentials. Thanks I'll have to check it out, but off-hand does it handle SASS/LESS compiling, minification, etc? 

  • Wow I'm having a ton of problems doing this. 

    I installed all the Web Essentials components, made a copy of the Bootstrap package and gave it a sensible name, then right clicked on the sitefinity.bootstrap.scss file selected compile and compile on build. 

    No matter what I do it keeps failing on the sf-mt-xxs issue reported by Jochem on GitHub even though I've replaced it as recommended. 

    From what i can tell it's not picking up the variable names used in _common.scss. On line 26 and 27 of _common.scss it also makes use of mixins which it can't find even though they're there in the _mixins.scss file. 

    Do I need to reference the _mixins and _variables files in _common.scss? 

  • Hi Jacques. 

    IMHO. It is better to create new resource package and store everything related template(images,css,js,saas,less,bower) inside this folder.

    And for SAAS/LESS tricks, bower and etc, you dont need to install node.js. I want to suggest to use http://vswebessentials.com/. This plugin is amazing.

  • Yes. I think it is better to create copy, instead editing existing.

    Web Essentials  handle compiling, minification, bundling, bower and etc. I can't live without this plugin

  • So going the custom package route... how do you handle Package updates? I.e. if the default Bootstrap package gets updated how do you make sure your own package gets the needed updates?
  • Hi Victor, 

    Here's an example of where I'm not sure how to replace the NodeJs route with Web Essentials. 

    On a standard installation the basic site will render a Bootstrap Template with sitefinity.bootstrap.css which is obviously compiled but it comes from sitefinity.bootstrap.scss which has the following references: 

    //Import Bootstrap from npm
    @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss";
    @import "../../../node_modules/magnific-popup/src/css/main.scss";

    These don't exist I assume because Node and all the relevant modules haven't been installed. 

    I'm not sure what those files contain, but going the Web Essentials route, how do you configure the build so that all relevant files are built and output correctly? 

  • Hi Jackues. 

    To compile sitefinity.bootstrap.scss you need to do some short steps to configure web essentials

    1) I am using bower instead npm. You need to add bower.json in your resource package folder

      "name": "appname",
      "version": "0.0.1",
      "dependencies":
        "bootstrap-sass" "*",
        "magnific-popup" "*"
      ,
      "private": true

    It will install all necessary dependencies

    2) You need to change lines in sitefinity.bootstrap.scss. Replace npm to bower

    //Import Bootstrap from bower
    @import "../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
    @import "../../../bower_components/magnific-popup/src/css/main.scss";

    3) You need create(or edit) compilerconfig.json in root of your VS project

    [
      
        "outputFile": "ResourcePackages/Bootstrap2/assets/dist/css/sitefinity.bootstrap.css",
        "inputFile": "ResourcePackages/Bootstrap2/assets/src/sass/sitefinity.bootstrap.scss"
      
    ]

    After this steps you will be able to successfully compile sitefinity.bootstrap.scss file

     

     

     

     

  • If you still have problems with that, just write me on email victor (dot) leontev (at) gmail (dot) com and i will answer to all you questions regarding resources packages
  • Hello to all!
    Here is my question: I need to create several themes for a website using MVC template. Today I'm working with Sitefinity 9.1, so I would like to know what is the best practice since handling themes like old school is not the best practice. I read about that and it is like handle with Resources Packages. Somebody can guide me on how this would be possible? Regards.