I love the new CKEditor in Typo3, much better than the old RTE.
But I have an question about its configuration:
Is it possible to increase the width of the dropdowns?
I've tried the tips:
.cke_combo_text { width:auto !important; }
.cke_combopanel { height:600px !important; }
But it doesn't work. Any tips?
Found it!
We are using our own template-distribution.
You have to add in the ext_tables.php
//Overwrite BE-Stylings if needed. e.g. increase the select-width of ckeditor for Inline- / Block-Styles
if( TYPO3_MODE == "BE"){
$GLOBALS['TBE_STYLES']['skins']['backend']['stylesheetDirectories']['[your_ext_key]'] = 'EXT:[your_ext_key]/Resources/Private/Backend/';
}
Then you can add a stylesheet:
eg. typo3conf/ext/[your_ext_key]/Resources/Private/Backend/rte_ckeditor.scss
.cke_combopanel {
min-width: 35rem !important;
.cke_panel_frame {
min-width: 35rem !important;
}
}
Related
I am trying to work out how to use NativeScript theme v3 and am stuck on something so simple as setting the background colour according to theme:
Here's what I'm trying (using the recommended colorize mixin):
#import "~#nativescript/theme/scss/variables";
.mything {
#include colorize($background-color: primary);
}
But this always just sets the background dark and has no effect when I switch theme.
If I try the following code it is always red, also following the recommended approach:
.mything {
background-color: red;
.ns-dark & {
background-color: green;
}
}
Am I doing something wrong?
I have just found a solution of sorts that solves the issue, in that I am able to make it work when I switch themes - however this seems to defeat the point of having the colorize mixins etc.
.mything {
background-color: red;
}
:host-context(.ns-dark) .mything {
background-color: green;
}
Or:
.mything {
background-color: red;
:host-context(.ns-dark) & {
background-color: green;
}
}
I am posting this here in case anybody else struggles with this and nobody else answers.
Is it possible to manipulate with #content magic variable in SASS?
I would like to replace some stuff in here before output.
Or maybe can I fill some variable with it?
The conclusion is that, I want to make an mixin #important that create both versions. Important, and no-important.
Input
.test {
#include important {
color: red;
text-align: left;
}
}
Expected output
.test {
color: red;
text-align: left;
}
.test-i {
color: red !important;
text-align: left !important;
}
No, you can't. But I quickly wrote you a mixin to make it work. It doesn't accepts multiple properties (yet).
First Note: I changed the mixin it now does accept multiple properties. Here is the Codepen.
Second Note: I updated the mixin adding multiple properties does no longer compile to different classes for each property, instead you get two versions, one without the !important suffix and one with.
This is the mixin:
#function return($state) {
#return if($state == '', '', '-i');
}
#mixin loop($name, $items...) {
#each $item in $items / 2 {
#each $state in ('', '!important') {
$suffix: return($state);
.#{$name}#{$suffix} {
#for $i from 1 through (length($items) / 2) {
#{nth($items, ($i * 2) - 1)}: #{nth($items, ($i * 2))} #{$state};
}
}
}
}
}
This is how you include it:
// #include loop([classname], [property], [value]);
#include loop(whateverClassname, color, red);
This is what it compiles to:
.whateverClassname {
color: red ;
}
.whateverClassname-i {
color: red !important;
}
This is what it now compiles to, when you use multiple properties at once:
#include loop(whateverClassname, color, red, background-color, green, display, flex);
.whateverClassname {
color: red ;
background-color: green ;
display: flex ;
}
.whateverClassname-i {
color: red !important;
background-color: green !important;
display: flex !important;
}
Conclusion: it works as expected and does no longer bloat your CSS.
Hope I could help you at least a little ;-)
I have to position the image container at the top of the page, but there is no parameter.
I have found a small snippet in the docs of fancybox3, That works for me, but not for the navigation buttons. They are still in the middle of the page:
afterShow : function( instance, current, e ) {
$('.fancybox-content').css('transform','translate3d(0px, 30px, 0px)');
}
Spacing around content is controlled by CSS padding property of wrapping element. This is the default value for element containing an image:
.fancybox-slide--image {
padding: 44px 0;
}
#media all and (max-height: 576px) {
.fancybox-slide--image {
padding: 6px 0;
}
}
You can adjust that for your likening. As you can see, this gives greater flexibility that just some js option.
I'm trying to remove some duplication in my scss selector.
.container {
.operation {
color: green;
}
.row.is-active &,
.row:hover & {
.operation {
color: inherit;
}
}
}
I tried rewriting it like this:
.container {
.operation {
color: green;
}
.row & {
&.is-active, &:hover {
.operation {
color: inherit;
}
}
}
}
However, this causes .is-active to be applied to .container instead of .row
How can I target the syntactical parent when using the ampersand ?
I took some time to answer the question again, as I mis-understood it initially. Unfortunately there is absolutely no way possible to do this in SASS at the moment. Even when trying to make use of the more advanced SASS functions to manipulate selectors and strings it is not possible.
There is some Good News
It is possible to do using Stylus.
I have created a live Example on codepen.
// Stylus - not SASS
.container {
.operation {
color: green;
}
.row {
^[-1..-1]:is-active ^[0], ^[-1..-1]:hover ^[0] {
.operation {
color: inherit;
}
}
}
}
I hope this helps you in some way, at the very least it might provide you with an option, but unfortunately SASS cannot achieve what you are attempting.
Looking at the susy site, how does it hide .secondary when getting at a breakpoint?
Taken from the GutHub source for the site (with other styles removed):
.guides, .tutorial {
.secondary { display: none; } // secondary starts hidden
#include at-breakpoint($break) {
.secondary { display: block; } // secondary becomes visible at breakpoint
}
}
try this:
#include at-breakpoint($break) {
.secondary { display: none; }
}