How can i add new css and js file in my BC Stencil Theme ?
and i cant find my all theme folder in cyberduck! my theme name is Cornerstone Light.
The legacy theme platform (Blueprint) used Cyberduck to upload theme files, but Stencil uses Stencil CLI developer tools. If your store has a Stencil theme applied, you won't see a template folder in WebDAV.
First, install the prerequisites for your OS and install Stencil CLI:
https://stencil.bigcommerce.com/docs/installing-and-launching-stencil-1
Download your theme so you can work on it locally. CSS files can be added to assets/scss and js files can be installed with a package manager like npm, or uploaded to assets/js.
After uploading your custom.scss file to the assets/scss directory, you can import it into the default scss file (theme.scss) with an #import statement:
#import "custom";
Here are links to the documentation on adding CSS and js files to your theme:
https://stencil.bigcommerce.com/docs/custom-sass-functions#Compiling
https://stencil.bigcommerce.com/docs/js-101
You might also find this BC Community discussion helpful:
https://forum.bigcommerce.com/s/question/0D51B00003sRDg7SAG/custom-css-in-big-commerce
Related
After I created a theme in sylius my icons are not loading. But when I include the original path of style.css they appear. What am I doing wrong.
I have followed this link as a reference:
How to add CSS files on a Sylius theme?.
Screenshot attached
In the style.css file in your theme folder. Change the src url of the icons in #font-face.
For example:
Add fonts/icons.eotinstead of themes/default/assets/fonts/icons.eot
Do the same thing for every font file and images.
Context: I'm moving from AngularJS 1.x to Angular 5 and trying to
understand some points.
When I import bootstrap from npm modules in style.css or in styles array inside angular-cli.json the css content is merged into html after build.
Is possible to set the build to set a external css link tag instead? When I can set the build to copy bootstrap.min.css from node_modules to assets or vendor folter?
I could copy the bootstrap.min.css by hand into assets folder, but that's not in the CLI spirit. I also can't use CDN in this case.
You can add link to bootstrap stylesheet in your index.html as normal
How can I edit in CSS.
In Stencil framework can't found .css file.
In assets folder only found .scss file.
I want to edit in theme.css
How can I edit ?
Can any body help me ?
If you are developing a stencil theme locally and have ran stencil start it watches your SCSS files. So one option is you could add any custom CSS you want to the /assets/scss/theme.scss file.
Another option is you could create your own SCSS file, say for example custom.scss, and place it in /assets/scss/. Then import it to your theme.scss like this #import "custom" . Make sure you place it at the bottom of your theme.scss file so it overrides any css you are wishing to alter.
the .scss files are the css files. The stencil framework uses scss instead of the regular css.
This link should help guide you on how to edit the files: https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor
the .scss files are the css files. The stencil framework uses scss instead of the regular css.
Please check this path /assets/scss/theme.scss
I would like to know how to change the default index.html file. I have created a classic project (for mobile web). In that I have created a .css file which includes my custom styles. Now I would like to include this file in index.html, so that those styles will apply on my application. But haven't seen the index.html file. After build, I am able to see this file in build folder. May I know how to update the index.html file?
Thanks in Advance,
Swathi.
Appcelerator uses XML for views, TSS for styling, and JS for controllers. Then Titanium compiles your source code into the native API (HTML for mobile web). Because you can also compile for iOS, Android, and Windows, your output is converted appropriately to your build directory. When you create a new Alloy project, you will find the default index.xml, index.tss, and index.js in the app views, styles, and controllers directories respectively. So to control index.html, edit these 3 index.* files.
I copied the config.json to the bootstrap source folder and followed the compiling instructions on Bootstrap's site.
It build bootstrap with everything where I only wanted what was in the config.json file.
What is missing?
The Grunt build doesn't use the config.json file. Only the web-based Customizer uses it.
To customize with Grunt, just edit the.less files and/or Gruntfile.js directly.