Buildfire: Theme is overwriting styling - styling

I am trying to set the color of a in the html of a widget index.html.
How can I set the color<h2 style="color:{{x.titlecolor}}"> with out it getting over written by the theme's styling?


You can disable theming in your plugin by adding the following tag to head of your index.html file, for your widget.
<meta name="buildfire" content="disableTheme=true">

Related

How to avoid CSS content jumping when injecting styles when developing a Chrome Extension?

I want to insert some DOM & style to my webpage.
And I don't want the process to cause any Content Layout Shift.
I tried many ways:
document.write - it can write the tag but it will ruin the whole page.
document.head.appendChild - it says the head tag doesn't exist.
include external CSS - it will cause content jumping.
I just want to add some lines of CSS to the page, from my extension, into the <head> section so that it won't cause the content jumping. What can I do?

How to use svg icons in a web content of Liferay

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

Customizing portal's navigation bar

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.

Inspect CSS from Content Script

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.

Page-level css to go with a themeroller theme?

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.

Resources