CODEWITHSUNDEEP
stylestypo3backend
Aristeidis Karavas
Aristeidis Karavas

Reputation: 1956

TYPO3: How to create a css and a template file for an own backend content element (ContentPreviewRenderer)

So i 've created an own content element (Foundation Button) and i have registered it's own icon and what should be shown on the backend. Now what i still missing, is the style and the template for each content. I found an example online and i would like to know how it is done. I can not find any guide online on how i can make it happen.

This is my content element

Own Content Element

And this is how i would like it to be shown on the backend

My goal

Since i have no idea how to achieve that, i am not sure what code should i post here, but i can post my ButtonPreviewRendereder.php

<?php
namespace Vendor\BwSeitenameBase\Hooks\PageLayoutView;

/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */

use \TYPO3\CMS\Backend\View\PageLayoutViewDrawItemHookInterface;
use \TYPO3\CMS\Backend\View\PageLayoutView;

/**
 * Contains a preview rendering for the page module of CType="yourextensionkey_newcontentelement"
 */
class ButtonPreviewRenderer implements PageLayoutViewDrawItemHookInterface
{

   /**
    * Preprocesses the preview rendering of a content element of type "My new content element"
    *
    * @param \TYPO3\CMS\Backend\View\PageLayoutView $parentObject Calling parent object
    * @param bool $drawItem Whether to draw the item using the default functionality
    * @param string $headerContent Header content
    * @param string $itemContent Item content
    * @param array $row Record row of tt_content
    *
    * @return void
    */
   public function preProcess(
      PageLayoutView &$parentObject,
      &$drawItem,
      &$headerContent,
      &$itemContent,
      array &$row
   )
   {
      if ($row['CType'] === 'foundation_button') {
        $headerContent = '<strong>' . $parentObject->CType_labels[$row['CType']] . '</strong><br/>';
        $itemContent .= '<strong>Text:</strong> ' . $parentObject->linkEditContent($parentObject->renderText($row['texting']), $row) . '<br />';
        $itemContent .= '<strong>Link:</strong> ' .$parentObject->linkEditContent($parentObject->renderText($row['linking']), $row) . '<br />';

         $drawItem = false;
      }
   }
}

Best regards,

Aristeidis Karavas

Upvotes: 0

Views: 326

Answers (1)

Tanel P&#245;ld
Tanel P&#245;ld

Reputation: 11

There's back end CSS API: https://docs.typo3.org/typo3cms/SkinningReference/BackendCssApi/SkinningApi/Index.html

You should be able to inject CSS to the back end via:

$GLOBALS['TBE_STYLES']['stylesheet'] = 'EXT:your/file/location.css';

Upvotes: 1

Related Questions