How to create some custom box into a Typo3 web page? - content-management-system

I am very new in Typo3 world (I came from Joomla and WordPress) and I have some doubts related a thing that has been requested by a customer that use Typo3 for its site
He ask me to create some colored boxes into a specific page. Each of these boxes simply must contain text or links.
How can I do this?
I am thinking that I can solve in the following way (but I have not idea if this is a GOOD solution):
In the backend I go in the Page section and I open the settings related to the page that I have to modify
Here I have 3 columns (Left, Normal, Right) and for example I add a NEW Regular Text Element into this central column
Now appear to me the wysiwyg editor, so I click on the Toggle text mode icon and I pass from the wysiwyg mode to the pure HTML editor's mode and now I will create some div tags (settings the CSS settings for the background color and the dimension) that rappresent my boxes (and into these div I put their textual contents).
Is it a possible solution or is it a bad solution?
Tnx
Andrea

You may either use the RTE typoscript config to add some new paragraph styles, which will make the boxes or use the section_frame field in tt_content, a field called "frame" in the backend when you edit a content record. Both solutions would just need some typoscript (which you will deal with very often in the TYPO3 world) and CSS code.
If you need some more structure in the backend, there is also an extension for that called multicolumn. If you just need "more" columns in the backend (in combination with backend layouts) to achieve different looks, this can also be done by adding some typoscript config. To give you a more precise recommendation, some sort of scribble or design screenshot of what you want would be nice.

Related

TYPO3 Add Copy and Paste icons to Content Elements

Is it possible to add icons to the left or right side for Content Elements? I would like to move some of the functionality from the contextMenu to the icon bar, is that possible? Perhaps by TSConfig ? See attachment.
Several options exist for multiple TYPO3 versions and depending on where you would prefer to add the copy/cut icon, or indeed, any other icon you might wish:
Before 10.3 and without fluid-based page layout module:
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['GLOBAL']['recStatInfoHooks']
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawFooter']
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem'] through $outHeader variable.
After 10.3 with fluid-based page layout module:
All of the above, plus
Overlay of template EXT:backend/Resources/Private/Partials/PageLayout/Record/Header.html, or
Overlay of template EXT:backend/Resources/Private/Partials/PageLayout/Record/Footer.html, or
Overlay of template EXT:backend/Resources/Private/Partials/PageLayout/Record.html depending on where you want the icon to be placed
These should provide you with every conceivable option for adding the icon precisely where you wish it to be added. TYPO3 10.3 with fluid based page module enabled provides you with the createst flexibility. Earlier versions or with fluid based page module disabled should probably use $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['GLOBAL']['recStatInfoHooks'].
I personaly wouldn't add too many button visible by default on the top right of each content, because it will unnecessarily overloads the amount of information on the page module with action buttons that are not the most often used.
In particular, the "paste" button should only appears when there is something in the clipboard, and it now appears everywhere you can paste (you can see one above the content in your screenshot).
Cheers,
Rachel

Typo3, set title for Mask Elements

I have a typo3 server and using the mask extension. When an editor creates a new mask element, there isnt a title in the list view. Its always "no title":
I checked the database and found the titles in the db in the field: tt_content.header but no way to set them automatically oder manually by an editor. Anyone have an idea how the title can be set automatically? Oder manually by an editor?
ext:mask has the option to reuse existing fields of tt_content for new kinds of content elements (CEs). use it to get the bonus of better interoperability with TYPO3.
TYPO3 has a logic how to show records (content elements) in the backend. one of it is the usage of the fields header and description. if you reuse these fields your CEs will look like others automatically.
If you use other fields you need to declare your fields for usage AND in case you change the kind of a CE from your kind to e.g. TEXT with Media the header stays.
Especially header is handled in the layout/partial of FSC or CSC global for any kind of CE. if the handling/rendering is changed (e.g. special layout) in an installation your CEs need special effort if they have their own building of the header.
Try to use the same fields as existing CEs and your life can be easier.
I'm having the same issue, but I found a way around it for the meantime. I edit the mask element and chenge its type to something elseโ€”like Textโ€”where I can set the title. After typing the title I save it, then change back to mask element and save again. This works by me without losing the content of the mask element. This way I can see the title in typo3 backend when I view as list or page or add content from another page. As I said, it doesn't solve the problem, but can help until there is a proper solution.
EDIT
I've just found another solution. You can add the title field to en existing mask element. To do it, go to ADMIN TOOLS > Mask, click your mask element to edit it. Add a new item by dragging the ๐—ฆ๐˜๐—ฟ๐—ถ๐—ป๐—ด item (the one on top of the list of available items) to the right where your items are. Then in General under ๐—–๐—ต๐—ผ๐—ผ๐˜€๐—ฒ ๐—ณ๐—ถ๐—ฒ๐—น๐—ฑ dropdown choose an ๐—˜๐˜…๐—ถ๐˜€๐˜๐—ถ๐—ป๐—ด named:
๐—›๐—ฒ๐—ฎ๐—ฑ๐—ฒ๐—ฟ: (๐—ต๐—ฒ๐—ฎ๐—ฑ๐—ฒ๐—ฟ)
Save, close, go to your page to add your title. This still doesn't add the title field automatically to all mask elements, but it is a step forward.
If anywhere, you should be able to set a static title automatically in your page tsconfig. You could to something like
mod.wizards.newContentElement.wizardItems.mask.elements.[title of your mask element].tt_content_defValues {
header = My Awesome title
}
Personally, I usually give every mask element a header field and ask content editors to fill it in.
See also this discussion on Mask elements and backend titles.
Hope, this helps.

Copy presentation details and data from a page to a placeholder of another page on the fly in sitecore 8.1

I have a requirement from my customer where I need to make the footer of the website dynamic in terms of adding sublayouts in footer placeholders via page editor by the Content Author.
The footer shall consist of:
One content slot - to which any sublayout/sublayouts like grid component or rich text can be added.
I want to add a new placeholder 'ContentSlotPH' to my footer which picks up its presentation details and data from a common page at "/sitecore/Content/Common/Footers/FooterContent/" ( where I have added my sublayouts like grid/richtext for the footer); and shall apply to all the pages of the website where the footer is present.
I want this change to be visible on the fly so that in future if the presentation details on FooterContent page change, new presentation and data gets applied to the ContentSlotPH of the footer.
Can someone help me in implementing this?
This functionality is not available out of the box unfortunately, the only way to achieve it with standard features (as Anton mentions in the comments) is to set them as presentation details on the standard values of a base template.
Unfortunately, this is not user friendly or editable through the Experience Editor (out of the box). It would also mean giving Content Editors write access to the templates and standard values, something that is normally locked down since making a mistake could cause exceptions especially on a production system.
Instead you could look to utilise Sitecore Placeholder Fallback. This will allow you to set up the headers/footers on a top level page and then any children will fallback to use the renderings in the placeholder from a parent item if they have not been set.
We have tried to approach this problem by using components that have presentation details on them. We call these Content Blocks, but other accelerators have different names for them with similar functionality. Essentially, this becomes a 'page inside a page'. You add your component to the template and reference a central datasource which has your footer datasource (including presentation details).
This allows for authors to have access to edit the footer by editing the footer component datasource without accessing template details.
Check out my Sitecore Base Layouts project:
http://www.awareweb.com/resources/video?vid=7d52fef2a67c453fa38dd092bd9ae7e2&
https://github.com/BenGGolden/Sitecore.BaseLayouts

Plugin Typo 3 Text box slide open

Are there plugins that achieve the following:
You can add text blocks into a section of a page (left, right, normal,bottom). the text isnt shown ommediately but after clicking the title/header of the text block which slides open the text. I'm in need of such an extension as I want to place much content on a site without throwing the whole text on a viewer. There seem not to ve any available.
By default TYPO3 doesn't force any particular frontend library so probably you won't find such ext (maybe somebody created extension like this but for 99% it will be required to fit it tou your needs)
Instead there are generic extensions like Grid Elements or Dynamic Content Elements (DCE) - you can use it to predefine your custom HTML structures and then reuse them easily (no need for advanced PHP programming of your own plugins).
So finally you can combine them with dedicated JS libs for frontend i.e. Bootstrap and its Accordion Collapse
If you use TYPO3 6.2 or higher have a look at df_contentslide. After install you'll find another section under appearance in CEs. Now you can slide every content element. It is easy to use and with little knowledge also easy to style.

Non Editable element in TinyMCE (related to Mathjax)

I'm building an extended editor around TinyMCE and I have to implement a Math formula module. I've choosen Mathjax for formula rendering, using plain html/css. So far, I've managed to create a plugin that popup a panel with a textarea, you can enter your latex in, there's a preview in the panel.
Once you validate the formula, it's injected into tinymce content. This new content is A LOT of spans with inlined styles, and OF COURSE, I don't want tinymce to be able to edit that directly. (sidenote: we only store latex, not the rendered html output from mathjax)
Basically, I want that a piece of html inside Tinymce to be ignored totally, but displayed in place. I want my carret to be able to move before that piece of html, and after, but not inside.
The "non editable content" plugin seems to be close of what I'm looking for, but it has some limitation (you can't ADD no editable content on the fly, having nested html content inside an element flagged as "non editable" broke some things, etc.)
Is someone could help with that ? I started to tweak the non editable plugin, but it's really really hard to understand existing code. Has someone already did something like that, or is there another third party plugin ?
thanks