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
Related
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!)
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 am creating an "iBook Author html widget", That perform some calculation(a simple calculator), Everything work perfectly but my problem is that i want to show widget on page rather then "Default.png" image, and my widget should not be open in popup and workable in place where it is placed.
Is there any setting in plist which can change behavior?
We ran into the same problem when building our first book. iBooks Author doesn't support inline HTML widgets, unfortunately. If you want inline behavior, you have to use one of the existing widgets (video, slideshow, etc.).
You can customize the Default.png file (documentation here) but that's about it.
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.
Having selected a theme from themeroller, I'd now like to put together some compatible CSS for the rest of the page that includes the jquery components that respect the theme. Is there any shortcut for this?
I would use the hex values and fonts that you used in your Theme to build your own custom css file. You can gather all of these values using the Edit feature on the ThemeRoller page for the theme that you've selected.