I've made my custom theme and extended the basic theme using configuration (index.js):
extend: '#vuepress/theme-default'
What I can't accomplish is disabling the plugins and overriding the default styles using (config.js):
module.exports = {
// Disabling plugins we received from parent theme
plugins: {
'#vuepress/active-header-links': false,
'#vuepress/search': false,
'#vuepress/plugin-nprogress': false,
},
...
and (index.styl):
// For example
body
background-color: red !important;
When I run the dev server using the npm run dev or even after I build the website with npm run build, the result is the same. The old theme's plugins and styles stay.
I can even see them when I inspect the fetched CSS files.
I've read the docs but can't understand if this is an issue, or if I got something wrong.
For you to inherit a theme you must to create the file docs/.vuepress/index.js :
// docs/.vuepress/index.js
module.exports = {
extend: '#vuepress/theme-default',
};
If you want to disable plugins, you must to declare the plugin-name with false:
// docs/.vuepress/index.js
module.exports = {
extend: '#vuepress/theme-default',
plugins: [
['#vuepress/active-header-links', false],
['#vuepress/search', false],
['#vuepress/plugin-nprogress', false],
['smooth-scroll', false]
],
};
For more information about this click here
If you want to replace styles, you must to create the file docs/.vuepress/styles/index.styl:
/* docs/.vuepress/styles/index.styl */
body {
background-color: yellow !important;
}
This also applies to others styles files present in default-theme. But you should pay attention to that:
Both the user’s styles/index.styl and the theme’s styles/index.styl are generated into the final CSS file, but the user’s style is generated later and therefore has higher priority.
Click here for more information.
If you have a lot of changes to the default theme, it is worth creating a new theme, because the inheritance is intended for minor corrections.
Related
I use Nuxt with vuetify. And I would like to use google fonts. Unfortunately it is not possible to overwrite the default font Roboto with a main.styl file. The goal in the main.stly is to overwrite the vuetify styl. How is that possible that I overwrite everything with my font (also buttons). Thank you very much for your help
nuxt.config.js
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Noto+Serif'
}
css: [
'~/assets/style/app.styl',
'~/assets/style/main.styl'css:],
main.styl
body{
font-family: 'Noto Serif', serif;}
image 01
image 02
Don't know if it is still relevant, but you can try the following:
In your nuxt.config.js:
vuetify: {
customVariables: ['~/assets/variables.styl']
}
And in */assets/variables.styl:
$body-font-family = 'Noto Serif', serif
In nuxt.config.js you can add as follows and it automatically takes from google fonts.
You do not have to specify the font in your scss files. It automatically does that for you.
This way it works for me:
in app.styl, which you specify as entry-point for your styles:
$body-font-family = 'Ubuntu'
#require '~vuetify/src/stylus/main'
In your nuxt.config.js:
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true, // IMPORTANT! Else the default variables won't be overwritten
}
In your assets/variables.scss:
$body-font-family: 'FontName', sans-serif !default;
Linking any documentation is useless because this part of the nuxt documentation is totally ambiguous and misses a lot of things.
In CKEditor 5 I don't see field for target attribute in link dialog.
How to add such field? Or set target=_blank as default.
Thanks
Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.
There might be manual or automatic decorators.
First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".
Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.
There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.
You can achieve it by adding this code in CKEditor Initialization Script:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
} )
.then( ... )
.catch( ... );
Here is the Documentation Link . It will be working fine.
I want to have separate config for ckditor.
For example in page temp1.html i want to have 'links' and in page temp2.html i don't want to have links.
Whats the good config for this?
I think configuration in below code is proper place for do this.
//var editor_data = CKEDITOR.instances.editor1.getData();
$('textarea#editor').ckeditor(
function () {
/* callback code */
},
//configuration
{
toolbar: 'Basic',
language: 'en',
});
You can use config.removePlugins to control the presence of certain plugins, like link (also config.removeButtons). But please note that since CKEditor 4.1, by doing this you restrict the content of the editor associated with the plugin or button (no link plugin or button = no links in the content).
So if you want to share the same content between different templates which use a different sets of plugins you need to explicitly expand config.extraAllowedContent of some editors:
$('#editor-linkless').ckeditor( function() {}, {
removePlugins: 'link',
extraAllowedContent: 'a[href,name,id,target]'
} );
$('#editor-regular').ckeditor();
JSFiddle.
See the official guide about ACF. Also this answer to know more.
I have multiple instances of a CKEDITOR inline on a page.
I want to be able to customise the toolbar for each of these to display different fonts in each of them.
So I have something like the following:
CKEDITOR.disableAutoInline = true;
var editor1 = CKEDITOR.inline(document.getElementById('editable_476'));
CKEDITOR.config.toolbar = [ .....
];
CKEDITOR.config.font_names = 'Helvetica Nueue/Helvetica Nueue';
This works well if I have one, but If I use the same code for another CKEDITOR instance, the font is overwritten.
How do I use different toolbars for different CKEDITOR instances?
Thanks
UPDATE:
CKEDITOR.inline( editable_498, {
toolbar: [
['Bold','Italic','Underline'],
['NumberedList','BulletedList'],
['JustifyLeft','JustifyCenter','JustifyRight'],
['Undo','Redo'],
'/',
['TextColor','Font','FontSize']
],
font_names: 'Helvetica Nueue/Helvetica Nueue';
});
This throws a syntax error:
Uncaught SyntaxError: Unexpected token ;
The line is font_names: 'Helvetica Nueue/Helvetica Nueue';
Use per-instance config:
CKEDITOR.inline( element, {
toolbar: [
...
],
font_names: '...'
});
CKEDITOR.config is something that all instances inherit from. Use config for a specific instance, it'll overwrite global rules from CKEDITOR.config.
See the official configuration guide.
Developing a Firefox Add-on. Anyone can please help to figure out how to make a Panel transparent.
Here is the code to show a panel:
var panel = require("sdk/panel").Panel({
width: 570,
height: 250,
contentURL: require("sdk/self").data.url("test.html")
});
panel.show();
I found a solution, but it isn't pretty since sdk/panel.js doesn't seem to expose the raw Panel object in order to tweak/extend or compose a another Panel from the existing one.
Here goes:
(1) Get the source for sdk/panel.js here: panel.js (raw) or from within sdk folder found in your addon xpi.
(2) Add it to your addon package as a new file.
(3) Change the requires parameters of this cloned file (lines 16-24) so that they point to the correct location from your addon.
example:
change
const { validateOptions: valid } = require('./deprecated/api-utils');
to
const { validateOptions: valid } = require('sdk/deprecated/api-utils');
(4) Find line 137, and modify the variable css to your liking. Like so:
...
let css = [
".panel-inner-arrowcontent, .panel-arrowcontent {padding: 0;}", //original css rule
".panel-inner-arrowcontent, .panel-arrowcontent {opacity: 0.50; border-radius: 0.35in;}" //additional css rules: semi-transparent panel with rounded borders.
].join(" ");
...
(5) Use the modified version of panel.js instead of the one that came with the sdk.
That should be it. Like I said, it isn't particularly elegant.