I am using "import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'" and I want to include custom class in "bs-datepicker-container" tag which is marked in provided picture. Is this possible in ngx-bootstrap or not. Please let me know.
Main image for Add Class
Coding Image in HTML
Related
I'm using the Easy Admin Bundle for a mini Symfony app.
The bundle comes with the trix editor for the text_editor field input.
The editor is pretty cool and offers a code feature that encapsulates the paragraph in <pre> tags. The issue is I'm using highlightjs on frontend to make my code sections pretty. Now highlightjs requires code be encapsulated in <pre><code> ...code here... </code></pre> tags which is a bummer.
Is there any way to control in which tags are code sections encapsulated with the trix editor. In my specific case from <pre> to <pre><code>?
I had the exact same problem, and unfortunately I couldn't figure out how to update the Trix source code to add the code element in the pre element and also add the class. I asked the question here, and I'm going to open an issue to see if the nice folks over at Trix would consider adding this functionality.
So, I put together a little hack that will transform the pre elements when I display them to the user. Here is what the code looks like:
const applyFormattingToPreBlocks = function () {
const preElements = this.showPostBody.querySelector('.trix-content').querySelectorAll('pre');
preElements.forEach(function(preElement) {
const regex = /(?!lang\-\\w\*)lang-\w*\W*/gm;
const codeElement = document.createElement('code');
if (preElement.childNodes.length > 1) {
console.error('<pre> element contained nested inline elements (probably styling) and could not be processed. Please remove them and try again.')
}
let preElementTextNode = preElement.removeChild(preElement.firstChild);
let language = preElementTextNode.textContent.match(regex);
if (language) {
language = language[0].toString().trim();
preElementTextNode.textContent = preElementTextNode.textContent.replace(language, '');
codeElement.classList.add(language, 'line-numbers');
}
codeElement.append(preElementTextNode)
preElement.append(codeElement)
})
};
I also wrote up a blog post that goes into more detail about what this code is doing. I using Rails 6 and the post has an example of what the formatting looks like. Let me know if you have questions.
I need a plugin to chrome which will remove provided class from body/html tag on specific webpage.
Example: my bank just changed it's website and I discovered that I just need to remove class 'lifting' from html and body tag to bring it's old look.
Any ideas?
There is a plugin called "Stylus" which you can use to apply custom CSS. Thus you migth be able to override it.
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
I've searched here and CKEditor docs under the Advanced Content Filter, but it's really confusing to me.
All I want to do is paste some simple Flexslider code into a CKEditor box, but when it saves, the class statement is stripped, leaving just the ul.
I can find lots of ideas for removing unwanted tags, but nothing to say allow class 'slider' on a ul element.
In my config.js, I tried:
CKEDITOR.editorConfig = function( config )
{
config.allowedContent = 'ul(slider)';
}
Also, tried extraAllowedContent, but no joy. Does anyone know how to do this please?
This is enough:
CKEDITOR.replace( 'editor', {
extraAllowedContent: 'ul(slides)'
} );
You can check it on:
http://jsfiddle.net/6FnRf/
Copy that HTML, paste into editor and switch to source mode:
You can see that slides class was preserved when pasting and this means that it won't be stripped by CKEditor when you load the data (switch between source and WYSIWYG modes what equals to loading data). So if you're losing this class then something outside CKEditor is not working correctly.
I'm looking to create a content type which includes a field for an image file - simple enough. However, I want this image file to be displayed as a background-image. Do I have to create a custom node.tpl and include the image source in an inline style="background: url(sites/all/themes/theme/images/image.png);", or is there a more elegant way to do this, possibly including writing to a stylesheet from the field using JavaScript?
You can use drupal_add_css in a hook_node_view function, node preprocess script, or node template to add a style directly:
$css = "#bg-img {
background: url(/sites/all/themes/theme/images/image.png) left top no-repeat;
};"
drupal_add_css($css, 'inline');
Or, you can use a drupal setting and then reference it in a jquery script; look up drupal_add_js usage & examples with the 'setting' option:
drupal_add_js(array("moduleName" => array('bgImg' => $absolute_url)), 'setting');
Reference in jQuery using Drupal.settings.moduleName['bgImg']
IMO adjusting the node.tpl.php as you describe is perfectly sensible. Using drupal_add_css will let you set a background image on an element outside the node, eg the entire page. I've used jquery when I've needed more advanced positioning/resizing options.
Instead of reading documentations and digging into codes, just use Field Formatter CSS module (https://drupal.org/project/field_formatter_class) and get it done in minutes. It's a gem that you will find yourself using it over and over. It lets you add css classes and other options to each field in the "Manage display" of your custom content type. As for this particular case of serving a user-uploaded image as background, here is a screen capture. Add a class into the Field Formatter Class field, and then you should be able to reposition and resize further with css and jquery.
Currently experiencing an irritating quirk of Drupal views where it will change the provided css class name.
For example, if I add the class container_12 it will be rendered as container-12.
Any idea how to turn this off?
Thanks.
Views doest it because of CSS codeing standards from Drupal. You can change the behavior with phptemplate_preprocess_views_view(&$vars). Here is an example.
function phptemplate_preprocess_views_view(&$vars) {
$css_class = $view->display_handler->get_option('css_class');
if (!empty($css_class)) {
$vars['classes_array'][] = $vars['css_class'];
}
}
Also, I just can advise you to change you css, if you use a framework you can easily find a base theme with you framework on drupal.org.