For BigCommerce stencil themes having references to assets, the docs do not mention CSS and SASS URL references.
Is there a specialized SASS function for referencing images in the asserts directory, in BigCommerce stencil themes? Or, will CDN reference strings be converted automatically?
If you are referencing images that are bundled with your theme, you can use a path like ../images/myimage.png and it will load from the CDN. If you are referencing images from outside of the theme, there is no SASS function and you will need to hardcode the CDN URL (or use inline css to utilize the CDN handlebars helper).
Alyss's answer helped, in your CSS you can reference theme assets with the path he provided:
../images/myimage.png
For inline, you can refence them by using the CDN handlebars syntax:
<link href="{{cdn '/assets/css/invoice.css'}}" rel="stylesheet">
More info here:
https://stencil.bigcommerce.com/docs/css-resources
Related
When I use the #vue/cli to create a vuejs project, I see that there is a folder /assets that contains images and whatever I want. Than they can be referenced in the html such as <img src="#/assets/images/home.png" /> or import it on the js part.
My question is, why can't I just put the assets in /public/assets and put directly <img src="/assets/images/home.png" /> in my code? Where is the advantage of these assets?
It allows Webpack to handle assets, which means it can merge/minify files (useful for JS and CSS), optimize images, and more importantly version them so that cache handling is improved.
I wanna hide that i use The Blazor.
so, I should modify name of bundled css and js files.
How to do this?
According to this article, CSS isolation occurs at build time. During this process, Blazor rewrites CSS selectors to match markup rendered by the component. These rewritten CSS styles are bundled and produced as a static asset at {PROJECT NAME}.styles.css, where the placeholder {PROJECT NAME} is the referenced package or product name.
That means we could only disable the bundle not modify it during develop environment.
But after publish, it will generate the file like this:
You could modify the {PROJECT NAME}.styles.css to {other}.styles.css and modify the index.html css name as below:
<link href="{other}.styles.css" rel="stylesheet" />
I've a custom theme under app/theme/AcmeTheme. I have the theme working and I can define my own templates under views or override template for other Bundles. The problem is that I can not figure out how to add a custom CSS file inside my theme.
So fat I've tried:
AcmeTheme/public/style.css
AcmeTheme/web/style.css
But after running assets:install and sylius:theme:assets:install the file is not copied. I have read the documentation multiple times and I can still not get it to work.
Place your style.css in app/themes/AcmeTheme/SyliusShopBundle/public/ and run sylius:theme:assets:install. Now your style.css should be available in web/bundles/_themes/AcmeTheme/template/syliusshop/ and you can include it in the html.twig with <link rel="stylesheet" href="{{ asset('bundles/syliusshop/styles.css') }}">
Solution with assets in app/themes/AcmeTheme/web/assets/ doesn't work for me. Only way to add custom assets is via app/themes/AcmeTheme/SyliusShopBundle/public/ which is pretty odd.
I have a photo gallery that has it's own .css and .js file. I'd like to be able to add those to only the gallery page. They server no purpose anywhere else on the site. How I do this in BigCommerce? I can't seem to find the gallery page I created in their file system.
As far as I know, it's not considered best practice, but if you are using the HTML5 Doctype specification, e.g:
<!DOCTYPE html>
Your css doesn't need to be in the of your site. You could add your link to the top of your custom gallery page. If you're adding them through the html editor while editing a page, I believe a relative file path will work for those assets, such as:
<link rel="stylesheet" href="/template/Styles/yourfile.css" />
<script src="/template/Styles/yourfile.js"></script>
If you create a custom page template file you can check the documentation on referencing assets in a theme.
Both files will need to have been uploaded via webdav.
Turns out this is not going to be possible without major edits to the existing CSS but thanks for the help.
I'm trying to make a simple page with bootstrap and glypicons in jsf 2.2. I've included webjar's bootstrap dependency (and opening the jar I can see the fonts file are present).
When deploying the app to wildfly, bootstrap css works correctly, but icons shown are horrible (like a default font or something). Looking at the network tab in the browser, I only see 404 errors:
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff 404
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf 404
I tried including the other dependency (bootstrap-glypicons) and I only get the 404 errors twice. What am I missing?
This is how I'm including boostrap, which works correctly for css:
<h:outputStylesheet library="webjars" name="bootstrap/3.1.1/css/bootstrap.min.css" />
And this is how I'm using the css classes:
<button><span class="glyphicon glyphicon-minus"></span></button>
You should use <link> tag instead of <h:outputStylesheet>
eg.
<link rel="stylesheet" type="text/css" media="all" href="webjars/bootstrap/3.1.1/css/bootstrap.min.css"/>
--- UPDATE
This happen because ResourceHandler in JSF add library value (webjars) to the end of URI as a parameter:
faces/javax.faces.resource/bootstrap/3.1.1/css/bootstrap.min.css?ln=webjars
in bootstrap.min.css CSS there are such references to files:
url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
so if you want to use <h:outputStylesheet> you can write own ResourceHander or you can edit bootstrap.min.css and fix paths to glyphicons-halflings-regular.* files
In my opinion is better to use standard html tag <link> instead of <h:outputStylesheet> because JSF component tree will be smaller and it act on performance. Inside bootstrap.min.css there is no EL so there is no need to use <h:outputStylesheet>
Small update: webjars has JSF specific versions of several CSS libraries, in case of the bootstrap CSS the following will work just fine:
<h:outputStylesheet library="webjars" name="bootstrap/3.3.5/css/bootstrap-jsf.css" />
Note the -jsf suffix.