In CKEditor, I'm writing custom CSS like:
a {
color: #ff0000;
}
but I don't want it to overwrite my css written for other global components of my project. Is there a way to use HTMLPurifier to add a class to all my css written in CKEditor. Something like:
.my-ckeditor-class a {
color: #ff0000;
}
In my purifier.php file I have this rule set up but I'm not sure how to go about prefixing a class to all CSS written in my CKEditor
'ckeditor' => [
'HTML.Allowed' => 'b,i,u,a[href|title|target|style],ul,li,br,ol,p,em,strong,img[alt|src|style|width|height],table,td,th,tr,iframe[src|width|height|frameborder]',
'Attr.AllowedFrameTargets' => [ '_blank', '_top', '_self', '_parent' ],
'CSS.Trusted' => true,
'CSS.AllowedProperties' => 'display,font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,padding-right,padding-top,padding-bottom,padding,margin,margin-left,margin-right,margin-top,margin-bottom,color,background-color,text-align,vertical-align,background-image,background-position,max-width,width,height,max-height',
'HTML.MaxImgLength' => NULL,
'CSS.MaxImgLength' => NULL,
'CSS.AllowTricky' => true,
'CSS.AllowImportant' => true,
"HTML.SafeIframe" => 'true',
"URI.SafeIframeRegexp" => "%^(.*)%",
'CSS.[something-to-prefix-class]' => [
'class' => '.my-ckeditor-class',
]
],
```
I believe you're looking for Filter.ExtractStyleBlocks.Scope:
If you would like users to be able to define external stylesheets, but
only allow them to specify CSS declarations for a specific node and
prevent them from fiddling with other elements, use this directive. It
accepts any valid CSS selector, and will prepend this to any CSS
declaration extracted from the document. For example, if this
directive is set to #user-content and a user uses the selector
a:hover, the final selector will be #user-content a:hover.
The comma shorthand may be used; consider the above example, with
#user-content, #user-content2, the final selector will be #user-content a:hover, #user-content2 a:hover.
But keep this warning in mind (although I don't know if this is still relevant, this is a pretty old warning at this point):
Warning: It is possible for users to bypass this measure using a
naughty + selector. This is a bug in CSS Tidy 1.3, not HTML Purifier,
and I am working to get it fixed. Until then, HTML Purifier performs a
basic check to prevent this.
If you want to use this directive, check out the other Filter.ExtractStyleBlocks directives in the configuration documentation, they're meant to be used together (or at least assessed together).
relevant HTML looks like:
<li class="lineEntry t1" title="Right-Click for Options" style="">
<span id="job_111095">
<i class="ic-p-appr"></i> 111095
</span> Foo/Bar, Some Text </span>
</li>
... and the relevant CSS looks like ( file = icomoon's foo.css ) ...
/* this is an icomoon icon, that should be green */
.ic-p-appr:before {
content: "\e905";
color: #0f8040 !important;
}
... and ( file = bar.css ) ...
.t1{color:#B92426;}
/* .line-entry never defines a color */
I have added !important AND loaded the foo.css After the bar.css in an effort to make the icon green (#0f8040), but the icon nested within the .t1 class always inherits that parent's font color ONLY when mpfd converts the HTML to a pdf doc. (the nested icon in HTML works as expect)
When I look at the mPDF documentation for supported CSS, I see nothing there or in SO that suggests why this occurs. My mPDF is 7, and here is the configuration:
$mpdf = new \Mpdf\Mpdf([
'fontDir' => array_merge($fontDirs, [
'../vendor/resources/fonts',
]),
'fontdata' => $fontData + [
'icomoon' => [
'R' => 'icomoon.ttf',
],
],
'format' => 'A4-L',
'orientation' => 'L',
'debug' => true,
]);
see:
enter image description here
Help with this issue is appreciated.
Fixed: I discovered that because mPDF ver7 does not support CSS pseudo class :before, it was necessary to declare the font-color independently with the class name. So for my HTML output, this worked, .ic-p-appr:before { color: #0f8040 !important; } but I had to declare it again, minus the ':before' to register that style in the PDF document.
Summary: mPDF7 ignores CSS style attributes declared under a pseudo-class.
I want to add the option to create a 'div' in the html editor field.
How do I add an option to the format dropdown list that will create a div with a specific class?
I have added a style successfully to the styles dropdown with this code in editor.css
.responsive-table {
overflow-x: scroll;
}
I am using silverstripe 3 and want to be able to add my own options to the format dropdown to create various elements.
In SilverStripe 3 we can edit style dropdown items in our HTMLEditorField by adding the following to our mysite/_config.php:
HtmlEditorConfig::get('cms')->setOption('style_formats', [
[
'title' => 'Responsive table',
'attributes' => ['class' => 'responsive-table'],
'selector' => 'div',
],
]);
The above code will make the HTMLEditorField style dropdown have one item in it, a Responsive table option that can be applied to div elements. If we prefer this to be applied to table elements we can change this in the selector option.
Here is a handy module that shows examples of how we can make changes to the HTMLEditorField in SilverStripe 3:
https://github.com/jonom/silverstripe-tinytidy/blob/master/_config.php
It is related to the style. When there are more columns in the gridview, the layout of the actioncolumn will become vertical (see attached pic). How can I change it to be horizontal? I cannot find out why it became vertical in the Bootstrap css.
Thanks!
vertical layout of actioncolumn
Try to force style width:
[
'class' => ActionColumn::className(),
'contentOptions' => function ($model, $key, $index, $column) {
return ['style' => 'min-width:150px'];
}
]
Change the width as you need.
How can I add css class to label in Zend_Form?
This is html way:
<dt><label for="foo" class="label-design">Foo</label></dt>
How can I write above row with Zend_Form?
(I know how to write label but i dont know how can i add ccss class.
$model = new Zend_Form_Element_Text('model');
$model->setLabel('Model');
)
Thanks,
The easiest way is to add class to dt element, not to label:
$model->addDecorator(
new Zend_Form_Decorator_Label(array('tag' => 'dt', 'class' => 'label-design'))
);
And then just modify your CSS selector from label.label-design to dt.label-design label
It is possible to add a class directly to the label. Here is an awesome article from Matthew Weier O'Phinney describing all about decorators: http://devzone.zend.com/1240/decorators-with-zend_form/.
To answer your question, I would do it like this:
$model->setLabel("Model")
->setDecorators(array(array("Label",array("class"=>"full")),"ViewHelper"));
Directly add the class 'label-design' to the label of your element $model:
$model->addDecorator('Label', ['class' => 'label-design']);