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.
Related
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 am using asciidoctor-fopub to generate a pdf from an asciidoc.
The page number is added in the middle of the page footer. I would like to move it to the far right. I am convinced that this is doable. But I can't find any example of how to customize the page footer properly.
Since you already have asciidoc files it might be easier to use asciidoctor-pdf directly. With asciidoctor-pdf it is possible to design your own footer with themes. How to apply themes is described here.
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.
Im using the Ie developer toolbar for IE6. By selecting an element I can see the CSS being applied to it. Is there a way of seeing other overridden styles the way you can with firebug?
Thanks
I don't know about the developer toolbar, but DebugBar will show you all CSS rules applied to the element you are looking for, even if it is overridden by another one.
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.