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
Related
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).
I need double logo in site identity of WordPress customizer. One on mobile view and other on desktop view. Both are different images. Please provide code for adding two logos.
I have code for adding one custom logo. and I need it on site identity itself
function lotus_flies_custom_logo_setup()
{
$defaults = array(
'height' => 139,
'width' => 176,
// 'flex-height' => true,
// 'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
);
add_theme_support('custom-logo', $defaults);
}
add_action('after_setup_theme', 'lotus_flies_custom_logo_setup');
The best way to have different logo according to screen size is to use #media queries in CSS.
So you could just find out a css selector for your current icon, and add some css to resize it according to screen size, in your inherited custom template.
Instead of resizing, you could also just completely change the source of the image in CSS.
( As an inspiration: Swap out 3 differently-sized logos with media queries? . Documentation: Using_media_queries )
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.
I'm using Redactor v9.2.1. I'm trying to allow my customers to use style tags in their CMS, but redactor strips them from the content.
When I add the following:
<style type="text/css">
.red{color:red;}
</style>
redactor strips it to:
<p>
.red{color:red;}
</p>
I've made sure that deniedTags is not including 'style' in my settings object and I'm not using the allowedTags attribute since it conflicts with deniedTags.
Here is my settings object that I'm passing to the redactor init:
var settings = {
deniedTags:[
'html', 'head','link', 'body', 'meta', 'applet'
],
observeLinks: true,
iframe: true,
convertVideoLinks: true
};
Any help is appreciated.
http://imperavi.com/redactor/docs/settings/clean/#setting-deniedTags
Top-level HTML tags ('html', 'head', 'link', 'body', 'meta', 'style',
'script', 'applet') will always be removed regardless of this setting,
unless wrapped in 'pre' tag (formatting option 'Code')
Edit
So you can't add a style tag inside the editor, as I read in the docs. Seems like you have these options:
Style individual tags outside the editor: You add the parent selector .redactor-editor and then the tag name. See http://imperavi.com/redactor/examples/typography/
Add several formattingAdd options to let users pick up custom styles from the formatting dropdown:
$('#redactor').redactor({
formattingAdd: [
{
tag: 'p',
title: 'Red Block',
class: 'red-style'
}
]
});
/**
* The above would create a new formatting entry,
* which you define with 2 css selectors:
* one for the class of the entry, another for the dropdown entry
*
* .red-style, .redactor-dropdown .redactor-formatting-red-style {
* color: red;
* }
*/
Notice css selector rule for the dropdown, which is .redactor-dropdown .redactor-formatting-YOUR_CSS_CLASSNAME. This also is important:
formattingAdd can only be applied to p, pre, blockquote and header
tags.
So you can't apply it to <div>. If you need block element, use <p>. Also, if you need inline, you CAN use <span>... it works, see fiddle: http://jsfiddle.net/a4df10vj/1/
I would like to change background color in a (bootstrap) grid in yii, depending on compared cell values.
It took me a while to figure out where do I even have to place CSS class to get something - .../protected/css/styles.css:
.notice {
background:#FFF6BF;
color:#514721;
}
I hope this is the right place.
In my grid:
'columns' => array(
...
array(
'name' => 'Pcs',
'cssClassExpression' => '$data["Pcs"] <> $data["Pcs"] ? "notice" : ""',
),
this way, my css definition is applied only in every second row. I've read a lot about this in different topics: CGridView. Add custom class to table rows preserving original „odd“ and „even“ and also here in stackoverflow.com.
I know there are "odd" and "even" rows, but I still don't get the picture. I've tried to manually change rowCssClassExpression
'rowCssClassExpression' => '',
because I thought if I disable basic yii row coloring, my css will apply, and in html source I can see there are proper class definitions for each row, but still, rows background color remained the same. What should I do to make it work?
Thanks a lot!
Your css rules are being ignored. The selector that's being applied is table tr td thus yours should be as follows
table tr td.notice {
background:#FFF6BF;
color:#514721;
}
If this doesn't work you could always set the rules using !important