Expand the range of preset background colors available for content elements in Typo3 using the Bootstrap_package extension

I attempted to incorporate new predefined background colors as per the guidelines provided for the bootstrap_package

https://github.com/benjaminkott/bootstrap_package/wiki/Add-additional-Background-Colors-to-Content-Elements

Everything was successful when adding just one extra color by following the instructions for PageTsConfig and TypoScript constants (the SCSS snippet didn't seem necessary). However, I'm encountering difficulty in making it work with multiple colors. The pageTsConfig section seems to be functioning well (I can see all the new colors as options in the backend editor).

TCEFORM {
    tt_content {
        background_color_class {
            addItems {
                red = Red
                white = White
                hblau = Herth-Blau
            }
        }
    }
}

Unfortunately, implementing changes in the CSS (via the extension's constants) is not yielding results. I tried using this code:

plugin.bootstrap_package.settings.scss {
    frame-backgrounds = ( hblau:(background: #0092d0, link-color: #e0efff, link-hover-color: #ffffff),
                          white:(background: #ffffff, link-color: #e0efff, link-hover-color: #ffffff),
                          red:(background: #ff0000, link-color: #ffeeee, link-hover-color: #ffffff)
     )
}

Does anyone have any suggestions on what might be going wrong here?

Your help would be greatly appreciated.

Warm regards, Chris

cssbootstrap-4typo3

Answer №1

When working with TypoScript code, it's important to remember to use the assignment operator "=" and ensure that all values are written on the same line. Here are some guidelines taken from the official documentation:

Value assignment: The “=” operator

Simply assigns a value to an object path.

Rules:

Anything after the = sign until the end of the line is considered the value. In other words, no need for quotes!

Keep in mind that the value will be trimmed, removing whitespace at both ends.

For example:

myObject.myProperty = value 2

If you need to assign multiline values, utilize the "()" operator as follows:

  • The opening parenthesis should be on the same line as the object
  • The assigned value(s) should be on new line(s)
  • The closing parenthesis should be on a new line

Multi-line values: The ( ) signs Opening and closing parenthesis allow for multi-line values, enabling values that span across multiple lines with line breaks included.

Important Note:

Remember, multi-line values can only be used in the setup section of TypoScript, not in constants.

For instance:

myObject = TEXT
myObject.value (
   <p class="warning">
     This is HTML code.
   </p>
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminating the standard borders on a pop-up window

When I utilize window.open to open a POPUP Window, the default title blue color borders appear rounded around the window as shown in the image here. Is there a way to remove these borders using CSS or any other option without having to use Light box? ...

javascriptcss

What is the best way to remove style css from nod_module in Angular?

Is there a way to exclude the Bootstrap style file located in node_modules? node_modules\bootstrap\scss\_reboot.scss I am facing an issue where my custom styles are being overridden by this file. Even after trying to remove certain proper ...

htmlcssangularbootstrap-4

What is the best way to vertically center my footer text?

footer { text-align: center; color: #FFF; position: fixed; bottom: 0px; width: 100%; height: 90px; background-color: #464646; } <footer> &copy; Name </footer> I am looking to center my name within the footer, however, it cu ...

htmlcssfooter

The Tailwind CSS class "ring-inset" does not appear to be appearing on iPhone devices when applied to form inputs

I have implemented custom styling for form inputs in my Next.js project using Tailwind CSS classes. Below is the code snippet that showcases how I have styled the form inputs: import * as React from "react"; import { cn } from "@/lib/util&q ...

cssformsnext.jstailwind-css

Creating CSS animation for the most recent element that has been dynamically inserted using JavaScript and Vue.js

After adding a new div with Vue, I noticed that the opacity effect is being applied to the previous element instead of the newly added one. I want the effect to always appear on the latest element added at index 0. What could be causing this issue? Here i ...

javascriptcssvue.js

What are some ways to eliminate the excess white space beneath the footer in HTML?

After creating a responsive webpage that works flawlessly on mobile devices and tablets, I noticed a problem with the footer when viewed on desktop. There is an empty white space at the end of the webpage, and upon inspecting the browser, it focuses on the ...

htmlcsssass

Bootstrap dropdown malfunction

I am having trouble with my dropdown menu. The browser is cutting off the blue box in the dropdown area. I'm not sure if I need to add some CSS or make changes to the Bootstrap code to fix this issue. I haven't made any unusual modifications, jus ...

htmlcssbootstrap-4navbar

Navigate to the end of the chat window using AngularJS

Is there a way to automatically scroll to the bottom whenever a new message is received? I have code that moves the scrollbar, but it doesn't go all the way to the bottom. Can someone please help me with this? Here is my code on Plunker: http://plnk ...

javascriptcssangularjs

Toggle the visibility of an element by clicking a button

I have a table structured as follows: <tr> <td class="title">Title</td> <td class="body">Body</td> <td class="any">Any text</td> </tr> <tr> <td class="title">Title</td> ...

javascriptjquerycsshtml-table

Why does my div block move around when it has content in it?

.role_wrapper1,.role_wrapper2 { display:inline-block; } .role_wrapper1 { width:200px; height:230px; border: 2px solid rgba(204, 204, 204, 0.2); border-radius: 10px; margin-right:6px; } .role_wrapper2 { width:200px; height:230px; margin ...

htmlcss

Create a responsive Bootstrap menu or navbar that expands by a specific percentage and can be scrolled through if necessary

I have previously asked a similar question, but I am trying to clarify it further as I did not receive any responses on my last post. Thank you! In Bootstrap, I have a navbar/menu that expands in the 'xs' view (hamburger button). How can I mak ...

htmlcsstwitter-bootstrapdrop-down-menunavbar

Guide to customizing the appearance of a Bootstrap Component within an Angular project

Is it possible to completely customize the style/CSS of a component from ng-bootstrap? Here's the issue I'm facing: I have this code... <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next" style ...

cssangularangular-ui-bootstrapweb-component

Infinite scrolling in AngularJS doesn't seem to be functioning properly when using Chrome in full

Currently, I am implementing an infinite scroll feature using ng-repeat and adjusting the limitTo value through a loadMore() function. Below is the code snippet for the directive (discovered on a jsfiddle): angular.module('scroll', []).directiv ...

javascriptcssangularjsscroll

The alignment of grid items is slightly askew

I've been having an issue where when I maximize the browser window, everything on my website looks fine except for the cards in the packages section. They aren't centering properly. Any ideas on what might be causing this? Check out the website ...

htmlcssgridcss-grid

The Bootstrap Mobile Navigation transition is not displaying as intended in my CSS coding

On both desktop and mobile screen sizes, I have a white navigation bar. However, for the mobile dropdown menu, I want the background to be grey. I managed to achieve this by targeting .show on smaller screens in the CSS and specifying the grey background ...

javascriptcssbootstrap-4nav

Adjusting the CSS styling of my iframe element

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> $(document).ready( function () { $('#iView').load( function () { $('this').contents().find("html").css("background-image","none"); }); }); ...

javascripthtmlcssiframe

activating a button following the selection of a checkbox

My code includes a submit button that is currently disabled. I am looking to enable it when the user clicks on the "I agree" checkbox using jQuery. Can someone assist me with this? My code is written in HTML, JavaScript, and jQuery. <input id="agree" ...

javascriptjqueryhtmlcss

Developing alternatives for CSS Grid

Currently, I am faced with an intriguing challenge involving a layout that includes a container containing 9 div elements. Each of these divs is assigned one of three classes: column-1, column-2, or column-3. <div class="grid cols-3"> <div cl ...

htmlcssflexboxcss-grid

Ways to center h2 in a nested div

Having trouble aligning the text within my h2 element vertically in a div. Using .NET MVC. Here is the HTML that's causing issues: .banner-side-container { height: 240px; width: 180px; vertical-align: middle; } .banner-side-container h2 { ...

htmlcssvertical-alignment

What is the best way to define the width of a value in percentage using JavaScript's

Here's a snippet of code that I'm working with: <div id="test-content"></div> <script> var width = 100; document.getElementById('test-content').style.width = width+ '%'; </script> I encountered an iss ...

javascriptcss