I got the Salesforce Design System pilot from this morning's Webinar. I uploaded the package (as 'sds.zip') as a static resource. I'm calling the CSS (immediately after '' in the .cmp file) with:
<link href='/resource/sds/index.scss' rel="stylesheet"/>
However when I attempt to save I get the error:
Failed to save undefined: No COMPONENT named markup://use found : [markup://c:contactList]: Source
I think the 'use' error is a refrence to this code block, which is later in the .cmp file:
<svg aria-hidden="true" class="icon icon--large icon-standard-user">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user" />
</svg>
I assume I'm importing the CSS incorrectly, what's the right way to do it?
You are importing the CSS correctly. That's the way to do it from inside a Lightning Component. From inside a Visualforce page you do <apex:stylesheet value="{!URLFOR($Resource.sds, '/resource/sds/index.css')}" />.
The problem is not the CSS import but VF not understanding the use and svg tags inside the component. For Visualforce to properly parse the tags you need to declare the namespace by adding the line <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">, with its matching closing tag at the end. This works fine if you just put it in VF, and you are using the svg tag in VF.
However, if you are putting the svg tag inside a Lightning Component, you need to create a separate svg component for it, as described in this tutorial.
Related
I am working on a shopify store and I want to change the properties of a class. Please see the code below:
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-facebook" viewBox="0 0 32 32"><path fill="#444" d="M18.56 31.36V17.28h4.48l.64-5.12h-5.12v-3.2c0-1.28.64-2.56 2.56-2.56h2.56V1.28H19.2c-3.84 0-7.04 2.56-7.04 7.04v3.84H7.68v5.12h4.48v14.08h6.4z"/></svg>
I would like to modify the properties of the "icon-facebook" class. Normally, this class would be defined in the theme.scss.liquid file (which I though is where all the classes are defined, I have been able to change properties of other classes in that file) however, the "icon-facebook" class is not there. Is there another file where the class could be defined? I have looked everywhere but have not found it.
Thank you.
You can just style it in your main project file.because styling in the project file also adds the styles as from the external files.
And then you will have all the styles added to your class icon-facebook from both the files.
I'm trying to use a symbol from my defs.svg as a background image in CSS, as opposed to a direct path to an individual SVG file.
So instead of:
background: url(spoon.svg);
I want to do something like this:
background: url(defs.svg#spoon);
With #spoon being a symbol in defs.svg with id="spoon". Unfortunately, this isn't working for me. Has anyone come across a solution that doesn't involve custom JS/etc?
You'd need to define view and use tags inside your defs.svg so CSS would know where to look and what to show.
So, for example, say you have inside your SVG a symbol defined as this:
<symbol id="poop" viewBox="0 0 100 100">
<!-- Your shapes here -->
</symbol>
And before closing the svg tag, you must add the view and use defining tags:
<view id="poop-view" viewBox="0 0 100 100" /><!-- This ID used here is what you'll use in your CSS! -->
<use xlink:href="poop" width="100" height="100" x="0" y="0"></use>
Note that at this point, you can open your raw SVG file in a browser and it will show your drawing - before it showed blank!
And now you can set your SVG symbol in your CSS:
div{background-image:url("defs.svg#poop-view")} /* Remember, it's the ID used on your <view> def! */
Also, be sure your SVG includes a xmlns:xlink namespace on the opening tag, or it won't be supposed to work.
Disclaimer: I'm trying to use this setup at work hosting the SVG file on a server on my university, but for some reason this doesn't work (even SVG files won't show if <?xml>and <!DOCTYPE> tags are missing on the SVG), so be sure to check the sanity of your SVG file.
Find more about this on Jennifer Hiller's codepen blog.
I'm using a generated SVG file with symbol declarations, and my page will only show the first symbol in the sheet. Trying to figure out how to get all the symbols to display, using the following syntax:
<svg role="img" class="icon icon-code" title="Icon: HTML Brackets">
<use xlink:href="icons.svg#code"></use>
</svg>
Here's a test case: http://plnkr.co/edit/oSG6bdeK6AHrdfUyBTop?p=info
And here's a successful example: https://dl.dropboxusercontent.com/u/46814417/svgtest/index.html
If you load your icon.svg file into your browser, you get an error reported. For instance, in Chrome it says:
error on line 8 at column 87: Namespace prefix sketch for type on path is not defined
Your second symbol has an attribute with a "sketch:" namespace. That namespace is not defined anywhere. If you remove this attribute I expect your test will start working.
I have a page with error message hidden using display: none;
When page loads, the error message was shown briefly and then went away. It seems ccs applies slowly to the page.
How can I improve the user experience and not allow the error message to display when loading?
The page also loads a table using Ajax call. Could this affect how css applies to the page?
Thanks.
Simply add style="display:none;" to the actual html elements or div's on the page that you don't want to show initially. You can't rely on the CSS file right away. For example:
<div class="error" style="display:none;">
<span class="myerror">Hello World!</span>
</div>
Other than this exception for the hidden areas, it's typically best to keep all your css decoupled from the page and in an external file.
If you call your CSS file with <link> then you should try to put your CSS in <style> instead. Should be faster. As the external file needs longer to load then <style> which you have in the same file.
I have an html file that I'm "including" via object:
<object type="text/html" data="try.html">
</object>
I'd like to use CSS to control how the contents look, but the CSS code seems to be ignored for the HTML in the object. If I pull in pieces directly the CSS works so I know it's "right". If I look at the HTML with a debugger, I can see there's another BODY & HTML tag, but since I'm using an ID I figured it would still find it.
Any suggestions ?
EDIT
so I got this to work using the jquery with $.get() like this :
<div id="here">
</div>
<script>
$.get("try.html", function(data) {
$('#here').html(data);
});
</script>
but I'd still like to know why, the CSS didn't apply to the HTML code included by the object tag. I haven't found a good explanation of that yet.