I'm using Koken and would like to customize the template for text entries by putting the date at the top of the entry.
I hacked a call to new Date() into the core template file /admin/templates/text.tmpl.html
<div id="entry-editor">
<div id="edit-area" data-bind="html: content() ||
'<p class=\'date\'>' + new Date() + '</p>
<p class=\'media-row\'><br /></p>'">
</div>
</div> <!-- close #entry-editor -->
This works fine, but I know the perils of hacking core files.
As of this writing, I don't see an answer on the page linked as "define your own custom template types" on help.koken.me.
Without hacking core files, how can I have Koken add a date to the top of each text entry?
From http://help.koken.me/customer/portal/questions/1080677-how-to-make-custom-templates-in-koken-
Simply place a <koken:time> tag in the customized theme template.
For example, in my /storage/themes/<custom-theme-name>/essay.lens file:
<header>
<h2>
<koken:link>{{ essay.title }}</koken:link>
</h2>
<p>
<strong><koken:time show="time" /> <koken:time show="date" /></strong>
</p>
</header>
Related
I want to have ready components for a page, when a page template is used. E.g. when I create a page using subpage-1 template, it'd give a place to drop a banner image (or leave a template image) and add breadcrumbs automatically (no need to customise).
They both have custom ADT, which I can't seem to find from the Page Template options. (It seems to have it's own "site" in the admin bar, when editing the template, so my guess is it doesn't find anything from my main site.)
Is there a way to get the custom ADTs for the page template? For clearance, the route to the template is Site Builder --> Page Templates --> New Collection --> New page template.
Possible workaround?
This is my subpage-1-column.ftl code, which has two dropping places: One for the banner image and breadcrumbs (which I would like to have automatically placed) and the other for the other stuff. Is it possible to add all the things here, that I want my page template to do (content place, type, adt...)?
<div id="main-content" class="container-fluid subpage-1-column">
<div class="portlet-layout row no-gutters">
<div class="portlet-column portlet-column-only col-12" id="column-1">
${processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")}
</div>
</div>
<div class="portlet-layout row no-gutters">
<div class="portlet-column portlet-column-only col-12" id="column-2">
${processor.processColumn("column-2", "portlet-column-content portlet-column-content-only")}
</div>
</div>
</div>
Promoting a comment to answer:
ADTs can live in global scope, there they're independent of a "current site".
Downside: Global means global and comes with the general downside of anything global. In this case, I believe that it's not much of a problem, but you'll have to validate that for yourself.
My recommendation is to look at Content Pages / Master Pages though, as they're a lot easier to edit than Freemarker Templates.
In your comment you say that Master Pages "destroy" your footer, header etc, which they're not supposed to do and I wonder about the root cause there. But anyway: You seem to have your ADT already, and global scope seems to fix your issue. I'll leave it at that. Going after the Master Page issue's root cause would be a different question (but might no longer be programming related)
If you're looking for a code template for the possible "workaround":
<div id="main-content" class="container-fluid subpage-1-column">
<div class="portlet-layout row no-gutters">
<div class="portlet-column portlet-column-only col-12" id="column-1">
${processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")}
<#assign portletPreferences = { "displayStyle" : "ddmTemplate_ADT_CUSTOM", "portletSetupPortletDecoratorId": "borderless", "headerType" : "none", "delta" : "10", "paginationType" : "none" } />
${processor.processPortlet("com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet", portletPreferences)}
</div>
</div>
<div class="portlet-layout row no-gutters">
<div class="portlet-column portlet-column-only col-12" id="column-2">
${processor.processColumn("column-2", "portlet-column-content portlet-column-content-only")}
</div>
</div>
</div>
This will add an AssetPublisher to your first column with a specific ADT (ddmTemplateKey = ADT_CUSTOM)
To see all available portletPreferences check your database or copy the following code in one of your ADTs:
<#list portletPreferences?keys as prop >
<li>
${prop}
</li>
</#list>
I have two different kinds of indexes both are working fine at least in the search preview of my local index.
I added both of them to my smart search part in indexes area, one is a page crawler and the second is a custom index that searches in the media library.
The issue is that the results just match with the results of the crawler and are not showing anything of the custom index.
I think the problem is my smartSearchResults transformation because each time that I try to add a field from the custom index I'm getting an error that the value does not exist.
my question is how to use both indexes to retrieve all the results in the same web part?
this is how looks the trasformation
<div class="result">
<!-- Search result title -->
<div>
<a href='<%# SearchResultUrl() %>'>
<%#SearchHighlight(HTMLHelper.HTMLEncode(CMS.Base.Web.UI.ControlsHelper.RemoveDynamicControls(DataHelper.GetNotEmpty(Eval("Title"), "/"))), "<span style='font-weight:bold;'>", "</span>")%>
</a>
</div>
<p class="content">
<%#
IfCompare(GetSearchValue("UseCustomContent"), true,
SearchHighlight(LimitLength(HTMLHelper.StripTags(Eval<string>("Content")), 280), "<strong>", "</strong>"),
SearchHighlight(LimitLength(HTMLHelper.StripTags(GetSearchValue("CustomContent").ToString()), 280), "<strong>", "</strong>")
)
%>
</p><!-- content -->
<%-- MEDIA LIBRARY CONTENT--%>
<div>
<%#GetSearchValue("FileName") %>
</div>
<div class="file">
<i class="<%# GetFileIconClass(Eval<string>("documentExtensions")) %>"></i>
</div><!-- file -->
</div>
</div>
But I'm getting no results message
When getting specific field values from a search index you cannot use the simple Eval("ColumnName"). You have to use another method, GetSearchValue("ColumnName"). The Eval() method works mainly with the following columns Title, Content, Image. If you're already using the GetSearchValue() method then you need to update your question to reflect what you're using or have already tried.
You will have to check if the value exists before you try to use it. You can use IfEmpty for this. An Example:
<%# IfEmpty(GetSearchValue("Email"),"","<span class='label'>Email</span>")%>
<%# IfEmpty(GetSearchValue("Email"),"",GetSearchValue("Email"))%>
I would like to change the call to action button on the landing page of my website to a social icons element. How do I edit the HTML code to do this? I am using the "Paris - Business" theme. Thanks.
There is some documentation on how to do this, if you search the web. For example, my own site has a basic example of what to look for Landing Page Button Removal.
In that case, you could replace the code that makes the button with your own code.
That being said, there's some new features you can use that would make the content editable. Weebly just introduced "Sections". Sections allows you to have different sections on a page, and with that you can also drag and drop into the Header area. (See Screenshot)
*BUT, before you go ahead and do this, I should note that Weebly plans on making these changes to the newer themes, in the near future. When Paris would be done, or if it will be done, is anybody's guess.
Depending on the design of your Theme, this might be slightly different, so please keep that in mind.
Basically, for the Paris Theme, what was:
<div class="banner-wrap wsite-background">
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{action:button global="false"}</div>
<span id="contentArrow"><span></span></span>
</div>
</div>
</div>
Would become:
<div class="banner-wrap wsite-background">
<div class="container">
{{#header}}
<div class="banner">
{content}
<span id="contentArrow"><span></span></span>
</div>
{{/header}}
</div>
</div>
*If you are customizing a Theme, I might also recommend making a custom page type, specifically with these changes.
If you want to use Sections, for the content area of the page it would look something like:
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
**Note: There isn't any documentation yet, and I have not tested this, so wsite-background may not be needed... but don't take my word for it.
I have created a libary with about 80 sublime-snippet's.
They work great on my machine which is the machine I created them on. I then passed my folder out to two of my fellow employees so that they could use the new library of snippets I created. The only issue is the snippets won't work on their machines. They are installing it in /Sublime Text 3/Packages/MySnippetFolder. These snippets are meant to be used in .html files. However they are only showing up in .py files for my coworkers. Scope is commented out in the sublime-snippet files so shouldn't they appear in .html files as well? Any advice is appreciated thank you very much for your time in advance.
Edit: Ok So the snippets are working as intended I believe. The thing I am confused about now is when I use it in a python file a dropdown list appears that contains my snippets. When I try this in my html files there is no drop list containing my snippets. Is there a way to have to drop down list appear in my html files as well like it does for the bootstrap 3/4 snippets package?
Here is an example of the code for one of my snippets.
<snippet>
<content><![CDATA[
<div class="form-group v-spacing-extra-large">
<p>Minimum: <strong>1</strong> | Maximum: <strong>10</strong> | Multiple <small>(Step)</small>: <strong>1</strong>
</p>
<div class="input-stepper-group">
<a aria-label="Decrease Quantity by 1" tabindex="0" data-stepper-role="decrease" data-stepper-target="#demo-stepper-three" href="#" class="btn btn-secondary js-stepper-control disabled"><i aria-hidden="true" class="icon-minus"></i></a>
<input aria-describedby="product-qty-three-stepper-aria-describedby" aria-label="quantity" data-toggle="stepper" data-round="up" id="demo-stepper-three" class="form-control stepper" pattern="[0-9.]+" type="text" data-min="1" data-max="10" data-step="1" value="1">
<a aria-label="Increase Quantity by 1" tabindex="0" data-stepper-role="increase" data-stepper-target="#demo-stepper-three" href="#" class="btn btn-secondary js-stepper-control"><i aria-hidden="true" class="icon-plus"></i></a>
</div>
<span id="product-qty-three-stepper-aria-describedby" class="ada screen-reader-only">Initial Quantity is set to 1. Max Quantity is set to 10 and the step multiple is set to 1.</span>
</div>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>ff-stepper-min1-max10-stepby1</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
To have the dropdown list appear in your html files unless you have another package installed to enable this just type < before your snippet code. So if you have a my-snippet.sublime-snippet , then to use that you would type "<"my-snippet wihtout the "'s and you would see the drop down once you began typing.
Just press CTRL + Space anywhere in the code to get the snippets dropdown.
Trying to get started with a simple app using WinJS 4.3 and SplitView. I am following the sample in the winjs playground which is fine but it's lacking the information required to change the content area. I don't see any documentation for SplitViewCommand although I've seen various failed attempts at using it (via searching). So I'd like to have a multi page app (or a single page app that loads in the requested page). What power does SplitViewCommand have? Can I just point it at something like pages/page2/page2.html or do I have to use WinJS.Navigation.navigate(). I'm missing the glue between the command and the content area. Thanks.
Take a look at the WinJS Playground. You basically need to have your contentHost in the content area of the SplitViewPanel. The, when you "navigate" to a new page, you just render that page on you contentHost div.
<div class="splitView" data-win-control="WinJS.UI.SplitView">
<!-- Pane area -->
<div>
<div class="header">
<button
class="win-splitviewpanetoggle"
data-win-control="WinJS.UI.SplitViewPaneToggle"
data-win-options="{ splitView: select('.splitView') }"
></button>
<div class="title">SplitView Pane area</div>
</div>
<div class="nav-commands">
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
</div>
</div>
<!-- Content area -->
<div id="contentHost" class="contenttext"><h2 class="win-h2">SplitView Content area</h2>
<!-- this is where pages are rendered -->
</div>
</div>
Edit: Take a look at this article on how to navigate. SplitView is no difference than with no control at all. You just need to handle the WinJS.Navigation events
After a lot of digging (I guess winjs is still quite new) I found the answer on the codefoster website. In a nutshell, you can use the PageControlNavigator as your contenthost and use WinJS.Navigation.navigate("/pages/page2/page2.html") as the trigger to change the page.