The documentation says you can't reference SVG from markdown, but I didn't see anything saying I couldn't use it for toolbar icons. I've done just that, and an icon that works perfectly in the extension host is missing when I package and install from a VSIX.
Is SVG also disallowed for toolbar icons within an extension? If I must render bitmaps, in what format and at what resolutions? Is there detailed guidance on this that I have failed to read?
SVG is supported.
Files in project-root/src are not bundled. Put the icons anywhere other than the src folder and they will be bundled. (I certainly snatched defeat from the jaws of victory with that one!)
Related
I am trying to export a logo from Adobe Illustrator to SVG for the Web. I followed the steps and properly exported the SVG file. Loaded it and published the page. It looks fine on my Development PC; however, when I tried to view the same page on another PC, some of the fonts have changed and does not display properly. How do I make sure the fonts are available in the SVG file for publication and display everywhere?
Shift+Ctrl+O
The less fonts the less problems.
I use liferay 7.1 (ga2) and I'm developing a theme (with theme generator). I have a problem with svg icon in a web content.
I added a directory images (in / src), containing a svg directory which in turn contains (a sprite) svg icons.
In a web content, I would like to invoke these svg icons, for example with the HTML statement:
<svg class="icon">
<use xlink:href="./images/svg/sprite.svg#icona1"></use>
</svg>
I tried different path (href). The main problem is that as soon as I save the web content, Liferay automatically translates the previous code into:
<svg class="icon">
</svg>
Therefore, the part relative to the path ('use' tag) is deleted. And the icons, of course, are not visible.
Why?
What should I do to include svg icons in a web content?
Thank you
Francesco
Your issue has nothing to do with the path or using a Liferay tag or not (tags would not even have any effect if included inside those items via editors). It seems to be a simple editor issue, which is the root cause of your problem.
You will need to configure your editor to accept the use tag and avoid its removal when web content items are cleaned up, prior to saving.
https://www.e-systems.tech/blog/-/blogs/editor-configuration-contributor
#Victor is correct.
I'll also add, these are WYSIWYG Editors, not HTML editors. Source really shouldn't be edited manually. Source View is only there for convenience.
If you want explicit markup, use a Web Content Structure.
ok, I solved.
The problem is not the editor nor liferay.
The problem is that if I compile and build the bootstrap theme, in /dist dir (of bootstrap theme) I have the sprite.svg, while in /src (of bootstrap theme) I have the individual icons.
I loaded the individual icons.
Instead, if I copy the sprite.svg (of bootstrap theme) in /src/images/svg (of liferay theme), then everything is ok. Also from web content.
Thank you all.
Francesco
I need to download the "Municipalities in Bosnia and Herzegovina.svg" (map) file from this page, but I have no idea how to download it, i.e. to find a link to the image on the page. I found sodipodi:docname="Municipalities in Bosnia and Herzegovina.svg" in the source code, but that still doesn't help me. Could someone link to the svg file and perhaps explain how they deduced where the file is stored?
Assuming you have the rights to use the map. Make sure you do.
The SVG is embedded into the code of the page. You need to cut and paste it from the page source.
The following instructions are for Chrome. Other browsers will be similar.
Mouse over the light grey area of the map.
Right-click, then select "Inspect" from the menu
The browser web tools pane should open with the <svg> element selected.
Ctrl-C to copy
Paste into your favourite text editor.
"Save Page As"
Chrome(right click)
Firefox (menu/Alt or Ctrl + S), then choose the "just SVG" option in the dropdown menu.
Internet Explorer (get Firefox or Chrome, its about time!)
An easy way to download the SVG is using a browser extension. For example, on the Chrome browser there is the SVG Export extension which allows you to view & download the SVGs on a given page. Of course, always make sure that you have the rights/permissions to download the SVGs.
I need to view an icon.ttf (svg,woff,eot,whatever) font file. I do NOT want to create CSS to do this. There are hundreds of icons and I need to look at them quickly. Is there anything I can use to open the font file?
The only responses are along this vein: If I have a generated icon-font as TTF, can I tell which CSS content-property belongs to which character? and include CSS - that is NOT what I am looking for. I want to preview the file NOT through manual entry using CSS (or SASS, etc).
I am assuming this cannot be done since I havent found a decent answer. If you have the knowledge for how to preview an icon font, please share!!
You could use the Character Map tool in Windows. Just select the icon font and you can preview the entire list as well as the corresponding css codes.
I want to customize the navigation bar in my theme. I searched for the CSS file that styles the navigation bar in the css directory but I couldn't find it.
In the nagivation.vm file, the navigation is declared as follows:
<nav class="$nav_css_class" id="navigation">
and using firebug I found out that the class is
sort-pages modify-pages.
I appreciate your help.
Thanks
The css file is called css/navigation.css. However, best practice is to do all modifications in _diffs/css/custom.css - this file is loaded last and all settings in there will override those in navigation.css and any other files. As a side effect, you'll have all of your settings neatly separated from Liferay's and are in a better position during updates.
custom.css is supposed to be empty in all themes that are meant for extension. If you start with the classic theme, you'll see that custom.css in there is not empty - this means, that the classic theme is not meant to be extended. Technically you can still do so of course, but Liferay might change this theme without notice in future versions and you'll end up upgrading then.