I am developing a content script and I know my CSS is being injected. It works. But I can't see the styles in the inspector. I'm using Chrome 21.0.1180.89 on a Mac.
Is there some ttrick to see the content script styles in the inspector?
You can see injected CSS in "Computed Style" section of inspector.
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 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 want to dynamically generate some buttons on my chrome extension default_popup HTML page and I want on click to open a model in the middle of the screen NOT a new tab, I saw some other extensions having its options like this, and then display some info.
I think the only possibility isto get rid of the defalt_popup and inject all my scripts through the background page straight into the html page.
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.