I am building an XPages application based on a custom theme I bought.
I want to use include pages to display custom 'widgets' in the header
Unfortunatelly, the included pages are rendered in a tag, which is incompatible with the css stylesheet from the theme.
Here's the code including the pages (the idea is to make this configurable in the future)
<xp:panel styleClass="navbar-account">
<ul class="account-area">
<xp:include pageName="/nav_VisitIn.xsp"></xp:include>
<xp:include pageName="/nav_MyVisit.xsp"></xp:include>
<xp:include pageName="/nav_Profile.xsp"></xp:include>
</ul>
</xp:panel>
The rendered html looks something like this
The css for the list item tags (and all elements below) are similar to
.navbar-account .account-area > li {...}
I want to avoid having to modify all related styles from the theme.
Is there a way to make sure the include page is rendered without the div tag or can I remove the generated div tag (but not its content) from the DOM?
Try adding disableOutputTag="true" in your <xp:include> tags.
Related
I tried liferay-hook.xml:
<custom-jsp-dir>/WEB-INF/custom_jsps</custom-jsp-dir>
<custom-jsp-global>true</custom-jsp-global>
and create file on /WEB-INF/jsp/html/common/themes/top_js-ext.jspf and put all my <link href="" rel="stylesheet" type="text/css"> there. but it will applied to all pages on my page. I want to know on how to apply global styling on selected portlet on liferay. Thanks.
The best way to introduce global CSS styles is through your theme, not through a JSP override. Create a theme that contains the CSS you'd like to use. This way, Liferay will include your CSS in the minified version, compact all files to be downloaded in just a single request. Plus, your changes are probably relevant for a specific theme anyways.
Use your browser's DOM inspection tools to analyse the CSS selector you need. Each portlet declares specific classes that you can easily address. e.g.
.portlet-navigation {
background-color: red;
}
I'm implementing a bootstrap 3 carousel on kentico 9 and need some help with automatically hiding the carousel control (including the circle indicator and the next/previous arrow) if there's only one item left, if possible.
What I've done for the carousel was setting up a new page type for this in which each banner is a page in the content tree under /hero/ folder. Then used 2 repeaters: the first one displays the circle indicator; the second one displays the banner info. All worked well.
Here's how the indicator repeater is set up:
Content before: <ol class="carousel-indicators">
Content after </ol>
Item transformation: <li data-target="#hero-banner" data-slide-to="<%# DataItemIndex%>" class="<%# (DataItemIndex == 0 ? "active" : "" ) %>"></li>
It means the first circle is always there. How to hide it and get rid of the <ol> tags in content before/after?
The next/previous arrows are again in the webpart zone content after, which has this html:
<a class="left carousel-control" href="#hero-banner" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#hero-banner" data-slide="next"><span class="icon-next"></span></a>
</div> <!--/#hero-banner-->
Using content before/after is like hard-coding it onto the page, but I don't know how to make it displayed dynamically and automatically only when we have more than one item. Could you help?
you can use <%# DataItemCount %> One of the [Transformation methods][1]
[1]: https://docs.kentico.com/display/K8/Reference+-+Transformation+methods to determine how many items there are. Then just have the html added in if there is more than one. Something like
<%# If(DataItemCount > 1,'html for more than one item','html for only one') %>
Of course, if you are using the envelope before / after to show arrows, you could also use jquery to determine how many items are there & hide the arrows based off that.
$(function(){
if($(".carousel-indicators li").length == 1){
$(".left.carousel-control").hide();
$(".right.carousel-control").hide();
}
});
I need to customize the output produced by the standard application layout control such as adding HTML code to the label (e.g. to specify fa icons that nest the label):
<xe:this.configuration>
<xe:simpleResponsiveConfiguration>
<xe:this.navbarUtilityLinks>
<xe:basicLeafNode>
<xe:this.label><![CDATA[<i class="fa fa-bell">Notification(s)</i>]]></xe:this.label>
</xe:basicLeafNode>
</xe:this.navbarUtilityLinks>
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
Unfortunate, the output displayed is not escaped and the result is
<i class="fa fa-bell">Notification(s)</i>
instead of
Notification(s).
Is there any way to set escape="false" /"true" for the options label in an application layout control?
The tree nodes are a bit limited in this respect. They weren't designed to be able to add additional html inside the rendered output. You've tried to hack it in there using the label property, but that will always be escaped.
Steve's suggestion to set fa fa-bell as the styleClass of the node itself works, sort of. It would display the icon and text, but it messes up the font style of the label text. And if you change the font of the label, it messes up the icon, as they are all part of the same DOM element.
However, in the ToDo sample application (that is now part of the ExtLib release), there is an example of doing what you want using jQuery, in the simpleLayout custom control. It adds the icons during the onClientLoad event of the XPage. If you re-work that code, you could use it to do what you want:
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[
$(".applayout-utility-links li:nth-child(1) a").prepend("<i class='fa fa-bell' style='margin-right:5px'></i>")]]>
</xp:this.script>
</xp:eventHandler>
I've added the following code to the selected transformation of a News List webpart:
<%# Register Src="~/CMSAdminControls/ContentRating/RatingControl.ascx" TagName="RatingControl" TagPrefix="cms" %>
<cms:RatingControl ID="elemRating" runat="server" Enabled="true" RatingType="Stars" ExternalValue='
<%# Convert.ToString(CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatingValue"), 0)/((CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatings"), 0) == 0?1:CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatings"), 1)))) %>' />
The rest of the selected transformation is the same as the default.
According to the Kentico documentation this should add the webpart to the details page of a news item.
For some reason the input tag is getting rendered as follows:
<input type="hidden" name="p$lt$zoneContent$pageplaceholder$pageplaceholder$lt$News$NewsList$repItems$ctl00$ctl00$elemRating$RatingControl$elemRating_RatingExtender_ClientState" id="p_lt_zoneContent_pageplaceholder_pageplaceholder_lt_News_NewsList_repItems_ctl00_ctl00_elemRating_RatingControl_elemRating_RatingExtender_ClientState" value="0">
note the type="hidden" attribute. This causes the control not to render and I'm not sure where to fix this.
As mentioned in my comment. The is actually just used to store the value. Below that, it renders some extra content that will not display unless some CSS classes are carried over from the CMSDesk.css.
You can either copy the necessary CSS classes into your own CSS, or just import the CMSDesk.css file where necessary to make sure the rating elements are displaying.
Press F5 in this example: DojoToolkit.
First the content is shown, and after that the layout gets into it's final state. In my application I want the opposite, so that the layout gets rendered, and after that the content is displayed. I don't want that 'jumping' phenomenon when loading. Is it possible to fix this somehow?
No, I don't think that there is such an option. Anyway, you could use a container div (with all the dojo layout elements in it) with initial state visbility:hidden, and after the page is loaded and parsed change it's visibility to "visible".
<div id="container" style="visibility:hidden">
<!-- dijit widgets inside the "container"-->
</div>
<script type="text/javascript">
dojo.ready(function(){
dojo.style("container:, "visibility", "visible");
});
</script>