I have an SVG uploaded through the media library.
I want to be able to style the paths in the SVG using CSS, so rather than displaying it in an image tag, I need to output the XML within the file to the template.
Any ideas?
Umbraco 7.3.0
Found a solution that works for me, but it may be messy
#Html.Raw(System.IO.File.ReadAllText(Server.MapPath(Umbraco.TypedMedia(globalSettings.GetProperty("websiteLogo").Value).Url)))
Related
I was working on translating Alfresco share to Arabic i.e to RTL format.
Reading a comment from here I found out that the best way to proceed is to Create a custom extension pulling in an additional CSS file with the styling modifications.
Now coming to the question, I've encountered a problem while altering the css files to support RTL. The problem was that some css files were situated inside aikau-1.0.101.10.jar file. Can anyone help me on how to alter these css files ? or Can I override these files somehow ?
Some ways to do this:
You can create your own theme
Override LESS variable link
Fork Aikau and build your own jar link
Create an extension to include your own css file link
I'm trying to add a SVG into my webpage, I think the format is a bit odd.
https://gist.github.com/Vadorequest/c329dec26e39a586e96df5f74c1d7d29?short_path=d29c6c9 (you can see the source code and the rendering there)
The style part isn't correctly understood since I'm loading this file using React. If you save the file and open it in a browser, it'll work fine. But if I load it by react using react-svg-loader, it displays a dark image.
import IconBook from "-!react-svg-loader!../assets/couverture-eBook-VF.svg";
...
<IconBook height={250} />
Is it standard to put the style like this? Should I get a new SVG exported differently? I really don't know that format and all its possibilities.
Edit 1:
I found a working workaround for anyone interested: https://github.com/gilbarbara/react-inlinesvg
It basically loads the svg file over network and anything in it will be correctly loaded. (including <styles>)
On the bad side, it makes the app rely on something that must be available via CDN or alike. (you won't have the svg embedded in your app. If you wanted some kind of standalone app that can be built with everything in it, it's not really good)
On the good side, it doesn't require any change in the SVG file, you use it as it, load it over network, and it displays as in the browser.
Since I'm building a standalone app (basically, npm run build will generate a folder with my whole app) this isn't perfect because I need to host that file somewhere on a CDN. So I'll keep looking for another solution.
It is fine to have styles in your svg file, as specification says:
Cascading Style Sheets (CSS) is a stylesheet language used to describe
the presentation of a document written in HTML or XML (including XML
dialects such as SVG or XHTML). CSS describes how elements should be
rendered on screen, on paper, in speech, or on other media.
https://developer.mozilla.org/en-US/docs/Web/CSS
My scss code stopped working. I identified the problem - two css files: custom.css.css and custom.css.css.map. I'm not using bootstrap, just ror. How do I make ruby ignore them? Or shouldn't I? The layout looks exactly the same, the code is easier to read (but not neat enough for my liking).
.map files are called source maps and they are used by browsers to display css files. I guess you are using SASS or LESS as you having a .map file generated. You may need to enable source maps in browsers to display the styles correctly. I hope following urls might help you.
Sass source files in Google Chrome
Sass Source Maps + Chrome = Magic
I'm using Apache FOP library to make a transform from a html + css file to pdf file. To do this process, I use several API's to reach to the final pdf. Firstly, I convert the html file to xml using TagSoup, then I transform xml to xsl-fo using xslt stylesheet for then and last step, I transform the xls-fo generated to pdf file. My problem comes when I view the pdf. I want to apply the same css styles as I apply in the html to the pdf too. I know if there are any way to link or include the css files in the xslt file when I try to do the transform to apply this styles on the final pdf.
I know this question is more theorical than a concrete practical case.
I hope anyone can help me.
Thanks!
I just find out some htc files in my solution with some script inside what does those file do ? Is it possible to remove them. the using inside like behavior link inside of CSS
HTC reference from MSDN:
For Microsoft Internet Explorer 5 and later, HTML Components (HTCs)
provide a mechanism to implement components in script as Dynamic HTML
(DHTML) behaviors. An HTC is an HTML file that contains script and a
set of HTC-specific elements that define the component. The component
is saved with an .htc extension. This section lists these HTC-specific
elements and the members they support.
And maybe this comment can be of value.
It's likely there to support CSS features unavailable in older versions of IE.
http://www.fileinfo.com/extension/htc
http://www.filefacts.net/htc-file-extension
Files that use the file extension .htc are HTML Component Files which are HTML pages that are wrapped in descriptors that define properties etc that are used by the component, an apt description can be found on the w3.org website which states "HTC is literally a normal HTML file with a few defined XML elements inserted in the document"
I have only used an htc file to allow IE (< 9) to draw rounded corners, along with the border-radius property. This is not a recommended practice though. It depends on your priorities: if you prefer efficiency over design, I wouldn't use those files.