I was wondering if it is possible to style the NavigationDrawer Header with css some way.
I wish i can actually post all the various things I have tried.
Any help would be appreciated. I'm out of my wits here
When in doubt, always use ScenicView. Its a handy tool to look into the scene-graph and understand various controls along with their components.
NavigationDrawer is divided into 3 parts:
Header
Item(s)
Footer
Header has a style-class header assigned to it. Therefore, you can always access it using:
.navigation-drawer.header {
// your custom css
}
Header consists of a VBox, style-class header-content.
.navigation-drawer.header > .header-content {
// your custom css
}
It consists of 2 HBox. One to store the header image and the other to store the text. The title and sub-title labels can be styled using the following css:
.navigation-drawer.header > .header-content > .text-box > * > .title {
// your custom css
}
.navigation-drawer.header > .header-content > .text-box > * > .subtitle {
// your custom css
}
Related
In my document I want to render menu chains italic and with arrows between the entries, like this:
File → Save As...
Is there a way to do this with the menu macro?
I couldn't find a way to customize the macro.
I also thought about writing a custom converter but I was hoping for a simpler way.
Edit
The answer by #Kiroul worked. I had to add some css to get the → in there. My docinfo.html ended up looking like this:
<style>
/* Customizing Menu Macro */
.menuseq b:before {
content: "\00a0";
padding-right: 0.2em;
}
.menuseq b:not(.caret),
.menuref {
font-style: italic;
}
.menuseq i.caret:before {
content: "\2192";
}
.menuseq:after {
content: "\00a0";
padding-right: 0.2em;
}
</style>
In order to do that you will need to change the styling for the menu macro. If you look at the source HTML you will see that the styling for the menu macro is done by the following CSS:
.menuseq,.menuref{color:#000}
.menuseq b:not(.caret),.menuref{font-weight:inherit}
.menuseq{word-spacing:-.02em}
.menuseq b.caret{font-size:1.25em;line-height:.8}
.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}
You could make use of the docinfo file to inject some CSS code into your HTML. Create a resources folder and create a docinfo.html file inside it, copy the following content:
<!--docfile.html-->
<style>
.menuseq b:not(.caret),.menuref{font-style:italic}
</style>
Applying this style to the example in the documentation could look like this:
:experimental:
:docinfo: shared
:docinfodir: resources
To save the file, select menu:File[Save].
Select menu:View[Zoom > Reset] to reset the zoom level to the default setting.
I have this class:
.currency-flag-clp:before {
background-image: url('~currency-flags/dist/square-flags/clp.svg');
}
I want to add that class dynamically to an html element, so I need to add a class like:
.currency-flag-XXXXX:before {
background-image: url('~currency-flags/dist/square-flags/XXXXX.svg');
}
Is there a way with sass to do that? I don't want to define 270 class per value, I just want to create the class depending on my data.
As you want to set an individual class on the element it seems you have access to your currency data when building the page. In that case there may be an alternative more simple approach without SASS.
(1) ALTERNATIVE (NON SASS) SOLUTION - maybe a simpler approach
(a) Write a css variable 'actual-currency-flag-url' for your actual flag-image to a style block in the head of your file based on the actual user setting/currency.
(b) Then use that variable to build the url-path in css.
// add to <head> of page:
// based on your data maybe you can do it by php
// note: don't use slashes when building url(...)
<style>
:root {
--actual-currency-url: url(url-path/flag-[actualCurrency].jpg);
}
</style>
// change class off html element
// from <div class="currency-flag-XXXXX"> to:
<div class="currency-flag">
// now you can do in your separate stylesheet file:
.currency-flag:before {
background-image: var(--actual-currency-url);
}
Writing the style direct to the element is less elegant but works as well of course.
(2) POSSIBLE SASS SOLUTION - building 270 classes in SASS using a mixin
(a) Based on your data: generate a simple suffix-list and use it to build a SASS map with the suffixes of your flags.
(b) Use #each to build all 270 classes at once
// example code in SASS:
$flag-suffixes: (
USD,
AUD,
EUR,
//...
);
#each $suffix in $flag-suffixes {
.currency-flag-#{$suffix}:before {
background-image: url('~currency-flags/dist/square-flags/#{$suffix}.svg');
}
}
My CKEditor fields often contain lots of content with h1, h2, h3, etc headings, and I've written a script that presents all the headings in a sidebar for quick reference. I'd also like to use this sidebar as a navigation menu for the editor content, so clicking a heading in the sidebar scrolls the editor to the related heading, but I can't figure out how to wire it all up.
This post at https://davidwalsh.name/scroll-element-ckeditor leads me to believe that it should be possible, but I can't figure out how to get to the "editor" element described in the post.
My sidebar is built with jQuery from a CKEditor textarea with id="content" like this...
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
I imagine using jQuery :contains() to identify heading elements in the editor based on the text they contain, but I can't figure out how to hook back into the CKEditor instance in a way that enables this kind of DOM activity.
I am using CKEditor 4 but am happy to upgrade to version 5 if it offers a better solution to my problem.
Thanks!
This is what wound up working for me:
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
$('#sidebar .heading').click(function() {
var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
if (element) {
element.scrollIntoView();
}
});
I'm using CKEditor as part of the WYGWAM plugin for ExpressionEngine, but at the core my issue is a CKEditor issue.
I have some custom HTML markup for certain UI elements and thus far have had no problems using the templates_files and CKEditor 3 Templates to use them.
However, for some reason, not all the markup of each HTML template is being preserved. In the following case with applying expand/collapse accordion list, the first "toggler" isn't preserved when going to the next < li > item.
The code:
CKEDITOR.addTemplates( 'default',
{
imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( '../../../../wygwam_assets' ) + 'template-thumbs/' ),
// Template definitions.
templates :
[
/* toggler */
{
title: 'Expand & Collapse List',
image: 'testing.png',
description: 'Create a collapsed list of expandable items. When each title is clicked, the content below will animate open and reveal the full content.',
html:
'<div class="toggle_wrap"><ul>' +
'<li><div class="toggler">ITEM_TITLE</div><div class="togglee">ITEM_CONTENT</div></li>' +
'</ul></div>'
}
]
});
Oddly enough, when pressing enter at the end of the last line for the < li >, the next item on the list is added with the following output:
<li>
<div class="togglee">
</div>
</li>
The togglee div is there! But why oh why not the toggler?!
See if setting allowedContent to true in your config for CKEditor makes a difference. This is used to strip style and class attributes etc. so basically strip out content that is not allowed by default.
e.g.
CKEDITOR.editorConfig = function( config ) {
config.allowedContent = true;
};
var currentDialog = CKEDITOR.dialog.getCurrent();
currentDialog._.editor.insertHtml("<customTag myAttr='var'></customTag>");
Throws an error, TypeError: Cannot read property 'isBlock' of undefined
If I try .insertHtml("<span>hello</span>") it works just fine.
How can I change ckeditor to allow me to specify my own custom html tags via .insertHtml()? I'd love to just change it to be something like <span class='custom'... or something like that, but I'm having to deal with legacy CMS articles. Using latest ckeditor. Thanks.
You need to modify CKEDITOR.dtd object so editor will know this tag and correctly parse HTML and process DOM:
CKEDITOR.dtd.customtag = { em:1 }; // List of tag names it can contain.
CKEDITOR.dtd.$block.customtag = 1; // Choose $block or $inline.
CKEDITOR.dtd.body.customtag = 1; // Body may contain customtag.
You need to allow for this tag and its styles/attrs/classes in Advanced Content Filter:
editor.filter.allow( 'customtag[myattr]', 'myfeature' );
Unfortunately, due to some caching, in certain situations you cannot modify DTD object after CKEditor is loaded - you need to modify it when it is created. So to do that:
Clone the CKEditor repository or CKEditor presets repository.
Modify core/dtd.js code.
And build your minified package following instructions in README.md - the only requirements are Java (sorry - Google Closure Compiler :P) and Bash.
PS. That error should not be thrown when unknown element is inserted, so I reported http://dev.ckeditor.com/ticket/10339 and to solve this inconvenience http://dev.ckeditor.com/ticket/10340.
I worked around this issue with a combination of createFromHtml() and insertElement()
CKEDITOR.replace('summary', { ... });
var editor = CKEDITOR.instances.summary;
editor.on('key', function(ev) {
if (ev.data.keyCode == 9) { // TAB
var tabHtml = '<span style="white-space:pre"> </span>';
var tabElement = CKEDITOR.dom.element.createFromHtml(tabHtml, editor.document);
editor.insertElement(tabElement);
}
}