Is it possible to add custom css classes to this widget:
<f:widget.paginate objects="{products}" as="paginatedProducts"
configuration="{itemsPerPage: 1, insertAbove: 1, insertBelow: 0,
maximumNumberOfLinks: 10}">
Currently the "next" button has a li and link inside of it. I would like the link to become a button. So I want to add a class to the a (inside the li) called 'btn btn-primary'
You can override the template for widgets used in your extension with TypoScript:
plugin.tx_yourextension.view.widget.TYPO3\CMS\Fluid\ViewHelpers\Widget\PaginateViewHelper.templateRootPaths.10 = EXT:yourextension/Resources/Private/Templates/
You can then add the classes in your custom template. The path of the custom template should be Resources/Private/Templates/ViewHelpers/Widget/Paginate/Index.html in your extension.
You can find the default template for the paginate widget here: typo3/sysext/fluid/Resources/Private/Templates/ViewHelpers/Widget/Paginate/Index.html
Related
TYPO3 8.7.4
news 6.0.0
Is it possible to extend news in a news_extend extension with a second container? (like contentElements)
The goal is to place this second container in the related content of the detail page.
Is there an example?
Yes, it's easy. You need to add field to database, configure it in TCA, extend the news model and adjust the detail template.
in news_extend/ext_tables.sql add:
CREATE TABLE tx_news_domain_model_news (
tx_newsextend_content_elements_second text
);
in news_extend/Configuration/TCA/Overrides/tx_news_domain_model_news.php:
$newNewsColumns = [
'tx_newsextend_content_elements_second' => [
// .... here copy the original 'content_elements' field's config from ext news' TCA. update the label to yours.
];
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns('tx_news_domain_model_news', $newNewsColumns);
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes('tx_news_domain_model_news', 'tx_newsextend_content_elements_second', '', 'after:content_elements');
in news_extend/Resources/Private/Language/locallang_db.xlf add:
...
<trans-unit id="tx_news_domain_model_news.tx_newsextend_content_elements_second">
<source>Additional content elements</source>
</trans-unit>
news_extend/Classes/Domain/Model/News.php:
namespace [my vendor]\NewsExtend\Domain\Model;
class News extends \GeorgRinger\News\Domain\Model\News {
// here copy all uses of contentElement field from original model, only name it txNewsextendContentElementsSecond.
// watch whether it's only declared property and getter/setter (simple fields), or something more is done in the model and do it the same way as there.
// tip: see getContentElementIdList() method
}
register your extension as provider of news' model extending class:
in news_extend/ext_localconf.php add:
$GLOBALS['TYPO3_CONF_VARS']['EXT']['news']['classes']['Domain/Model/News'][] = 'news_extend';
now you can use this in your template:
<f:if condition="{newsItem.txNewsExtendContentElementsSecond}">
<!-- content elements second -->
<f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.txNewsExtendContentElementsSecondIdList}</f:cObject>
</f:if>
Above may not just work if you copy-paste it, I'm writing it from my notes. But it will help you to get the idea. Good luck
This should work. Just extend the news tca and model as described in the documentation
Is there a built in TinyMCE command to change the class name of its outer-most div? I have a div which is populated with either a PHP version of TinyMCE or the jQuery version, but the TinyMCE editor's outermost div classes are different.
I would preferably like to avoid having to use jQuery.
jQuery
class="mce-tinymce mce-container mce-panel"
PHP
class="wp-core-ui wp-editor-wrap tmce-active"
I don't mind if I can only change one, although it would be nice to know how to change both. I have tried
tinymce.inti({
body_class:"classname";
});
From docs
// Add a class to an element by id in the page
tinymce.DOM.addClass('someid', 'someclass');
// Add a class to an element by id inside the editor
tinyMCE.activeEditor.dom.addClass('someid', 'someclass');
From doc: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#body_class/
Here you can also add a body_class option like;
tinyMCE.init({
...
body_class : "some_class_name"
});
In Sightly/AEM6, when including a parsys component, how can I set the text that says 'Drag Components Here' (cq:emptyText) to use a localised string? I have several parsys components as children of a custom component and need different text for each (e.g. Drag image components here, drag link components here).
Unfortunately it seems to be hard coded to use a specific I18n string, in /libs/cq/gui/components/authoring/clientlibs/editor/js/model/Inspectable.js
However, I was able to override the parsys control and change the CSS classes of the newpar from new section to cq-placeholder section and then include data-emptytext="Custom text" on the same html element.
in CQ5.6 we can do the following, maybe it works with AEM 6:
inherit your component from /libs/foundation/components/parsys
add a node which name is 'new' under your component node, which sling:resourceType is foundation/components/parsys/new or just copy the /libs/foundation/components/parsys/new
add cq:emptyText property to this node, which is the text appear in the box.
See the following code:
<div id="myTabContent" class="tab-content" data-sly-list="${properties.titles}">
<div data-sly-test.resourcePath1="${'{0}{1}' # format=['tab',itemList.index]}" class="${itemList.index != 0 && wcmmode.isPreview ? 'tab-pane fade' : 'tab-pane fade in active'}" id="${item}">
<div data-sly-resource="${ resourcePath1 # resourceType='wcm/foundation/components/parsys/newpar'}" class="cq-placeholder section" data-emptytext="${item}'s content"></div>
</div>
Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.
I am implementing ForeColor in TinyMCE Rich Text Editor.
it uses style to apply forecolor to selected text as like this
<span style="color: rgb(255, 0, 0);" mce_style="color: #ff0000;">Hello</span>.
i want to apply css class instead of "style" here.. how to apply css class here? These Css Classes contain ColorCodes.
Example:
<span class="colorRed">Hello</span>
My CSS Class
.colorRed
{
color: #ff0000;
}
thank you
Because you want your css to be applied to tinymces editor content you will need to add your class to the class your editor content gets styled with.
If you are not using a user-defined content_css file when initializing tinymce (init-function) a content_css file will be used depending on the theme you have set in the init function (file used is to be found in a subfolder of folder themes).
I suggest you create an own content.css which you load using content_css setting in the init function. See this link for the tinymce documentation for this. For a first step you could copy one of the content.css from the themes directory and modify it.
Search on content_css attribute an add your CSS file relative path(i.e:myLibFolder/myCss.css) after adding ","
$('textarea.tinymce').tinymce({
//
//
//....
,
content_css: "css/content.css,myLibFolder/myCss.css"
,
//
});