I'm trying to figure out how I can remove the default css libraries of Drupal 8 on the theme I'm working on. I tried using libraries-override: to remove a specific CSS but it doesn't seem to be working. The css file is still showing. As you can see the align.module.css is still showing on Google Network Tab. I'm not sure if the method I'm using is deprecated or incorrect
name: Barebones
description: Drupal light
type: theme
core: 8.x
base theme: stable
libraries-override:
system/base:
css:
component:
/core/modules/system/css/components/align.module.css: false
Maybe help(not tested)
libraries-remove
The ability to remove entire libraries.
libraries-remove:
subtheme/library
core/modernizr
libraries-override
The ability to override entire libraries and parts of libraries:
libraries-override:
# Replace an entire library.
core/drupal.collapse: mytheme/collapse
# Replace an asset with another.
subtheme/library:
css:
theme:
css/layout.css: css/my-layout.css
# Remove an asset.
drupal/dialog:
css:
theme:
dialog.theme.css: false
# Remove an entire library.
core/modernizr: false
Related
I'm trying to get custom CSS control over TinyMCE dialogs/modals but not getting anywhere and not finding clear instructions for this in the Docs. I'm using TinyMCE 6 (the latest version).
I'm able to successfully control the main editor CSS with either of the following:
tinymce.init({
content_css: '/somefile.css',
content_style: 'some CSS rules',
But this is not affecting the dialogs. There is a note in the Docs to use the following syntax for dialogs:
tinymce.init({
popup_css: '/somefile.css',
But this is also not having any effect. It's as if any CSS rules relating to dialogs using any of these methods are completely ignored.
Has anyone done this and could point me in the right direction? Thank you.
In TinyMCE 6 you would control the look of the dialogs via the skin you use with TinyMCE.
The documentation for this in TinyMCE 6 is here: https://www.tiny.cloud/docs/tinymce/6/creating-a-skin/
Note: The popup_css option you reference was from TinyMCE 3.x and has no impact on any current version of TinyMCE.
I am building static blog site with Hexo.
Now I want to use Bulma to make design easy.
But I wonder how I can call class name from markdown.
If markdown’s # or ## automatically link to Bulma’s class ‘title’ it would be nice.
I am not sure whether the following answer will work as I haven't tried it. But it will give you a good starting point.
First replace the default markdown renderer engine (marked) with hexo-renderer-markdown-it Link
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
Then add the following in _config.yml
markdown: 'default'
For more infomation on values of markdown refer Simple Configuration page.
We can add more options to the _config.yml file.
All options along with explanations can be found Advanced Configuration page
Example Config
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-attrs
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ¶
The option which we are interested is the plugin option.
After some research, I found a plugin markdown-it-attrs that can add class attribute as well as other attributes that we normally add, to markdown components
Example input:
# header {.style-me}
paragraph {data-toggle=modal}
Output:
<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>
Works with inline elements too:
paragraph *style me*{.red} more text
Output:
<p>paragraph <em class="red">style me</em> more text</p>
More examples on plugin page
Add the plugin name in the plugin section of the _config.yml file
I am trying to remove Drupal CSS files (such as ajax-progress.module.css) from my custom theme YML. Here is what I tried:
name: Mercante
type: theme
description: Tema para o site Mercante.co
core: 8.x
stylesheets-remove:
- core/themes/stable/css/system/components/ajax-progress.module.css
libraries-override:
system/base:
css:
theme:
css/components/ajax-progress.module.css: false
Drupal's documentation about that is scarce at best...
With Drupal 8.5 you need a lot more. This removes everything:
libraries-override:
system/base: false
system/admin: false
system/maintenance: false
system/drupal.system: false
system/drupal.system.modules: false
system/diff: false
system/drupal.system.date: false
contextual/drupal.contextual-links: false
quickedit/quickedit: false
views/views.module: false
Obviously disabling modules you don't use like quickedit will help too, then you won't need to list them here.
This is for people who have 'stable' in the css path!
I was dealing with this long time but only this solution worked to me:
stylesheets-remove:
- '#stable/css/system/components/align.module.css'
But then I had to perform:
http://yourwebsite.local/core/rebuild.php
even when my cache is disabled everywhere using settings.local.php method as recommended.
I hope it will work for you as well.
Use libraries-override to remove the library associated with the all CSS components in mytheme.info.yml:
libraries-override:
system/base: false
Refer this link :
https://drupal.stackexchange.com/questions/178406/stylesheets-remove-in-info-yml-file-doesnt-work
https://drupal.stackexchange.com/questions/198315/removing-all-stable-themes-css-from-a-drupal-8-custom-theme
Your missing the leading slash /
stylesheets-remove:
- /core/themes/stable/css/system/components/ajax-progress.module.css
I'm making a new theme but have problems loading the css. Though I think it is correct to the documentation of Drupal it doesn't work.
I created a folder in /themes/custom/noadin and added the info and libraries files
noadin.info.yml :
name: noadin
description: 'My new theme'
type: theme
core: 8.x
libraries:
- noadin/global-styling
- noadin/global-scripts
and created a noadin.libraries.yml :
global-styling:
version: VERSION
css:
theme:
css/style.css: {}
global-scripts:
version: VERSION
js:
js/script.js: {}
The stylesheet is placed at /themes/custom/noadin/css
Can anyone tell me what it is that I am misunderstanding?
p.s. Drupal is taking the correct theme.
Your info.yml and libraries.yml looking fine, I think may be becouse of caching it is not loading the css and js file try after clearing the cache. (login to your admin area configuration->Development->Performance->Clear all caches) Try after this
You can try look in to this working sample (http://wiki.workassis.com/drupal-8-custom-theme-from-scratch/) this helped me.
Please make sure you have unchecked the following option from -
Home > Administration > Configuration > Development
Aggregate CSS files -- Uncheck and Save Configuration
#Koustav answer helped me a lot. I did changed the drupal/sites/default/files to proper owner since the "Bandwidth optimization menu was disabled and then went to
Home > Administration > Configuration > Development
and unchecked the Aggregate CSS files
Now it's working like a charm!
I was facing the same issue but resolved by doing the below steps.
Goto admin/config/development/performance
uncheck the Aggregate CSS files
uncheck Aggregate JavaScript files
Thanks!!!!!!!
I am using tinymce 4.0.12 in my wicket project, I have a plugin for Indian language like:
PramukhIme and IndicIme in my tinymce plugin folder, but these plugins are created according to the older version of tinymce and new version of tinymce has changed its structure to read its plugin.
My tiny initiation code is:
tinyMCE.init({
mode : "exact",
elements : "textarea",
theme : "modern",
language :"en",
plugins :pramukhime,
toolbar1 :"pramukhime,pramukhimeclick,pramukhimeconvert,pramukhimehelp"
});
Is there any way or other plugins according to the new structure of tinymce so that i can use it?
Finally i have done it without using any third party plugin in TinyMCE 4!
Note: Few things you have to keep in mind:
The language works upon the fonts installed in your OS.
Download valid fonts: Indian -> Regional fonts and install it in your OS.
Make sure all the installed fonts are proper and valid and downloaded from a proper source.
If you are using Windows, the installation path would be like this:
C:\Windows\Fonts\
Code:
tinyMCE.init({
mode : "exact",
elements : "textarea",
theme : "modern",
toolbar: "fontselect",
font_formats:"SCiRound=SCiRound;Shonarb=Shonarb;Shonar=Shonar;vrindab=vrindab;Vrinda=Vrinda;Devanagari New=Devanagari New;Kruti Dev=Kruti Dev;Kalpurush ANSI=Kalpurush ANSI;Aruna=Aruna;Haritha=Haritha"
});